Composant Like/Reaction Buttons
Un composant 3D Design Like/Reaction Buttons utilisant Tailwind CSS avec prise en charge du thème sombre et effets réactifs.
HTML Code
<div class="flex justify-center items-center space-x-4 p-8 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-lg">
<div class="bg-white dark:bg-gray-900 p-4 rounded-lg shadow-md transform transition-transform duration-200 hover:scale-105">
<img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" />
<button class="mt-2 px-4 py-2 text-sm font-bold text-white bg-blue-500 rounded hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-500">Like</button>
</div>
<div class="bg-white dark:bg-gray-900 p-4 rounded-lg shadow-md transform transition-transform duration-200 hover:scale-105">
<img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" />
<button class="mt-2 px-4 py-2 text-sm font-bold text-white bg-pink-500 rounded hover:bg-pink-600 focus:outline-none focus:ring-2 focus:ring-pink-400 dark:bg-pink-600 dark:hover:bg-pink-700 dark:focus:ring-pink-500">Love</button>
</div>
<div class="bg-white dark:bg-gray-900 p-4 rounded-lg shadow-md transform transition-transform duration-200 hover:scale-105">
<img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" />
<button class="mt-2 px-4 py-2 text-sm font-bold text-white bg-yellow-500 rounded hover:bg-yellow-600 focus:outline-none focus:ring-2 focus:ring-yellow-400 dark:bg-yellow-600 dark:hover:bg-yellow-700 dark:focus:ring-yellow-500">Wow</button>
</div>
<div class="bg-white dark:bg-gray-900 p-4 rounded-lg shadow-md transform transition-transform duration-200 hover:scale-105">
<img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/3.jpg" alt="User Avatar" />
<button class="mt-2 px-4 py-2 text-sm font-bold text-white bg-green-500 rounded hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-green-400 dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-500">Haha</button>
</div>
</div>Composants associés
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 complexe de boutons J’aime/Réaction avec des micro-interactions, une palette de couleurs analogue, un design réactif et une prise en charge du thème sombre, adapté à un tableau de bord. Utilise Tailwind CSS et comprend plusieurs éléments interactifs avec des animations attrayantes.
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.