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 de badges réactifs avec le style Material Design, la prise en charge du thème sombre et la palette de couleurs Earth Tones pour le contenu du blog.
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 réactif avec un design 3D, avec une prise en charge de la profondeur et du thème sombre. Chaque badge représente un utilisateur avec un nom, une image et une description, conçus à l’aide de Tailwind CSS.