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.
HTML Code
<div class="flex flex-wrap p-4 bg-gray-100 dark:bg-gray-800 rounded-lg">
<div class="flex items-center m-2">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-brown-600" />
<span class="ml-2 text-brown-600 dark:text-brown-400 font-semibold">Design Team</span>
<span class="ml-2 px-2 py-1 text-sm text-white bg-brown-600 rounded-full">3</span>
</div>
<div class="flex items-center m-2">
<img src="https://picsum.photos/id/1018/100/100" alt="Project Image" class="w-10 h-10 rounded-full border-2 border-brown-600" />
<span class="ml-2 text-brown-600 dark:text-brown-400 font-semibold">Project A</span>
<span class="ml-2 px-2 py-1 text-sm text-white bg-brown-600 rounded-full">5</span>
</div>
<div class="flex items-center m-2">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-green-600" />
<span class="ml-2 text-green-600 dark:text-green-400 font-semibold">Marketing</span>
<span class="ml-2 px-2 py-1 text-sm text-white bg-green-600 rounded-full">8</span>
</div>
<div class="flex items-center m-2">
<img src="https://picsum.photos/id/1031/100/100" alt="Project Image" class="w-10 h-10 rounded-full border-2 border-red-600" />
<span class="ml-2 text-red-600 dark:text-red-400 font-semibold">Project B</span>
<span class="ml-2 px-2 py-1 text-sm text-white bg-red-600 rounded-full">2</span>
</div>
</div>Composants associés
Composant Badges
Un composant simple de badges de style Glassmorphism pour les réseaux sociaux, avec des effets de verre dépoli avec du flou, des couleurs analogues et la prise en charge du mode sombre à l’aide de Tailwind CSS. Il est réactif et utilise picsum.photos pour les images et randomuser.me pour les avatars si nécessaire. Aucun JavaScript n’est inclus.
Composant Badges de produits e-commerce
Il s’agit d’un composant complexe de badges de produits e-commerce avec une utilisation intensive de dégradés de couleurs d’une palette forêt/vert, des transitions fluides et un design réactif avec prise en charge du mode sombre. Convient pour présenter l’état des produits, les offres ou les catégories.
Industrial_Candy_Finance_Badges_Component
Un composant complexe de badges pour la finance/banque, mélangeant l’esthétique industrielle avec des couleurs vives de bonbon. Dispose de plusieurs badges interactifs, d’un design réactif et d’une prise en charge du mode sombre.