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 receptivo diseñado con estilo Glassmorphism, con elementos translúcidos similares al vidrio esmerilado y efectos de desenfoque, con soporte para el modo oscuro.
Componente de insignias
Un componente simple de insignias de estilo Glassmorphism para redes sociales, con efectos de vidrio esmerilado con desenfoque, colores análogos y soporte de modo oscuro usando Tailwind CSS. Es responsivo y usa picsum.photos para imágenes y randomuser.me para avatares cuando sea necesario. No se incluye JavaScript.
Healthcare_Badges_Component_Bauhaus
Un componente de insignias de temática sanitaria con un diseño inspirado en la Bauhaus, utilizando tonos cálidos/atardeceres. Presenta formas geométricas y un diseño funcional, adecuado para mostrar el estado o las categorías en aplicaciones médicas. Responsivo con soporte para modo oscuro.