Composant Like/Reaction Buttons
Un composant réactif de boutons J’aime/Réaction avec prise en charge du mode sombre à l’aide de Tailwind CSS. Il dispose d’une palette de couleurs complémentaires adaptée à un tableau de bord, avec une complexité modérée pour les boutons de réaction interactifs.
HTML Code
<div class="flex items-center justify-center min-h-screen bg-gray-900">
<div class="dark:bg-gray-800 p-4 rounded-lg shadow-xl">
<div class="flex space-x-2">
<!-- Like Button -->
<button class="flex items-center space-x-1 p-2 rounded-full dark:bg-blue-600 text-white hover:dark:bg-blue-700 transition duration-300">
<svg class="w-5 h-5" 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.857 2.14L18 17v-2.14a2 2 0 00-.857-1.857L14 10zM4 10h4.764a2 2 0 011.857 2.14L8 17v-2.14a2 2 0 00-.857-1.857L4 10zM9 16l-3 3m0 0l-3-3m3 3V4"></path></svg>
<span>Like</span>
<span class="dark:text-blue-200">1.2K</span>
</button>
<!-- Reactions Dropdown (simplified) -->
<div class="relative group">
<button class="flex items-center space-x-1 p-2 rounded-full dark:bg-green-600 text-white hover:dark:bg-green-700 transition duration-300">
<svg class="w-5 h-5" 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="M12 9v3m0 0v3m0-3h3m0 0H9m12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
<span>React</span>
</button>
<!-- This dropdown would typically be controlled by JavaScript, but for HTML-only, it's always visible on hover for demonstration -->
<div class="hidden group-hover:block absolute left-0 mt-2 w-48 dark:bg-gray-700 rounded-md shadow-lg py-1 z-10">
<a href="#" class="block px-4 py-2 text-sm text-gray-200 hover:dark:bg-gray-600">👍 Like</a>
<a href="#" class="block px-4 py-2 text-sm text-gray-200 hover:dark:bg-gray-600">❤️ Love</a>
<a href="#" class="block px-4 py-2 text-sm text-gray-200 hover:dark:bg-gray-600">😂 Laugh</a>
<a href="#" class="block px-4 py-2 text-sm text-gray-200 hover:dark:bg-gray-600">😮 Wow</a>
<a href="#" class="block px-4 py-2 text-sm text-gray-200 hover:dark:bg-gray-600">😢 Sad</a>
<a href="#" class="block px-4 py-2 text-sm text-gray-200 hover:dark:bg-gray-600">😡 Angry</a>
</div>
</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 Like/Reaction Buttons avec le style de conception Glassmorphism, avec des effets de verre givré, un design réactif et la prise en charge du thème sombre à l’aide de Tailwind CSS.
Composant Like/Reaction Buttons
Composant codé en HTML avec Tailwind CSS, avec un design brutal, une palette de couleurs Earth tones et une complexité modérée, adapté au commerce électronique. Comprend la conception réactive et la prise en charge du mode sombre.