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
Boutons de réaction pour les jeux rétro
Un composant de bouton de réaction complexe, à thème rétro, pour les sites de jeux, avec des « likes » et d’autres types de réactions avec des comptes, conçu avec des couleurs d’automne et une réactivité totale, y compris la prise en charge du mode sombre.
Composant Art Déco Like/Reaction Buttons
Un ensemble simple et réactif de boutons J’aime/réaction avec une esthétique Art Déco, adapté aux applications sportives/fitness. Dispose de neutres chauds et d’une prise en charge du mode sombre.
Composant Like/Reaction Buttons
Un composant de boutons Like/Reaction rétro/vintage conçu pour les sites Web d’entreprise, avec des tons de terre et un design réactif avec prise en charge du mode sombre.