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 Like/Reaction Buttons
Un composant de boutons Like/Reaction de style Neumorphism pour les blogs avec un design complexe et une prise en charge du mode sombre.
Composant Like/Reaction Buttons
Un composant réactif de boutons J’aime/Réaction conçu pour les micro-interactions, utilisant un schéma de couleurs monochromatiques, adapté à la consommation de blogs et de contenu, avec prise en charge des thèmes sombres.