Composant Like/Reaction Buttons
Un composant de boutons J’aime/Réaction conçu dans le style Brutalism avec Tailwind CSS, avec des effets réactifs et une prise en charge du thème sombre.
HTML Code
<div class="flex flex-col items-center p-4 bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-300 dark:border-gray-700 space-y-4">
<h2 class="text-2xl font-bold text-gray-800 dark:text-white">React to this!</h2>
<div class="grid grid-cols-2 gap-4">
<button class="bg-blue-500 text-white font-bold py-2 px-4 rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-50 dark:bg-blue-700 dark:hover:bg-blue-800 dark:focus:ring-blue-500 rounded-md">
👍 Like
</button>
<button class="bg-red-500 text-white font-bold py-2 px-4 rounded-md hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-red-400 focus:ring-opacity-50 dark:bg-red-700 dark:hover:bg-red-800 dark:focus:ring-red-500 rounded-md">
❤️ Love
</button>
<button class="bg-yellow-500 text-white font-bold py-2 px-4 rounded-md hover:bg-yellow-600 focus:outline-none focus:ring-2 focus:ring-yellow-400 focus:ring-opacity-50 dark:bg-yellow-700 dark:hover:bg-yellow-800 dark:focus:ring-yellow-500 rounded-md">
😂 Haha
</button>
<button class="bg-green-500 text-white font-bold py-2 px-4 rounded-md hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-green-400 focus:ring-opacity-50 dark:bg-green-700 dark:hover:bg-green-800 dark:focus:ring-green-500 rounded-md">
😮 Wow
</button>
</div>
<div class="flex space-x-4">
<img src="https://picsum.photos/40/40" alt="User Avatar" class="rounded-full border-2 border-white dark:border-gray-800" />
<img src="https://picsum.photos/40/40?random=1" alt="User Avatar" class="rounded-full border-2 border-white dark:border-gray-800" />
<img src="https://picsum.photos/40/40?random=2" alt="User Avatar" class="rounded-full border-2 border-white dark:border-gray-800" />
</div>
</div>
<style>
@media (prefers-color-scheme: dark) {
body {
background-color: #1a202c;
}
}
</style>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.
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.