Insignias pastel Interfaz de usuario de modo oscuro
Un componente de insignias simple y receptivo para sitios web comerciales, con una interfaz de usuario de modo oscuro con colores pastel. Diseñado con Tailwind CSS, utiliza un fondo oscuro para reducir la fatiga visual y admite un diseño responsivo.
Código HTML
<div class="flex flex-wrap gap-2 p-4 bg-gray-100 dark:bg-gray-900">
<span class="px-3 py-1 text-sm font-medium text-purple-800 bg-purple-200 rounded-full dark:bg-purple-700 dark:text-purple-100">
Business
</span>
<span class="px-3 py-1 text-sm font-medium text-green-800 bg-green-200 rounded-full dark:bg-green-700 dark:text-green-100">
Corporate
</span>
<span class="px-3 py-1 text-sm font-medium text-blue-800 bg-blue-200 rounded-full dark:bg-blue-700 dark:text-blue-100">
Innovation
</span>
<span class="px-3 py-1 text-sm font-medium text-pink-800 bg-pink-200 rounded-full dark:bg-pink-700 dark:text-pink-100">
Strategy
</span>
<span class="px-3 py-1 text-sm font-medium text-yellow-800 bg-yellow-200 rounded-full dark:bg-yellow-700 dark:text-yellow-100">
Growth
</span>
</div>Componentes relacionados
Insignias skeuomórficas
Un conjunto de insignias con un diseño esqueuomórfico, una combinación de colores complementaria y un diseño simple, adecuado para un blog o un sitio de contenido. Responsivo con soporte para modo oscuro.
Componente de insignias
Un componente de insignias responsivo diseñado con un estilo 3D utilizando tonos Tierra, con elementos interactivos adecuados para un tablero.
Componente de insignias
Un componente de insignias minimalista para tableros, con tonos tierra y soporte para modo oscuro.