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
Composant de badges élégant et réactif pour la documentation ou les sites wiki, avec une palette de couleurs terre, une typographie de luxe et une prise en charge complète du mode sombre.
Composant Badges
Un composant de badges réactif avec un style Skeuomorphism, une palette de couleurs triadique et une complexité simple, conçu pour les portfolios avec prise en charge du thème sombre.
Composant Badges de produits e-commerce
Il s’agit d’un composant complexe de badges de produits e-commerce avec une utilisation intensive de dégradés de couleurs d’une palette forêt/vert, des transitions fluides et un design réactif avec prise en charge du mode sombre. Convient pour présenter l’état des produits, les offres ou les catégories.