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
Distintivi di Neumorfismo
Questo è un componente Badge in stile Neumorfismo con una combinazione di colori pastello, progettato per un Portfolio e utilizzando 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.
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.