Componente de insignias
Componente de insignias: diseño minimalista / plano con efectos responsivos y soporte para temas oscuros. Sin JavaScript, HTML y CSS puros con Tailwind.
Código HTML
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200"> Badge </span>
<span class="inline-flex items-center px-3 py-0.5 rounded-full text-sm font-medium bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200"> Large Badge </span>
<span class="inline-flex items-center px-2.5 py-0.5 rounded-md text-sm font-medium bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200"> Rounded Badge </span>
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200">
<svg class="-ml-0.5 mr-1.5 h-2 w-2 text-yellow-400" fill="currentColor" viewBox="0 0 8 8">
<circle cx="4" cy="4" r="3" />
</svg>
Dot Badge
</span>
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-pink-100 text-pink-800 dark:bg-pink-900 dark:text-pink-200">
<svg class="-ml-0.5 mr-1.5 h-2 w-2 text-pink-400" fill="currentColor" viewBox="0 0 8 8">
<circle cx="4" cy="4" r="3" />
</svg>
Dot Badge with long text that should wrap or truncate
</span>Componentes relacionados
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.
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 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.