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 Web qui comporte des boutons J’aime et Réaction conçus dans un style skeuomorphe, avec des effets réactifs et une prise en charge du thème sombre à l’aide de Tailwind CSS.
Composant Like/Reaction Buttons
Un composant Like/Reaction Buttons avec le style de conception Glassmorphism, avec des effets de verre givré, un design réactif et la prise en charge du thème sombre à l’aide de Tailwind CSS.
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.