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 diseñado con microinteracciones, con un esquema de color complementario y compatibilidad con temas oscuros. Ideal para sitios web empresariales y corporativos, este componente incluye animaciones atractivas que responden a las acciones del usuario. Las señales visuales mencionadas anteriormente, como los efectos de desplazamiento, mejoran la experiencia del usuario.
Componente de insignias
Un componente de insignias simple y receptivo diseñado con una estética 3D y un esquema de color complementario para el blog y el consumo de contenido. Soporta el modo oscuro.
Componente de insignias de productos de comercio electrónico
Un componente complejo de insignias de productos de comercio electrónico con un uso intensivo de degradados de color de una paleta de bosque / verde, transiciones suaves y un diseño receptivo con soporte para modo oscuro. Adecuado para mostrar el estado del producto, ofertas o categorías.