Componente Badge
Un componente minimalista per badge per cruscotti, con toni della terra e supporto per la modalità scura.
Codice HTML
<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>Componenti correlati
Componente Badge
Un componente di badge neumorfici con una combinazione di colori analoga per un sito Web di blog/contenuti. Presenta un design reattivo e il supporto per i temi scuri, utilizzando solo HTML e Tailwind CSS.
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.