Componente de botones Me gusta/Reacción
Un componente de botones de Me gusta/Reacción diseñado en estilo Brutalismo con CSS de Tailwind, con efectos responsivos y soporte para temas oscuros.
Código HTML
<div class="flex flex-col items-center p-4 bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-300 dark:border-gray-700 space-y-4">
<h2 class="text-2xl font-bold text-gray-800 dark:text-white">React to this!</h2>
<div class="grid grid-cols-2 gap-4">
<button class="bg-blue-500 text-white font-bold py-2 px-4 rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-50 dark:bg-blue-700 dark:hover:bg-blue-800 dark:focus:ring-blue-500 rounded-md">
👍 Like
</button>
<button class="bg-red-500 text-white font-bold py-2 px-4 rounded-md hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-red-400 focus:ring-opacity-50 dark:bg-red-700 dark:hover:bg-red-800 dark:focus:ring-red-500 rounded-md">
❤️ Love
</button>
<button class="bg-yellow-500 text-white font-bold py-2 px-4 rounded-md hover:bg-yellow-600 focus:outline-none focus:ring-2 focus:ring-yellow-400 focus:ring-opacity-50 dark:bg-yellow-700 dark:hover:bg-yellow-800 dark:focus:ring-yellow-500 rounded-md">
😂 Haha
</button>
<button class="bg-green-500 text-white font-bold py-2 px-4 rounded-md hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-green-400 focus:ring-opacity-50 dark:bg-green-700 dark:hover:bg-green-800 dark:focus:ring-green-500 rounded-md">
😮 Wow
</button>
</div>
<div class="flex space-x-4">
<img src="https://picsum.photos/40/40" alt="User Avatar" class="rounded-full border-2 border-white dark:border-gray-800" />
<img src="https://picsum.photos/40/40?random=1" alt="User Avatar" class="rounded-full border-2 border-white dark:border-gray-800" />
<img src="https://picsum.photos/40/40?random=2" alt="User Avatar" class="rounded-full border-2 border-white dark:border-gray-800" />
</div>
</div>
<style>
@media (prefers-color-scheme: dark) {
body {
background-color: #1a202c;
}
}
</style>Componentes relacionados
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.
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.