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
NeumorfismoComoReacciónBotones
Componente responsivo de botones de Me gusta / Reacción para blog / contenido con soporte de tema oscuro y diseño de neumorfismo.
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 Me gusta/Reacción
Componente de botones de Me gusta/Reacción con microinteracciones, combinación de colores complementaria, complejidad simple, para fines de redes sociales.