Componente de botones Me gusta/Reacción
Un componente web que presenta botones Me gusta y Reacción diseñados en un estilo skeuomórfico, con efectos responsivos y soporte de temas oscuros mediante Tailwind CSS.
Código HTML
<div class="flex flex-col items-center justify-center p-4 bg-white dark:bg-gray-800 rounded-lg shadow-lg max-w-xs mx-auto">
<div class="flex items-center justify-between w-full">
<img src="https://picsum.photos/50/50?random=1" alt="Avatar" class="rounded-full border-2 border-gray-300 dark:border-gray-600">
<div class="flex space-x-2">
<button class="flex items-center bg-gradient-to-br from-blue-400 to-blue-600 text-white py-2 px-4 rounded-lg shadow-md transform hover:scale-105 hover:shadow-xl transition-all duration-300">
<span>👍</span> Like
</button>
<button class="flex items-center bg-gradient-to-br from-yellow-400 to-yellow-600 text-white py-2 px-4 rounded-lg shadow-md transform hover:scale-105 hover:shadow-xl transition-all duration-300">
<span>❤️</span> Love
</button>
<button class="flex items-center bg-gradient-to-br from-red-400 to-red-600 text-white py-2 px-4 rounded-lg shadow-md transform hover:scale-105 hover:shadow-xl transition-all duration-300">
<span>😂</span> Haha
</button>
<button class="flex items-center bg-gradient-to-br from-green-400 to-green-600 text-white py-2 px-4 rounded-lg shadow-md transform hover:scale-105 hover:shadow-xl transition-all duration-300">
<span>😮</span> Wow
</button>
</div>
</div>
<div class="mt-4 text-center text-gray-700 dark:text-gray-300">
<p class="text-sm">Tap your reaction!</p>
</div>
</div>Componentes relacionados
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.
Retro_Reaction_Buttons_Industrial
Componente de botones de me gusta/reacción simple y receptivo con una estética industrial retro, adecuado para sitios web de empresas industriales o de fabricación.
Botones de reacción de juegos retro
Un componente complejo de botón de reacción de temática retro para sitios web de juegos, con 'me gusta' y otros tipos de reacción con recuentos, diseñado con colores otoñales y capacidad de respuesta completa, incluida la compatibilidad con el modo oscuro.