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.
HTML Code
<div class="flex items-center justify-center bg-gray-200 dark:bg-gray-800 p-4">
<div class="flex items-center space-x-4">
<!-- Like Button -->
<button class="flex items-center justify-center px-4 py-2 rounded-full bg-gray-300 dark:bg-gray-700 text-gray-700 dark:text-gray-300 shadow-lg hover:shadow-xl transition duration-300 ease-in-out transform hover:-translate-y-1">
<svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd"></path></svg>
<span>Like</span>
<span class="ml-1 text-sm">(1.2k)</span>
</button>
<!-- Reaction Buttons Dropdown (Skeuomorphic Pop-up) -->
<div class="relative group">
<button class="flex items-center justify-center px-4 py-2 rounded-full bg-gray-300 dark:bg-gray-700 text-gray-700 dark:text-gray-300 shadow-lg hover:shadow-xl focus:outline-none transition duration-300 ease-in-out transform hover:-translate-y-1">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 12a2 2 0 100-4 2 2 0 000 4z"></path><path fill-rule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clip-rule="evenodd"></path></svg>
</button>
<div class="absolute bottom-full mb-2 left-1/2 transform -translate-x-1/2 w-64 p-4 rounded-xl shadow-2xl bg-gray-300 dark:bg-gray-700 opacity-0 group-hover:opacity-100 group-focus-within:opacity-100 transition duration-300 ease-in-out invisible group-hover:visible group-focus-within:visible scale-95 group-hover:scale-100 origin-bottom skeuomorphic-popup">
<div class="grid grid-cols-4 gap-2">
<!-- Sample Reactions (replace with actual icons/images) -->
<button class="flex flex-col items-center justify-center p-2 rounded-lg bg-gray-200 dark:bg-gray-800 hover:bg-gray-400 dark:hover:bg-gray-600 transition duration-200 transform hover:scale-110">
<span class="text-2xl">👍</span>
</button>
<button class="flex flex-col items-center justify-center p-2 rounded-lg bg-gray-200 dark:bg-gray-800 hover:bg-gray-400 dark:hover:bg-gray-600 transition duration-200 transform hover:scale-110">
<span class="text-2xl">❤️</span>
</button>
<button class="flex flex-col items-center justify-center p-2 rounded-lg bg-gray-200 dark:bg-gray-800 hover:bg-gray-400 dark:hover:bg-gray-600 transition duration-200 transform hover:scale-110">
<span class="text-2xl">😂</span>
</button>
<button class="flex flex-col items-center justify-center p-2 rounded-lg bg-gray-200 dark:bg-gray-800 hover:bg-gray-400 dark:hover:bg-gray-600 transition duration-200 transform hover:scale-110">
<span class="text-2xl">😮</span>
</button>
<button class="flex flex-col items-center justify-center p-2 rounded-lg bg-gray-200 dark:bg-gray-800 hover:bg-gray-400 dark:hover:bg-gray-600 transition duration-200 transform hover:scale-110">
<span class="text-2xl">😢</span>
</button>
<button class="flex flex-col items-center justify-center p-2 rounded-lg bg-gray-200 dark:bg-gray-800 hover:bg-gray-400 dark:hover:bg-gray-600 transition duration-200 transform hover:scale-110">
<span class="text-2xl">😡</span>
</button>
</div>
</div>
</div>
</div>
</div>
<style>
.skeuomorphic-popup {
/* Basic Skeuomorphic effect using box-shadow for depth and highlights */
box-shadow: inset 0 2px 4px rgba(0,0,0,0.2), inset 0 -2px 4px rgba(255,255,255,0.5), 0 5px 15px rgba(0,0,0,0.3);
}
.dark .skeuomorphic-popup {
box-shadow: inset 0 2px 4px rgba(0,0,0,0.5), inset 0 -2px 4px rgba(70,70,70,0.3), 0 5px 15px rgba(0,0,0,0.5);
}
</style>Composants associés
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.
NeumorphismLikeReactionButtons
Composant réactif pour blog/contenu avec prise en charge du thème sombre et conception Neumorphism.
Boutons de réaction skeuomorphe
Un ensemble de boutons J’aime et de réaction avec un style de conception Skeuomorphique, prenant en charge les mises en page réactives et le mode sombre. Les boutons sont implémentés uniquement avec HTML et Tailwind CSS, sans JavaScript. Le mode sombre est géré via les classes CSS. Les images de remplacement sont utilisées pour les avatars.