Componente de botones Me gusta/Reacción
Un componente web con botones Me gusta y Reacción con microinteracciones y soporte para temas oscuros usando Tailwind CSS.
Código HTML
<div class="flex flex-col items-center justify-center p-4">
<h2 class="text-xl font-semibold mb-4 dark:text-white">React to this</h2>
<div class="flex space-x-4">
<button class="group bg-blue-500 text-white px-4 py-2 rounded-full transition-transform transform hover:scale-105 hover:bg-blue-600 focus:outline-none focus:ring focus:ring-blue-300">
<span class="flex items-center space-x-2">
<img src="https://picsum.photos/20/20" alt="like" class="rounded-full">
<span>Like</span>
</span>
</button>
<button class="group bg-gray-300 text-gray-800 px-4 py-2 rounded-full transition-transform transform hover:scale-105 hover:bg-gray-400 focus:outline-none focus:ring focus:ring-gray-300 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600">
<span class="flex items-center space-x-2">
<img src="https://picsum.photos/20/20?random=1" alt="love" class="rounded-full">
<span>Love</span>
</span>
</button>
<button class="group bg-yellow-500 text-white px-4 py-2 rounded-full transition-transform transform hover:scale-105 hover:bg-yellow-600 focus:outline-none focus:ring focus:ring-yellow-300">
<span class="flex items-center space-x-2">
<img src="https://picsum.photos/20/20?random=2" alt="laugh" class="rounded-full">
<span>Laugh</span>
</span>
</button>
<button class="group bg-red-500 text-white px-4 py-2 rounded-full transition-transform transform hover:scale-105 hover:bg-red-600 focus:outline-none focus:ring focus:ring-red-300">
<span class="flex items-center space-x-2">
<img src="https://picsum.photos/20/20?random=3" alt="wow" class="rounded-full">
<span>Wow</span>
</span>
</button>
</div>
</div>
<style>
@media (prefers-color-scheme: dark) {
body {
background-color: #1a1a1a;
color: #ffffff;
}
}
</style>Componentes relacionados
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.
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 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.