Badges-Komponente
Badges-Komponente mit responsiver Unterstützung für dunkles Design für E-Commerce.
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>Verwandte Komponenten
Glassmorphism_Grayscale_Badges_Component
Eine einfache, reaktionsschnelle Badges-Komponente im Glassmorphism-Stil mit einem Graustufen-Farbschema, geeignet für Geschäfts-/Unternehmenswebsites. Enthält Unterstützung für den Dunkelmodus.
Badges-Komponente
Eine einfache Badge-Komponente im Glassmorphism-Stil für soziale Medien mit Milchglaseffekten mit Unschärfe, analogen Farben und Unterstützung für den Dunkelmodus mit Tailwind CSS. Es ist reaktionsschnell und verwendet picsum.photos für Bilder und randomuser.me für Avatare, wo nötig. Es ist kein JavaScript enthalten.
OrganicNatureInspiredBadges
Eine Badges-Komponente mittlerer Komplexität mit von der Natur inspirierten fließenden Linien und einem triadischen Farbschema, das sich für ein Portfolio eignet, um Arbeiten oder Produkte zu präsentieren. Es bietet Unterstützung für Reaktionsfähigkeit und Dunkelmodus.