Composant Badges

Composant Badges avec prise en charge du thème sombre réactif pour le commerce électronique.

Aperçu

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

Composant Badges neumorphes

Une collection de badges interactifs conçus dans un style neumorphique doux, adaptés aux applications technologiques/SaaS. Dispose de couleurs neutres froides, de la prise en charge du mode sombre et de la réactivité.

Ouvrir

DégradéSépiaBadges

Un composant de badge spécifique à la musique/à l’audio réactif avec des transitions dégradées sépia/marron, adapté à l’affichage de genres, d’ambiances ou de catégories d’artistes. Inclut la prise en charge du mode sombre.

Ouvrir

Composant Badges

Un composant de badges minimaliste pour les tableaux de bord, avec des tons de terre et la prise en charge du mode sombre.

Ouvrir