Boutons J’aime/Réaction
Composant Like/Reaction Buttons avec prise en charge des micro-interactions, de la réactivité et du thème sombre
HTML Code
<div class="flex items-center justify-center bg-gray-100 dark:bg-gray-800 min-h-screen">
<div class="flex space-x-4">
<button class="flex items-center space-x-1 text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 transition duration-200 ease-in-out transform hover:scale-110">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 10h4.764a2 2 0 011.808 2.808l-7.922 8.802a1.995 1.995 0 01-2.808.01z"></path>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 10h.01M7 10v7a3 3 0 003 3h.01M7 10h10.929c.795 0 1.549-.394 2-.664"></path>
</svg>
<span>Like</span>
</button>
<button class="flex items-center space-x-1 text-gray-600 dark:text-gray-300 hover:text-red-500 dark:hover:text-red-400 transition duration-200 ease-in-out transform hover:scale-110">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.84 4.91a2.14 2.14 0 00-3.03 0L12 10.78l-5.81-5.87a2.14 2.14 0 00-3.03 0 2.18 2.18 0 000 3.07L12 17l8.84-8.92a2.18 2.18 0 000-3.07z"></path>
</svg>
<span>Love</span>
</button>
<button class="flex items-center space-x-1 text-gray-600 dark:text-gray-300 hover:text-yellow-500 dark:hover:text-yellow-400 transition duration-200 ease-in-out transform hover:scale-110">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"></path>
</svg>
<span>Haha</span>
</button>
</div>
</div>Composants associés
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.
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.