Componente de insignias
Componente de insignias elegante y receptivo para documentación o sitios wiki, con un esquema de color en tonos tierra, tipografía de lujo y soporte completo para el modo oscuro.
Código HTML
<div class="font-sans antialiased bg-stone-50 text-stone-800 dark:bg-stone-900 dark:text-stone-200 p-4 sm:p-6 lg:p-8 flex items-center justify-center min-h-screen">
<div class="w-full max-w-sm md:max-w-xl lg:max-w-2xl bg-white dark:bg-stone-800 rounded-xl shadow-lg p-6 sm:p-8 border border-stone-200 dark:border-stone-700">
<h2 class="text-2xl sm:text-3xl font-serif font-semibold mb-6 text-stone-900 dark:text-stone-100 border-b pb-4 border-stone-200 dark:border-stone-700">
Documentation Status Badges
</h2>
<div class="flex flex-wrap gap-3 mb-6">
<span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-green-100 text-green-800 dark:bg-green-700 dark:text-green-50">
<svg class="-ml-0.5 mr-1.5 h-4 w-4" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
</svg>
Approved
</span>
<span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-amber-100 text-amber-800 dark:bg-amber-700 dark:text-amber-50">
<svg class="-ml-0.5 mr-1.5 h-4 w-4" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
<path fill-rule="evenodd" d="M8.257 3.099c.765-1.542 2.705-1.542 3.47 0L12 6.75A2.25 2.25 0 0110 9a2.25 2.25 0 01-2-2.25L8.257 3.099zM7.5 10.5a.75.75 0 000 1.5h5a.75.75 0 000-1.5h-5z" clip-rule="evenodd" />
</svg>
Pending Review
</span>
<span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-red-100 text-red-800 dark:bg-red-700 dark:text-red-50">
<svg class="-ml-0.5 mr-1.5 h-4 w-4" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd" />
</svg>
Needs Revision
</span>
<span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-stone-100 text-stone-800 dark:bg-stone-700 dark:text-stone-50">
Draft
</span>
</div>
<h3 class="text-xl sm:text-2xl font-serif font-semibold mb-4 text-stone-900 dark:text-stone-100 border-b pb-3 border-stone-200 dark:border-stone-700">
Content Tags
</h3>
<div class="flex flex-wrap gap-2">
<span class="inline-flex items-center px-2.5 py-0.5 rounded-md text-sm font-medium bg-stone-200 text-stone-800 dark:bg-stone-600 dark:text-stone-100">
API Reference
</span>
<span class="inline-flex items-center px-2.5 py-0.5 rounded-md text-sm font-medium bg-stone-200 text-stone-800 dark:bg-stone-600 dark:text-stone-100">
Getting Started
</span>
<span class="inline-flex items-center px-2.5 py-0.5 rounded-md text-sm font-medium bg-stone-200 text-stone-800 dark:bg-stone-600 dark:text-stone-100">
Troubleshooting
</span>
<span class="inline-flex items-center px-2.5 py-0.5 rounded-md text-sm font-medium bg-stone-200 text-stone-800 dark:bg-stone-600 dark:text-stone-100">
Best Practices
</span>
<span class="inline-flex items-center px-2.5 py-0.5 rounded-md text-sm font-medium bg-stone-200 text-stone-800 dark:bg-stone-600 dark:text-stone-100">
Security
</span>
</div>
</div>
</div>Componentes relacionados
Componente de insignias
Un componente de insignias responsivo con un diseño 3D, con profundidad y soporte para temas oscuros. Cada insignia representa a un usuario con un nombre, una imagen y una descripción, diseñados con Tailwind CSS.
Industrial_Candy_Finance_Badges_Component
Un componente de insignias complejo para finanzas/banca, que combina la estética industrial con colores dulces brillantes. Cuenta con múltiples insignias interactivas, diseño receptivo y compatibilidad con el modo oscuro.
Componente de insignias
Un componente de insignias responsivo con microinteracciones y soporte para temas oscuros, diseñado con Tailwind CSS. Este componente incluye efectos de desplazamiento y utiliza imágenes de marcador de posición para avatares.