Componente de botones Me gusta/Reacción
Un componente web complejo con morfismo de vidrio con elementos translúcidos y efectos de desenfoque. Incluye múltiples elementos interactivos diseñados para sitios web empresariales, soportando el modo oscuro.
Código HTML
<div class="flex flex-col items-center justify-center p-8 bg-gray-900 dark:bg-gray-800 rounded-lg shadow-lg backdrop-blur-md bg-opacity-30">
<div class="flex items-center space-x-4 mb-6">
<img src="https://picsum.photos/50/50" alt="User Avatar" class="w-12 h-12 rounded-full border border-white">
<span class="text-white text-lg font-semibold">Your Name</span>
</div>
<span class="text-white text-sm mb-4">How do you feel about this?</span>
<div class="flex space-x-4">
<button class="p-4 rounded-lg bg-gradient-to-r from-blue-500 to-purple-600 hover:from-blue-600 hover:to-purple-700 transition-all duration-300 text-white shadow-lg dark:bg-gradient-to-r dark:from-blue-700 dark:to-purple-800 dark:hover:from-blue-800 dark:hover:to-purple-900">
Like
</button>
<button class="p-4 rounded-lg bg-gradient-to-r from-yellow-400 to-orange-500 hover:from-yellow-500 hover:to-orange-600 transition-all duration-300 text-white shadow-lg dark:bg-gradient-to-r dark:from-yellow-500 dark:to-orange-600 dark:hover:from-yellow-600 dark:hover:to-orange-700">
Love
</button>
<button class="p-4 rounded-lg bg-gradient-to-r from-red-400 to-pink-500 hover:from-red-500 hover:to-pink-600 transition-all duration-300 text-white shadow-lg dark:bg-gradient-to-r dark:from-red-500 dark:to-pink-600 dark:hover:from-red-600 dark:hover:to-pink-700">
Angry
</button>
</div>
<div class="mt-6 flex items-center space-x-2">
<span class="text-white">Total Reactions:</span>
<span class="text-white font-bold">123</span>
</div>
</div>Componentes relacionados
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.
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 análogos de Like/Reacción en modo oscuro
Un componente de botones de Me gusta/Reacción complejo y receptivo para un portafolio, con una interfaz de usuario de modo oscuro y un esquema de color análogo, implementado utilizando HTML puro y CSS de Tailwind. Es compatible con el modo oscuro a través del prefijo dark: de Tailwind.