Composant Badges
Composant Badges avec prise en charge du thème sombre réactif pour le commerce électronique.
HTML Code
<div class="flex justify-center items-center h-screen bg-gray-800 dark:bg-gray-900">
<div class="flex flex-wrap gap-2 p-4 rounded-lg bg-gray-700 dark:bg-gray-800">
<span class="px-3 py-1 text-sm font-semibold text-amber-100 bg-amber-600 rounded-full dark:bg-amber-700 dark:text-amber-200">New Arrival</span>
<span class="px-3 py-1 text-sm font-semibold text-teal-100 bg-teal-600 rounded-full dark:bg-teal-700 dark:text-teal-200">Top Rated</span>
<span class="px-3 py-1 text-sm font-semibold text-fuchsia-100 bg-fuchsia-600 rounded-full dark:bg-fuchsia-700 dark:text-fuchsia-200">Limited Stock</span>
<span class="px-3 py-1 text-sm font-semibold text-orange-100 bg-orange-600 rounded-full dark:bg-orange-700 dark:text-orange-200">On Sale</span>
<span class="px-3 py-1 text-sm font-semibold text-rose-100 bg-rose-600 rounded-full dark:bg-rose-700 dark:text-rose-200">Bestseller</span>
</div>
</div>Composants associés
Insignes Skeuomorphes
Un ensemble de badges avec un design skeuomorphe, une palette de couleurs complémentaire et une mise en page simple, adapté à un blog ou à un site de contenu. Réactif avec prise en charge du mode sombre.
Composant Badges
Un composant de badges neumorphique conçu pour la consommation de contenu de blog avec des éléments interactifs et un design réactif prenant en charge le mode sombre.
Insignes Composante 48
Un composant de badges conçu selon les principes de Material Design, avec des mises en page réactives et une prise en charge du thème sombre à l’aide de Tailwind CSS.