Componente de botones Me gusta/Reacción
Un componente de botones Me gusta/Reacción con estilo Neumorphism para blogs con un diseño complejo y soporte para modo oscuro.
Código HTML
<div class="flex flex-col items-center justify-center p-6 bg-gray-200 dark:bg-gray-800 rounded-lg shadow-lg">
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-4">React to this Post</h2>
<div class="grid grid-cols-3 gap-4">
<button class="flex flex-col items-center justify-center p-4 bg-white dark:bg-gray-700 rounded-lg shadow-md hover:shadow-lg transition-all duration-300">
<img src="https://picsum.photos/50" alt="Like" class="w-12 h-12 mb-2 rounded-full">
<span class="text-gray-800 dark:text-gray-200">Like</span>
</button>
<button class="flex flex-col items-center justify-center p-4 bg-white dark:bg-gray-700 rounded-lg shadow-md hover:shadow-lg transition-all duration-300">
<img src="https://picsum.photos/50?random=1" alt="Love" class="w-12 h-12 mb-2 rounded-full">
<span class="text-gray-800 dark:text-gray-200">Love</span>
</button>
<button class="flex flex-col items-center justify-center p-4 bg-white dark:bg-gray-700 rounded-lg shadow-md hover:shadow-lg transition-all duration-300">
<img src="https://picsum.photos/50?random=2" alt="Haha" class="w-12 h-12 mb-2 rounded-full">
<span class="text-gray-800 dark:text-gray-200">Haha</span>
</button>
<button class="flex flex-col items-center justify-center p-4 bg-white dark:bg-gray-700 rounded-lg shadow-md hover:shadow-lg transition-all duration-300">
<img src="https://picsum.photos/50?random=3" alt="Wow" class="w-12 h-12 mb-2 rounded-full">
<span class="text-gray-800 dark:text-gray-200">Wow</span>
</button>
<button class="flex flex-col items-center justify-center p-4 bg-white dark:bg-gray-700 rounded-lg shadow-md hover:shadow-lg transition-all duration-300">
<img src="https://picsum.photos/50?random=4" alt="Sad" class="w-12 h-12 mb-2 rounded-full">
<span class="text-gray-800 dark:text-gray-200">Sad</span>
</button>
<button class="flex flex-col items-center justify-center p-4 bg-white dark:bg-gray-700 rounded-lg shadow-md hover:shadow-lg transition-all duration-300">
<img src="https://picsum.photos/50?random=5" alt="Angry" class="w-12 h-12 mb-2 rounded-full">
<span class="text-gray-800 dark:text-gray-200">Angry</span>
</button>
</div>
</div>Componentes relacionados
Botones Me gusta/Reacción
Componente de botones Me gusta/Reacción con microinteracciones, capacidad de respuesta y compatibilidad con temas oscuros
Componente de botones Me gusta/Reacción
Un componente receptivo de botones de Me gusta / Reacción diseñado teniendo en cuenta las microinteracciones, utilizando un esquema de color monocromático, adecuado para el blog y el consumo de contenido, con soporte para temas oscuros.
Botones de reacción skeuomórfica
Un conjunto de botones de "me gusta" y "reacción" con un estilo de diseño skeuomórfico, que admite diseños responsivos y modo oscuro. Los botones se implementan puramente con HTML y Tailwind CSS, sin JavaScript. El modo oscuro se maneja a través de clases CSS. Las imágenes de marcador de posición se utilizan para los avatares.