Composant Badges
Un composant de badges à thème rétro avec une palette de couleurs en niveaux de gris, adapté à un blog ou à un site de contenu. Il comporte plusieurs éléments interactifs et une réactivité totale, avec prise en charge du mode sombre. La conception évite JavaScript, s’appuyant uniquement sur HTML et Tailwind CSS.
HTML Code
<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>Composants associés
Composant Badges
Un composant de badges réactifs conçu pour les interfaces de médias sociaux, avec des micro-interactions attrayantes et une palette de couleurs complémentaires, prenant en charge le mode sombre.
Composant Badges
Un composant de badges simple et réactif avec prise en charge du mode sombre, utilisant une palette de couleurs triadique adaptée à un portfolio.
Composant Badges
Un composant Badges réactif avec des micro-interactions attrayantes, conçu à l’aide de Tailwind CSS. Prend en charge le mode sombre et inclut des espaces réservés aux images.