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.
Código HTML
<div class="flex justify-center items-center space-x-4 p-6 bg-white bg-opacity-10 backdrop-blur-lg rounded-lg shadow-lg dark:bg-gray-800 dark:bg-opacity-30">
<div class="flex items-center space-x-2">
<img class="w-8 h-8 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
<span class="text-lg text-gray-900 dark:text-white">Like</span>
</div>
<button class="flex items-center p-2 text-white bg-blue-500 rounded-full transition duration-300 ease-in-out hover:bg-blue-600 focus:outline-none">
<span class="material-icons"> thumb_up </span>
</button>
<button class="flex items-center p-2 text-white bg-red-500 rounded-full transition duration-300 ease-in-out hover:bg-red-600 focus:outline-none">
<span class="material-icons"> favorite </span>
</button>
<button class="flex items-center p-2 text-white bg-yellow-500 rounded-full transition duration-300 ease-in-out hover:bg-yellow-600 focus:outline-none">
<span class="material-icons"> sentiment_satisfied </span>
</button>
</div>
<style>
/* Add Material Icons font link */
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');
</style>Componentes relacionados
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.
Componente de botones Me gusta/Reacción
Un componente de botones Me gusta/Reacción de estilo retro/vintage, con una gama de botones interactivos para reacciones con soporte para temas oscuros y diseño responsivo. Este componente es adecuado para un tablero, lo que permite a los usuarios reaccionar a varios elementos de la interfaz.
Botones Me gusta/Reacción
Componente de botones de Me gusta / Reacción con diseño de brutalismo, tonos tierra, interacciones complejas, responsivo, soporte de temas oscuros. Sin JS, HTML puro con Tailwind.