Componente de botones Me gusta/Reacción
Un componente de botones de Me gusta/Reacción retro/vintage diseñado para sitios web corporativos, con tonos tierra y diseño responsivo con soporte para modo oscuro.
Código HTML
<div class="flex flex-col items-center justify-center p-6 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-lg">
<h2 class="text-2xl font-semibold text-brown-800 dark:text-brown-300 mb-4">
Share Your Reaction!
</h2>
<div class="flex space-x-4">
<button class="flex flex-col items-center bg-brown-300 dark:bg-brown-700 hover:bg-brown-400 dark:hover:bg-brown-600 text-white rounded-lg shadow-md p-2 transition duration-300">
<img src="https://picsum.photos/id/1005/50/50" alt="Like" class="mb-1 rounded-full" />
<span>👍 Like</span>
</button>
<button class="flex flex-col items-center bg-brown-300 dark:bg-brown-700 hover:bg-brown-400 dark:hover:bg-brown-600 text-white rounded-lg shadow-md p-2 transition duration-300">
<img src="https://picsum.photos/id/1006/50/50" alt="Love" class="mb-1 rounded-full" />
<span>❤️ Love</span>
</button>
<button class="flex flex-col items-center bg-brown-300 dark:bg-brown-700 hover:bg-brown-400 dark:hover:bg-brown-600 text-white rounded-lg shadow-md p-2 transition duration-300">
<img src="https://picsum.photos/id/1007/50/50" alt="Haha" class="mb-1 rounded-full" />
<span>😂 Haha</span>
</button>
<button class="flex flex-col items-center bg-brown-300 dark:bg-brown-700 hover:bg-brown-400 dark:hover:bg-brown-600 text-white rounded-lg shadow-md p-2 transition duration-300">
<img src="https://picsum.photos/id/1008/50/50" alt="Wow" class="mb-1 rounded-full" />
<span>😮 Wow</span>
</button>
<button class="flex flex-col items-center bg-brown-300 dark:bg-brown-700 hover:bg-brown-400 dark:hover:bg-brown-600 text-white rounded-lg shadow-md p-2 transition duration-300">
<img src="https://picsum.photos/id/1009/50/50" alt="Sad" class="mb-1 rounded-full" />
<span>😢 Sad</span>
</button>
<button class="flex flex-col items-center bg-brown-300 dark:bg-brown-700 hover:bg-brown-400 dark:hover:bg-brown-600 text-white rounded-lg shadow-md p-2 transition duration-300">
<img src="https://picsum.photos/id/1010/50/50" alt="Angry" class="mb-1 rounded-full" />
<span>😠 Angry</span>
</button>
</div>
</div>Componentes relacionados
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.
Componente de botones Me gusta/Reacción
Un componente de botones Me gusta/Reacción de estilo retro/vintage, con una gama de botones interactivos para reacciones con soporte para temas oscuros y diseño responsivo. Este componente es adecuado para un tablero, lo que permite a los usuarios reaccionar a varios elementos de la interfaz.
Componente de botones Me gusta/Reacción
Botones de Me gusta/Reacción Componente codificado en HTML con Tailwind CSS, con un diseño de Brutalismo, combinación de colores en tonos Tierra y complejidad moderada, adecuado para el comercio electrónico. Incluye diseño responsivo y soporte para modo oscuro.