Composant Like/Reaction Buttons
Un composant complexe de boutons J’aime/Réaction avec des micro-interactions, une palette de couleurs analogue, un design réactif et une prise en charge du thème sombre, adapté à un tableau de bord. Utilise Tailwind CSS et comprend plusieurs éléments interactifs avec des animations attrayantes.
HTML Code
<div class="flex items-center justify-center bg-gray-100 dark:bg-gray-900 p-4 min-h-screen">
<div class="flex space-x-2">
<!-- Primary Like Button -->
<button class="flex items-center space-x-1 px-4 py-2 rounded-full bg-blue-500 text-white hover:bg-blue-600 transform transition-transform duration-200 hover:scale-105 focus:outline-none dark:bg-blue-700 dark:hover:bg-blue-800">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path d="M2 10.5a1.5 1.5 0 113 0v6a1.5 1.5 0 01-3 0v-6zM6 10.333v5.667a2 2 0 002 2h2.983a2 2 0 001.828-1.154l3.913-7K11 2.167v1.833A2.5 2.5 0 008.5 6H5a2 2 0 00-2 2v2.333L6 10.333z"></path>
</svg>
<span>Like</span>
<span class="text-sm">123</span>
</button>
<!-- Reaction Buttons - Example using emojis -->
<div class="relative group">
<button class="flex items-center space-x-1 px-4 py-2 rounded-full bg-green-500 text-white hover:bg-green-600 transform transition-transform duration-200 hover:scale-105 focus:outline-none dark:bg-green-700 dark:hover:bg-green-800">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-smile">
<circle cx="12" cy="12" r="10"></circle>
<path d="M8 14s1.5 2 4 2 4-2 4-2"></path>
<line x1="9" y1="9" x2="9.01" y2="9"></line>
<line x1="15" y1="9" x2="15.01" y2="9"></line>
</svg>
<span>React</span>
</button>
<!-- Reaction Options (Hidden by default, shown on hover) -->
<div class="absolute bottom-full mb-2 left-1/2 transform -translate-x-1/2 flex space-x-1 bg-white dark:bg-gray-800 p-2 rounded-full shadow-lg opacity-0 group-hover:opacity-100 transition-opacity duration-300 z-10">
<button class="p-2 text-xl hover:scale-125 transform transition-transform duration-150">👍</button>
<button class="p-2 text-xl hover:scale-125 transform transition-transform duration-150">❤️</button>
<button class="p-2 text-xl hover:scale-125 transform transition-transform duration-150">😆</button>
<button class="p-2 text-xl hover:scale-125 transform transition-transform duration-150">😮</button>
<button class="p-2 text-xl hover:scale-125 transform transition-transform duration-150">😢</button>
<button class="p-2 text-xl hover:scale-125 transform transition-transform duration-150">😡</button>
</div>
</div>
</div>
</div>Composants associés
Composant Like/Reaction Buttons
Un composant Web qui comporte des boutons J’aime et Réaction conçus dans un style skeuomorphe, avec des effets réactifs et une prise en charge du thème sombre à l’aide de Tailwind CSS.
Composant Like/Reaction Buttons
Un composant 3D Design Like/Reaction Buttons utilisant Tailwind CSS avec prise en charge du thème sombre et effets réactifs.
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.