Componente Pulsanti Mi piace/Reazione
Un componente reattivo Like/Reaction Buttons con supporto per la modalità oscura utilizzando Tailwind CSS. È dotato di una combinazione di colori complementari adatta a un cruscotto, con una complessità moderata per i pulsanti di reazione interattivi.
Codice HTML
<div class="flex items-center justify-center min-h-screen bg-gray-900">
<div class="dark:bg-gray-800 p-4 rounded-lg shadow-xl">
<div class="flex space-x-2">
<!-- Like Button -->
<button class="flex items-center space-x-1 p-2 rounded-full dark:bg-blue-600 text-white hover:dark:bg-blue-700 transition duration-300">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 10h4.764a2 2 0 011.857 2.14L18 17v-2.14a2 2 0 00-.857-1.857L14 10zM4 10h4.764a2 2 0 011.857 2.14L8 17v-2.14a2 2 0 00-.857-1.857L4 10zM9 16l-3 3m0 0l-3-3m3 3V4"></path></svg>
<span>Like</span>
<span class="dark:text-blue-200">1.2K</span>
</button>
<!-- Reactions Dropdown (simplified) -->
<div class="relative group">
<button class="flex items-center space-x-1 p-2 rounded-full dark:bg-green-600 text-white hover:dark:bg-green-700 transition duration-300">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v3m0 0v3m0-3h3m0 0H9m12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
<span>React</span>
</button>
<!-- This dropdown would typically be controlled by JavaScript, but for HTML-only, it's always visible on hover for demonstration -->
<div class="hidden group-hover:block absolute left-0 mt-2 w-48 dark:bg-gray-700 rounded-md shadow-lg py-1 z-10">
<a href="#" class="block px-4 py-2 text-sm text-gray-200 hover:dark:bg-gray-600">👍 Like</a>
<a href="#" class="block px-4 py-2 text-sm text-gray-200 hover:dark:bg-gray-600">❤️ Love</a>
<a href="#" class="block px-4 py-2 text-sm text-gray-200 hover:dark:bg-gray-600">😂 Laugh</a>
<a href="#" class="block px-4 py-2 text-sm text-gray-200 hover:dark:bg-gray-600">😮 Wow</a>
<a href="#" class="block px-4 py-2 text-sm text-gray-200 hover:dark:bg-gray-600">😢 Sad</a>
<a href="#" class="block px-4 py-2 text-sm text-gray-200 hover:dark:bg-gray-600">😡 Angry</a>
</div>
</div>
</div>
</div>
</div>
Componenti correlati
Componente Pulsanti Mi piace/Reazione
Un componente web che presenta pulsanti Mi piace e Reazione progettati in uno stile scheumorfico, con effetti reattivi e supporto per temi scuri utilizzando Tailwind CSS.
Pulsanti Mi piace/Reazione
Componente Pulsanti Mi piace/Reazione con design brutale, toni della terra, interazioni complesse, reattivo e supporto per temi scuri. Niente JS, HTML puro con Tailwind.