Composant Like/Reaction Buttons
Un composant réactif de boutons J’aime/Réaction conçu pour les micro-interactions, utilisant un schéma de couleurs monochromatiques, adapté à la consommation de blogs et de contenu, avec prise en charge des thèmes sombres.
HTML Code
<div class="flex flex-col items-center p-4 space-y-4 bg-gray-200 dark:bg-gray-800 rounded-md shadow-md">
<h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Engage with this post!</h2>
<div class="flex space-x-4">
<button class="relative group p-2 rounded-full text-blue-600 dark:text-blue-300 hover:bg-blue-100 dark:hover:bg-blue-600 transition duration-300 ease-in-out">
<img src="https://picsum.photos/35/35" alt="Like" class="rounded-full">
<span class="absolute bottom-full left-1/2 transform -translate-x-1/2 -translate-y-2 opacity-0 group-hover:opacity-100 transition-opacity duration-300">Like</span>
</button>
<button class="relative group p-2 rounded-full text-green-600 dark:text-green-300 hover:bg-green-100 dark:hover:bg-green-600 transition duration-300 ease-in-out">
<img src="https://picsum.photos/35/35" alt="Love" class="rounded-full">
<span class="absolute bottom-full left-1/2 transform -translate-x-1/2 -translate-y-2 opacity-0 group-hover:opacity-100 transition-opacity duration-300">Love</span>
</button>
<button class="relative group p-2 rounded-full text-red-600 dark:text-red-300 hover:bg-red-100 dark:hover:bg-red-600 transition duration-300 ease-in-out">
<img src="https://picsum.photos/35/35" alt="Angry" class="rounded-full">
<span class="absolute bottom-full left-1/2 transform -translate-x-1/2 -translate-y-2 opacity-0 group-hover:opacity-100 transition-opacity duration-300">Angry</span>
</button>
</div>
<p class="text-sm text-gray-600 dark:text-gray-400">Your reactions help us improve!</p>
</div>Composants associés
NeumorphismLikeReactionButtons
Composant réactif pour blog/contenu avec prise en charge du thème sombre et conception Neumorphism.
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 de boutons Like/Reaction de style rétro/vintage, comprenant une gamme de boutons interactifs pour les réactions avec une prise en charge du thème sombre et un design réactif. Ce composant est adapté à un tableau de bord, permettant aux utilisateurs de réagir à divers éléments de l’interface.