Composants Boutons J’aime/Réaction Composant Like/Reaction Buttons

Composant Like/Reaction Buttons

Un composant de boutons Like/Reaction rétro/vintage conçu pour les sites Web d’entreprise, avec des tons de terre et un design réactif avec prise en charge du mode sombre.

Aperçu

HTML Code

<div class="flex flex-col items-center justify-center p-6 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-lg">
    <h2 class="text-2xl font-semibold text-brown-800 dark:text-brown-300 mb-4">
        Share Your Reaction!
    </h2>
    <div class="flex space-x-4">
        <button class="flex flex-col items-center bg-brown-300 dark:bg-brown-700 hover:bg-brown-400 dark:hover:bg-brown-600 text-white rounded-lg shadow-md p-2 transition duration-300">
            <img src="https://picsum.photos/id/1005/50/50" alt="Like" class="mb-1 rounded-full" />
            <span>👍 Like</span>
        </button>

        <button class="flex flex-col items-center bg-brown-300 dark:bg-brown-700 hover:bg-brown-400 dark:hover:bg-brown-600 text-white rounded-lg shadow-md p-2 transition duration-300">
            <img src="https://picsum.photos/id/1006/50/50" alt="Love" class="mb-1 rounded-full" />
            <span>❤️ Love</span>
        </button>

        <button class="flex flex-col items-center bg-brown-300 dark:bg-brown-700 hover:bg-brown-400 dark:hover:bg-brown-600 text-white rounded-lg shadow-md p-2 transition duration-300">
            <img src="https://picsum.photos/id/1007/50/50" alt="Haha" class="mb-1 rounded-full" />
            <span>😂 Haha</span>
        </button>

        <button class="flex flex-col items-center bg-brown-300 dark:bg-brown-700 hover:bg-brown-400 dark:hover:bg-brown-600 text-white rounded-lg shadow-md p-2 transition duration-300">
            <img src="https://picsum.photos/id/1008/50/50" alt="Wow" class="mb-1 rounded-full" />
            <span>😮 Wow</span>
        </button>

        <button class="flex flex-col items-center bg-brown-300 dark:bg-brown-700 hover:bg-brown-400 dark:hover:bg-brown-600 text-white rounded-lg shadow-md p-2 transition duration-300">
            <img src="https://picsum.photos/id/1009/50/50" alt="Sad" class="mb-1 rounded-full" />
            <span>😢 Sad</span>
        </button>

        <button class="flex flex-col items-center bg-brown-300 dark:bg-brown-700 hover:bg-brown-400 dark:hover:bg-brown-600 text-white rounded-lg shadow-md p-2 transition duration-300">
            <img src="https://picsum.photos/id/1010/50/50" alt="Angry" class="mb-1 rounded-full" />
            <span>😠 Angry</span>
        </button>
    </div>
</div>

Composants associés

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.

Ouvrir

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.

Ouvrir

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.

Ouvrir