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
DegradadoSepiaBadges
Un componente de insignia sensible específico para música/audio con transiciones de degradado sepia/marrón, adecuado para mostrar géneros, estados de ánimo o categorías de artistas. Incluye soporte para modo oscuro.
OrgánicoNaturalezaInspiradoInsignias
Un componente de insignias de complejidad moderada con líneas fluidas inspiradas en la naturaleza y una combinación de colores triádica, adecuada para un portafolio para exhibir trabajos o productos. Incluye capacidad de respuesta y soporte para el modo oscuro.
Componente de insignias
Un componente de insignias versátil diseñado para sitios web comerciales / corporativos, que utiliza tonos tierra en una interfaz de usuario de modo oscuro para mejorar la experiencia del usuario. El componente presenta capacidad de respuesta con algunos elementos interactivos.