Componente de botones Me gusta/Reacción
Un componente de botones de Me gusta / Reacción receptivo con soporte de modo oscuro usando Tailwind CSS. Cuenta con un esquema de color complementario adecuado para un tablero, con una complejidad moderada para botones de reacción interactivos.
Código 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>
Componentes relacionados
Componente de botones de reacción/Me gusta esqueuomórfico
Un componente de botones de reacción/Me gusta esqueuomórfico habilitado para temas oscuros complejos, responsivos y con un esquema de color monocromático para el comercio electrónico.
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 de botones Me gusta/Reacción con estilo Glassmorphism con efectos responsivos y compatibilidad con el modo oscuro mediante Tailwind CSS.