Componente de botones Me gusta/Reacción
Un componente de botones de Me gusta/Reacción con estilo de diseño Glassmorphism, con efectos de vidrio esmerilado, diseño responsivo y compatibilidad con temas oscuros mediante Tailwind CSS.
Código 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>Componentes relacionados
Componente de botones Me gusta/Reacción
Un componente de botones de reacción/me gusta de diseño en 3D que utiliza Tailwind CSS con soporte para temas oscuros y efectos responsivos.
Botones Me gusta/Reacción
Componente de botones de Me gusta / Reacción con diseño de brutalismo, tonos tierra, interacciones complejas, responsivo, soporte de temas oscuros. Sin JS, HTML puro con Tailwind.
Componente de botones Me gusta/Reacción
Un componente web que presenta botones Me gusta y Reacción diseñados en un estilo skeuomórfico, con efectos responsivos y soporte de temas oscuros mediante Tailwind CSS.