Composant Like/Reaction Buttons
Un composant Like/Reaction Buttons de style Glassmorphism avec des effets réactifs et la prise en charge du mode sombre à l’aide de Tailwind CSS.
HTML Code
<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>Composants associés
Composant Like/Reaction Buttons
Un composant web complexe caractérisé par un morphisme en verre avec des éléments translucides et des effets de flou. Il comprend plusieurs éléments interactifs conçus pour les sites Web d’entreprise, prenant en charge le mode sombre.
Composant Like/Reaction Buttons
Un composant Web comportant des boutons J’aime et Réaction avec des micro-interactions et la prise en charge du thème sombre à l’aide de Tailwind CSS.
Boutons de réaction skeuomorphe
Un ensemble de boutons J’aime et de réaction avec un style de conception Skeuomorphique, prenant en charge les mises en page réactives et le mode sombre. Les boutons sont implémentés uniquement avec HTML et Tailwind CSS, sans JavaScript. Le mode sombre est géré via les classes CSS. Les images de remplacement sont utilisées pour les avatars.