Composant Like/Reaction Buttons
Composant codé en HTML avec Tailwind CSS, avec un design brutal, une palette de couleurs Earth tones et une complexité modérée, adapté au commerce électronique. Comprend la conception réactive et la prise en charge du mode sombre.
HTML Code
<div class="flex flex-col items-center p-4 bg-stone-200 dark:bg-stone-800 font-mono">
<!-- Like Button -->
<button class="flex items-center justify-center px-6 py-3 mb-4 text-lg font-bold text-stone-900 uppercase bg-stone-400 border-t-4 border-l-4 border-b-0 border-r-0 border-stone-900 dark:text-stone-100 dark:bg-stone-700 dark:border-stone-100">
<svg class="w-6 h-6 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 10h4v6m0 0l-4 4m4-4L8 4m7 10l-2 2m0 0l-2-2m2 2l2 2"></path></svg>
Like (120)
</button>
<!-- Reactions -->
<div class="flex space-x-4">
<button class="p-3 text-xl bg-stone-500 border-t-2 border-l-2 border-b-0 border-r-0 border-stone-900 dark:bg-stone-600 dark:border-stone-100">👍 50</button>
<button class="p-3 text-xl bg-stone-500 border-t-2 border-l-2 border-b-0 border-r-0 border-stone-900 dark:bg-stone-600 dark:border-stone-100">😂 30</button>
<button class="p-3 text-xl bg-stone-500 border-t-2 border-l-2 border-b-0 border-r-0 border-stone-900 dark:bg-stone-600 dark:border-stone-100">😢 10</button>
<button class="p-3 text-xl bg-stone-500 border-t-2 border-l-2 border-b-0 border-r-0 border-stone-900 dark:bg-stone-600 dark:border-stone-100">😍 25</button>
</div>
</div>Composants associés
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.
Composant Like/Reaction Buttons
Un composant Web comportant des boutons J’aime et Réaction avec des micro-interactions et la prise en charge du thème sombre à l’aide de Tailwind CSS.
Composant Art Déco Like/Reaction Buttons
Un ensemble simple et réactif de boutons J’aime/réaction avec une esthétique Art Déco, adapté aux applications sportives/fitness. Dispose de neutres chauds et d’une prise en charge du mode sombre.