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
Un componente de insignias responsivas con estilo Material Design, soporte de tema oscuro y combinación de colores de tonos tierra para el contenido del blog.
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 responsivo con microinteracciones atractivas, diseñado con Tailwind CSS. Admite el modo oscuro e incluye marcadores de posición de imagen.