Componente Badge
Componente Badge con supporto per temi scuri reattivi per l'e-commerce.
Codice HTML
<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>Componenti correlati
Componente Badge
Un versatile componente Badge progettato per siti Web aziendali/aziendali, che utilizza i toni della Terra in un'interfaccia utente in modalità scura per migliorare l'esperienza dell'utente. Il componente è caratterizzato da reattività con alcuni elementi interattivi.
Componente Badge
Un componente Badge reattivo progettato con lo stile Glassmorphism, con elementi traslucidi simili al vetro smerigliato ed effetti di sfocatura, con supporto per la modalità oscura.
Componente Badge
Un componente Badge reattivo progettato con microinterazioni, con una combinazione di colori complementari e il supporto del tema scuro. Ideale per siti web aziendali e aziendali, questo componente include animazioni coinvolgenti che rispondono alle azioni dell'utente. I segnali visivi menzionati in precedenza, come gli effetti al passaggio del mouse, migliorano l'esperienza dell'utente.