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 web complexe caractérisé par un morphisme en verre avec des éléments translucides et des effets de flou. Il comprend plusieurs éléments interactifs conçus pour les sites Web d’entreprise, prenant en charge le mode sombre.
Glassmorphism like/reaction buttons composant
Glassmorphism like/reaction buttons composant pour portfolio - simple, réactif, thème sombre
Composant Like/Reaction Buttons
Un composant Like/Reaction Buttons de style Glassmorphism avec des effets réactifs et la prise en charge du mode sombre à l’aide de Tailwind CSS.