Componente Pulsanti Mi piace/Reazione
Un componente Like/Reaction Buttons con stile di design Glassmorphism, con effetti di vetro smerigliato, design reattivo e supporto per temi scuri utilizzando Tailwind CSS.
Codice HTML
<div class="flex flex-col items-center justify-center h-screen bg-gray-100 dark:bg-gray-900">
<div class="bg-white bg-opacity-30 dark:bg-gray-800 bg-clip-padding backdrop-filter backdrop-blur-md border border-gray-300 dark:border-gray-700 rounded-lg p-6 shadow-lg transition duration-300 ease-in-out hover:shadow-xl">
<h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">React to this post!</h2>
<div class="flex space-x-4">
<button class="flex flex-col items-center bg-transparent border-2 border-transparent rounded-lg p-2 hover:border-blue-500 transition duration-300">
<img src="https://picsum.photos/30/30?random=1" alt="Like" class="rounded-full mb-1">
<span class="text-sm text-gray-800 dark:text-gray-200">Like</span>
</button>
<button class="flex flex-col items-center bg-transparent border-2 border-transparent rounded-lg p-2 hover:border-green-500 transition duration-300">
<img src="https://picsum.photos/30/30?random=2" alt="Love" class="rounded-full mb-1">
<span class="text-sm text-gray-800 dark:text-gray-200">Love</span>
</button>
<button class="flex flex-col items-center bg-transparent border-2 border-transparent rounded-lg p-2 hover:border-yellow-500 transition duration-300">
<img src="https://picsum.photos/30/30?random=3" alt="Haha" class="rounded-full mb-1">
<span class="text-sm text-gray-800 dark:text-gray-200">Haha</span>
</button>
<button class="flex flex-col items-center bg-transparent border-2 border-transparent rounded-lg p-2 hover:border-red-500 transition duration-300">
<img src="https://picsum.photos/30/30?random=4" alt="Wow" class="rounded-full mb-1">
<span class="text-sm text-gray-800 dark:text-gray-200">Wow</span>
</button>
<button class="flex flex-col items-center bg-transparent border-2 border-transparent rounded-lg p-2 hover:border-purple-500 transition duration-300">
<img src="https://picsum.photos/30/30?random=5" alt="Sad" class="rounded-full mb-1">
<span class="text-sm text-gray-800 dark:text-gray-200">Sad</span>
</button>
<button class="flex flex-col items-center bg-transparent border-2 border-transparent rounded-lg p-2 hover:border-gray-500 transition duration-300">
<img src="https://picsum.photos/30/30?random=6" alt="Angry" class="rounded-full mb-1">
<span class="text-sm text-gray-800 dark:text-gray-200">Angry</span>
</button>
</div>
</div>
</div>Componenti correlati
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.
Componente Pulsanti Mi piace/Reazione
Un componente web complesso caratterizzato da vetromorfismo con elementi traslucidi ed effetti di sfocatura. Include più elementi interattivi progettati per i siti Web aziendali, che supportano la modalità oscura.
Componente Pulsanti Mi piace/Reazione
Un componente reattivo per i pulsanti Mi piace/Reazione progettato pensando alle microinterazioni, utilizzando una combinazione di colori monocromatica, adatto per il consumo di blog e contenuti, con supporto per temi scuri.