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.
Código HTML
<div class="p-8 bg-gray-100 dark:bg-gray-900 min-h-screen">
<div class="max-w-4xl mx-auto">
<h1 class="text-4xl font-bold text-gray-800 dark:text-gray-200 mb-8 text-center">Featured Badges</h1>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Badge 1: New Post -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-all duration-300 hover:shadow-xl relative">
<div class="p-6">
<span class="inline-block bg-black text-white text-xs font-bold px-3 py-1 rounded-full mb-4">
NEW POST
</span>
<h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-2">The Golden Age of Pixels</h2>
<p class="text-gray-600 dark:text-gray-400 text-sm mb-4">Explore how pixel art defined an era and continues to inspire.</p>
<div class="flex items-center text-gray-500 dark:text-gray-400 text-xs">
<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>
<span>2 days ago</span>
</div>
</div>
<div class="absolute top-0 right-0 -mr-2 -mt-2 w-16 h-16 bg-gray-300 dark:bg-gray-700 rounded-full flex items-center justify-center transform rotate-12">
<span class="text-xs font-bold text-gray-700 dark:text-gray-300">RETRO</span>
</div>
</div>
<!-- Badge 2: Editor's Pick -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-all duration-300 hover:shadow-xl relative">
<div class="p-6">
<span class="inline-block bg-gray-700 text-white text-xs font-bold px-3 py-1 rounded-full mb-4">
EDITOR'S PICK
</span>
<h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-2">Vintage Tech Revival</h2>
<p class="text-gray-600 dark:text-gray-400 text-sm mb-4">Diving deep into the resurgence of classic gadgets.</p>
<div class="flex items-center text-gray-500 dark:text-gray-400 text-xs">
<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>
<span>1 week ago</span>
</div>
</div>
<div class="absolute top-0 right-0 -mr-2 -mt-2 w-16 h-16 bg-gray-300 dark:bg-gray-700 rounded-full flex items-center justify-center transform -rotate-12">
<span class="text-xs font-bold text-gray-700 dark:text-gray-300">CLASSIC</span>
</div>
</div>
<!-- Badge 3: Trending Topic -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-all duration-300 hover:shadow-xl relative">
<div class="p-6">
<span class="inline-block bg-gray-500 text-white text-xs font-bold px-3 py-1 rounded-full mb-4">
TRENDING
</span>
<h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-2">The Future is Analog</h2>
<p class="text-gray-600 dark:text-gray-400 text-sm mb-4">Why analog experiences are making a comeback in a digital world.</p>
<div class="flex items-center text-gray-500 dark:text-gray-400 text-xs">
<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>
<span>3 days ago</span>
</div>
</div>
<div class="absolute top-0 right-0 -mr-2 -mt-2 w-16 h-16 bg-gray-300 dark:bg-gray-700 rounded-full flex items-center justify-center transform rotate-6">
<span class="text-xs font-bold text-gray-700 dark:text-gray-300">POPULAR</span>
</div>
</div>
<!-- Badge 4: Deep Dive -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-all duration-300 hover:shadow-xl relative">
<div class="p-6">
<span class="inline-block bg-blue-700 text-white text-xs font-bold px-3 py-1 rounded-full mb-4">
DEEP DIVE
</span>
<h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-2">Lost Media Found</h2>
<p class="text-gray-600 dark:text-gray-400 text-sm mb-4">Uncovering the mysteries of media long thought to be gone forever.</p>
<div class="flex items-center text-gray-500 dark:text-gray-400 text-xs">
<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>
<span>1 month ago</span>
</div>
</div>
<div class="absolute top-0 right-0 -mr-2 -mt-2 w-16 h-16 bg-gray-300 dark:bg-gray-700 rounded-full flex items-center justify-center transform -rotate-8">
<span class="text-xs font-bold text-gray-700 dark:text-gray-300">ARCHIVE</span>
</div>
</div>
<!-- Badge 5: Community Spotlight -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-all duration-300 hover:shadow-xl relative">
<div class="p-6">
<span class="inline-block bg-purple-700 text-white text-xs font-bold px-3 py-1 rounded-full mb-4">
COMMUNITY
</span>
<h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-2">Our Favorite Fan Theories</h2>
<p class="text-gray-600 dark:text-gray-400 text-sm mb-4">Exploring the most imaginative theories from our dedicated readers.</p>
<div class="flex items-center text-gray-500 dark:text-gray-400 text-xs">
<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>
<span>2 weeks ago</span>
</div>
</div>
<div class="absolute top-0 right-0 -mr-2 -mt-2 w-16 h-16 bg-gray-300 dark:bg-gray-700 rounded-full flex items-center justify-center transform rotate-15">
<span class="text-xs font-bold text-gray-700 dark:text-gray-300">FAN</span>
</div>
</div>
<!-- Badge 6: Retrospective -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-all duration-300 hover:shadow-xl relative">
<div class="p-6">
<span class="inline-block bg-red-700 text-white text-xs font-bold px-3 py-1 rounded-full mb-4">
RETROSPECTIVE
</span>
<h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-2">Gaming Consoles: A Look Back</h2>
<p class="text-gray-600 dark:text-gray-400 text-sm mb-4">Tracing the evolution of gaming from 8-bit to beyond.</p>
<div class="flex items-center text-gray-500 dark:text-gray-400 text-xs">
<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>
<span>3 weeks ago</span>
</div>
</div>
<div class="absolute top-0 right-0 -mr-2 -mt-2 w-16 h-16 bg-gray-300 dark:bg-gray-700 rounded-full flex items-center justify-center transform -rotate-9">
<span class="text-xs font-bold text-gray-700 dark:text-gray-300">OLD</span>
</div>
</div>
</div>
</div>
</div>Componentes relacionados
Componente de insignias de microinteracciones
Un componente de insignias complejo y receptivo con colores pastel, diseñado para consultoría/servicios, con microinteracciones de desplazamiento y soporte de modo oscuro. Cada insignia se expande ligeramente al pasar el cursor para revelar más contexto.
Componente de insignias neumórficas
Una colección de insignias interactivas diseñadas en un estilo neumórfico suave, adecuadas para aplicaciones de tecnología/SaaS. Cuenta con colores neutros fríos, compatibilidad con modo oscuro y capacidad de respuesta.
Componente de insignias
Un componente de insignias con estilo Neumorphism para blogs con un esquema de color análogo y una interfaz enriquecida.