Composant Like/Reaction Buttons
Un composant de boutons Like/Reaction de style rétro/vintage, comprenant une gamme de boutons interactifs pour les réactions avec une prise en charge du thème sombre et un design réactif. Ce composant est adapté à un tableau de bord, permettant aux utilisateurs de réagir à divers éléments de l’interface.
HTML Code
<div class="bg-gray-900 dark:bg-gray-800 p-5 rounded-lg shadow-lg max-w-lg mx-auto">
<h2 class="text-2xl font-extrabold text-center text-yellow-300 mb-4">React with Nostalgia!</h2>
<div class="flex justify-around mb-4">
<button class="bg-red-500 hover:bg-red-400 text-white font-bold py-2 px-4 rounded-full shadow-lg transition duration-300 ease-in-out transform hover:-translate-y-1">❤️ Like</button>
<button class="bg-blue-500 hover:bg-blue-400 text-white font-bold py-2 px-4 rounded-full shadow-lg transition duration-300 ease-in-out transform hover:-translate-y-1">😂 Haha</button>
<button class="bg-yellow-500 hover:bg-yellow-400 text-white font-bold py-2 px-4 rounded-full shadow-lg transition duration-300 ease-in-out transform hover:-translate-y-1">😢 Sad</button>
<button class="bg-green-500 hover:bg-green-400 text-white font-bold py-2 px-4 rounded-full shadow-lg transition duration-300 ease-in-out transform hover:-translate-y-1">😡 Angry</button>
</div>
<hr class="border-gray-600 mb-4">
<div class="flex items-center justify-center">
<img class="w-12 h-12 rounded-full border-2 border-yellow-300 mr-2" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
<span class="text-lg text-gray-300">John Doe</span>
</div>
<div class="mt-4">
<p class="text-gray-400 text-center">React to the content with your feelings!</p>
</div>
</div>
<div class="bg-gray-900 dark:bg-gray-800 p-5 rounded-lg shadow-lg max-w-lg mx-auto mt-6">
<h3 class="text-xl font-semibold text-center text-yellow-300 mb-4">Select Your Mood</h3>
<div class="grid grid-cols-2 gap-4">
<button class="bg-red-500 hover:bg-red-400 text-white font-bold py-2 rounded-lg shadow-lg transition duration-300">Excited</button>
<button class="bg-blue-500 hover:bg-blue-400 text-white font-bold py-2 rounded-lg shadow-lg transition duration-300">Happy</button>
<button class="bg-yellow-500 hover:bg-yellow-400 text-white font-bold py-2 rounded-lg shadow-lg transition duration-300">Sad</button>
<button class="bg-green-500 hover:bg-green-400 text-white font-bold py-2 rounded-lg shadow-lg transition duration-300">Angry</button>
</div>
</div>Composants associés
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.
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.
Composant Like/Reaction Buttons
Un ensemble complexe et minimaliste de boutons de réaction pour une plate-forme musicale/audio, avec des couleurs vives, une prise en charge du mode sombre et une réactivité totale.