Componente de insignias
Un componente de insignias minimalista para tableros, con tonos tierra y soporte para modo oscuro.
Código 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>Componentes relacionados
Insignias retro
Componente de insignias retro / vintage para sitios web comerciales / corporativos con combinación de colores complementaria. Diseño simple, diseño responsivo con soporte para temas oscuros. Sin JavaScript.
Componente de insignias
Un componente de insignias neumórficas con un esquema de color análogo para un sitio web de blog/contenido. Cuenta con un diseño responsivo y soporte para temas oscuros, utilizando solo HTML y Tailwind CSS.
Componente de insignias
Un conjunto de insignias inspiradas en Material Design para aplicaciones de tecnología/SaaS, con un esquema de color en blanco y negro con un color de acento, diseño receptivo y compatibilidad con modo oscuro.