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.
HTML Code
<div class="flex flex-col items-center justify-center h-screen bg-gray-100 dark:bg-gray-900">
<div class="bg-white bg-opacity-30 dark:bg-gray-800 bg-clip-padding backdrop-filter backdrop-blur-md border border-gray-300 dark:border-gray-700 rounded-lg p-6 shadow-lg transition duration-300 ease-in-out hover:shadow-xl">
<h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">React to this post!</h2>
<div class="flex space-x-4">
<button class="flex flex-col items-center bg-transparent border-2 border-transparent rounded-lg p-2 hover:border-blue-500 transition duration-300">
<img src="https://picsum.photos/30/30?random=1" alt="Like" class="rounded-full mb-1">
<span class="text-sm text-gray-800 dark:text-gray-200">Like</span>
</button>
<button class="flex flex-col items-center bg-transparent border-2 border-transparent rounded-lg p-2 hover:border-green-500 transition duration-300">
<img src="https://picsum.photos/30/30?random=2" alt="Love" class="rounded-full mb-1">
<span class="text-sm text-gray-800 dark:text-gray-200">Love</span>
</button>
<button class="flex flex-col items-center bg-transparent border-2 border-transparent rounded-lg p-2 hover:border-yellow-500 transition duration-300">
<img src="https://picsum.photos/30/30?random=3" alt="Haha" class="rounded-full mb-1">
<span class="text-sm text-gray-800 dark:text-gray-200">Haha</span>
</button>
<button class="flex flex-col items-center bg-transparent border-2 border-transparent rounded-lg p-2 hover:border-red-500 transition duration-300">
<img src="https://picsum.photos/30/30?random=4" alt="Wow" class="rounded-full mb-1">
<span class="text-sm text-gray-800 dark:text-gray-200">Wow</span>
</button>
<button class="flex flex-col items-center bg-transparent border-2 border-transparent rounded-lg p-2 hover:border-purple-500 transition duration-300">
<img src="https://picsum.photos/30/30?random=5" alt="Sad" class="rounded-full mb-1">
<span class="text-sm text-gray-800 dark:text-gray-200">Sad</span>
</button>
<button class="flex flex-col items-center bg-transparent border-2 border-transparent rounded-lg p-2 hover:border-gray-500 transition duration-300">
<img src="https://picsum.photos/30/30?random=6" alt="Angry" class="rounded-full mb-1">
<span class="text-sm text-gray-800 dark:text-gray-200">Angry</span>
</button>
</div>
</div>
</div>Composants associés
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.
Boutons analogues de like/réaction en mode sombre
Un composant complexe et réactif de boutons J’aime/Réaction pour un portfolio, avec une interface utilisateur en mode sombre et un schéma de couleurs analogue, mis en œuvre à l’aide de HTML pur et de CSS Tailwind. Il prend en charge le mode sombre via le préfixe dark : de Tailwind.
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.