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 J’aime/Réaction
Composant de boutons J’aime/Réaction avec design brutal, tons de terre, interactions complexes, réactif, prise en charge du thème sombre. Pas de JS, du HTML pur avec Tailwind.
Composant Skeuomorphic Like/Reaction Buttons
Il s’agit d’un composant complexe, réactif et à thème sombre utilisant un schéma de couleurs monochromatique pour le commerce électronique.