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.
HTML Code
<div class="flex flex-col items-center justify-center p-8 bg-gray-900 dark:bg-gray-800 rounded-lg shadow-lg backdrop-blur-md bg-opacity-30">
<div class="flex items-center space-x-4 mb-6">
<img src="https://picsum.photos/50/50" alt="User Avatar" class="w-12 h-12 rounded-full border border-white">
<span class="text-white text-lg font-semibold">Your Name</span>
</div>
<span class="text-white text-sm mb-4">How do you feel about this?</span>
<div class="flex space-x-4">
<button class="p-4 rounded-lg bg-gradient-to-r from-blue-500 to-purple-600 hover:from-blue-600 hover:to-purple-700 transition-all duration-300 text-white shadow-lg dark:bg-gradient-to-r dark:from-blue-700 dark:to-purple-800 dark:hover:from-blue-800 dark:hover:to-purple-900">
Like
</button>
<button class="p-4 rounded-lg bg-gradient-to-r from-yellow-400 to-orange-500 hover:from-yellow-500 hover:to-orange-600 transition-all duration-300 text-white shadow-lg dark:bg-gradient-to-r dark:from-yellow-500 dark:to-orange-600 dark:hover:from-yellow-600 dark:hover:to-orange-700">
Love
</button>
<button class="p-4 rounded-lg bg-gradient-to-r from-red-400 to-pink-500 hover:from-red-500 hover:to-pink-600 transition-all duration-300 text-white shadow-lg dark:bg-gradient-to-r dark:from-red-500 dark:to-pink-600 dark:hover:from-red-600 dark:hover:to-pink-700">
Angry
</button>
</div>
<div class="mt-6 flex items-center space-x-2">
<span class="text-white">Total Reactions:</span>
<span class="text-white font-bold">123</span>
</div>
</div>Composants associés
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.
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.
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.