Componente de insignias - Panel de control análogo 3D
Un componente de insignias receptivo con diseño 3D, combinación de colores análoga, complejidad moderada y soporte de temas oscuros para paneles. Solo utiliza clases CSS de Tailwind.
Código HTML
<div class="flex flex-wrap gap-2 p-4 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-lg">
<!-- Badge 1 -->
<span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-gradient-to-br from-teal-400 to-teal-600 text-white shadow-md dark:from-teal-600 dark:to-teal-800">
<svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
Completed
</span>
<!-- Badge 2 -->
<span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-gradient-to-br from-red-400 to-red-600 text-white shadow-md dark:from-red-600 dark:to-red-800">
<svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
Failed
</span>
<!-- Badge 3 -->
<span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-gradient-to-br from-yellow-400 to-yellow-600 text-white shadow-md dark:from-yellow-600 dark:to-yellow-800">
<svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
Pending
</span>
<!-- Badge 4 - Example with icon and no text -->
<span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-gradient-to-br from-blue-400 to-blue-600 text-white shadow-md dark:from-blue-600 dark:to-blue-800">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path></svg>
</span>
</div>Componentes relacionados
Componente de insignias - Modo oscuro Tonos tierra
Un complejo sistema de componentes de insignias diseñado con tonos tierra para una interfaz de blog/contenido en modo oscuro. El componente incluye varios tipos de insignias para categorías de artículos, estado de usuario, etiquetas de contenido, notificaciones e indicadores de logro. Todo ello utilizando colores naturales en tono tierra con soporte para el modo oscuro. El diseño es totalmente responsivo y se adapta a diferentes tamaños de pantalla.
Componente de insignias
Un componente de insignias de temática retro con un esquema de color en escala de grises, adecuado para un blog o un sitio de contenido. Cuenta con múltiples elementos interactivos y una capacidad de respuesta completa, con soporte para modo oscuro. El diseño evita JavaScript, confiando únicamente en HTML y Tailwind CSS.
Componente de insignias
Un componente de insignias receptivo diseñado para interfaces de redes sociales, con microinteracciones atractivas y un esquema de color complementario, compatible con el modo oscuro.