Composant Badges
Un composant de badge en mode sombre réactif pour le commerce électronique, présentant divers badges avec des schémas de couleurs complémentaires et des éléments interactifs.
HTML Code
<div class="bg-gray-900 min-h-screen p-8">
<div class="max-w-7xl mx-auto">
<h2 class="text-3xl font-extrabold text-white mb-8">Product Badges</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Badge 1: New Arrival (Complementary - Orange/Blue) -->
<div class="bg-gray-800 rounded-lg shadow-lg p-6 relative">
<span class="absolute top-0 right-0 -mr-4 -mt-4 bg-orange-500 text-white text-xs font-bold px-3 py-1 rounded-full rotate-12">NEW ARRIVAL</span>
<img src="https://picsum.photos/400/300?random=1" alt="Product Image" class="w-full h-48 object-cover rounded-md mb-4">
<h3 class="text-xl font-semibold text-white mb-2">Stylish Headphones</h3>
<p class="text-gray-400 text-sm mb-4">Experience immersive audio with these brand new headphones.</p>
<div class="flex flex-wrap gap-2">
<span class="bg-blue-600 text-white text-xs px-3 py-1 rounded-full">Audio</span>
<span class="bg-blue-600 text-white text-xs px-3 py-1 rounded-full">Electronics</span>
</div>
<div class="flex items-center justify-between mt-4">
<span class="text-white text-lg font-bold">$199.99</span>
<button class="bg-orange-500 hover:bg-orange-600 text-white px-4 py-2 rounded-md transition duration-300">Add to Cart</button>
</div>
</div>
<!-- Badge 2: Best Seller (Complementary - Green/Red) -->
<div class="bg-gray-800 rounded-lg shadow-lg p-6 relative">
<span class="absolute top-0 right-0 -mr-4 -mt-4 bg-red-600 text-white text-xs font-bold px-3 py-1 rounded-full rotate-12">BEST SELLER</span>
<img src="https://picsum.photos/400/300?random=2" alt="Product Image" class="w-full h-48 object-cover rounded-md mb-4">
<h3 class="text-xl font-semibold text-white mb-2">Ergonomic Office Chair</h3>
<p class="text-gray-400 text-sm mb-4">Work in comfort with our most popular ergonomic chair.</p>
<div class="flex flex-wrap gap-2">
<span class="bg-green-600 text-white text-xs px-3 py-1 rounded-full">Office</span>
<span class="bg-green-600 text-white text-xs px-3 py-1 rounded-full">Furniture</span>
</div>
<div class="flex items-center justify-between mt-4">
<span class="text-white text-lg font-bold">$349.00</span>
<button class="bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded-md transition duration-300">View Details</button>
</div>
</div>
<!-- Badge 3: Limited Stock (Complementary - Purple/Yellow) -->
<div class="bg-gray-800 rounded-lg shadow-lg p-6 relative">
<span class="absolute top-0 right-0 -mr-4 -mt-4 bg-yellow-500 text-gray-900 text-xs font-bold px-3 py-1 rounded-full rotate-12">LIMITED STOCK</span>
<img src="https://picsum.photos/400/300?random=3" alt="Product Image" class="w-full h-48 object-cover rounded-md mb-4">
<h3 class="text-xl font-semibold text-white mb-2">Vintage Camera Lens</h3>
<p class="text-gray-400 text-sm mb-4">Capture stunning photos with this rare vintage lens.</p>
<div class="flex flex-wrap gap-2">
<span class="bg-purple-600 text-white text-xs px-3 py-1 rounded-full">Photography</span>
<span class="bg-purple-600 text-white text-xs px-3 py-1 rounded-full">Collector's Item</span>
</div>
<div class="flex items-center justify-between mt-4">
<span class="text-white text-lg font-bold">$599.99</span>
<button class="bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-md transition duration-300">Buy Now</button>
</div>
</div>
<!-- Badge 4: Special Offer (Complementary - Cyan/Magenta) -->
<div class="bg-gray-800 rounded-lg shadow-lg p-6 relative">
<span class="absolute top-0 right-0 -mr-4 -mt-4 bg-fuchsia-500 text-white text-xs font-bold px-3 py-1 rounded-full rotate-12">SPECIAL OFFER</span>
<img src="https://picsum.photos/400/300?random=4" alt="Product Image" class="w-full h-48 object-cover rounded-md mb-4">
<h3 class="text-xl font-semibold text-white mb-2">Smart Home Hub</h3>
<p class="text-gray-400 text-sm mb-4">Control your entire home with this intelligent hub.</p>
<div class="flex flex-wrap gap-2">
<span class="bg-cyan-600 text-white text-xs px-3 py-1 rounded-full">Smart Home</span>
<span class="bg-cyan-600 text-white text-xs px-3 py-1 rounded-full">Automation</span>
</div>
<div class="flex items-center justify-between mt-4">
<span class="text-white text-lg font-bold line-through">$129.99</span>
<span class="text-green-400 text-xl font-bold">$99.99</span>
<button class="bg-fuchsia-500 hover:bg-fuchsia-600 text-white px-4 py-2 rounded-md transition duration-300">Shop Offer</button>
</div>
</div>
<!-- Badge 5: Customer Favorite (Complementary - Lime/Indigo) -->
<div class="bg-gray-800 rounded-lg shadow-lg p-6 relative">
<span class="absolute top-0 right-0 -mr-4 -mt-4 bg-indigo-500 text-white text-xs font-bold px-3 py-1 rounded-full rotate-12">CUSTOMER FAVORITE</span>
<img src="https://picsum.photos/400/300?random=5" alt="Product Image" class="w-full h-48 object-cover rounded-md mb-4">
<h3 class="text-xl font-semibold text-white mb-2">Premium Coffee Beans</h3>
<p class="text-gray-400 text-sm mb-4">Our most loved coffee blend, perfect for your morning brew.</p>
<div class="flex flex-wrap gap-2">
<span class="bg-lime-600 text-white text-xs px-3 py-1 rounded-full">Food & Drink</span>
<span class="bg-lime-600 text-white text-xs px-3 py-1 rounded-full">Coffee</span>
</div>
<div class="flex items-center justify-between mt-4">
<span class="text-white text-lg font-bold">$24.50</span>
<button class="bg-indigo-500 hover:bg-indigo-600 text-white px-4 py-2 rounded-md transition duration-300">Order Now</button>
</div>
</div>
<!-- Badge 6: Eco-Friendly (Complementary - Teal/Pink) -->
<div class="bg-gray-800 rounded-lg shadow-lg p-6 relative">
<span class="absolute top-0 right-0 -mr-4 -mt-4 bg-pink-500 text-white text-xs font-bold px-3 py-1 rounded-full rotate-12">ECO-FRIENDLY</span>
<img src="https://picsum.photos/400/300?random=6" alt="Product Image" class="w-full h-48 object-cover rounded-md mb-4">
<h3 class="text-xl font-semibold text-white mb-2">Reusable Shopping Bag</h3>
<p class="text-gray-400 text-sm mb-4">Reduce your carbon footprint with this stylish reusable bag.</p>
<div class="flex flex-wrap gap-2">
<span class="bg-teal-600 text-white text-xs px-3 py-1 rounded-full">Sustainable</span>
<span class="bg-teal-600 text-white text-xs px-3 py-1 rounded-full">Home Goods</span>
</div>
<div class="flex items-center justify-between mt-4">
<span class="text-white text-lg font-bold">$12.00</span>
<button class="bg-pink-500 hover:bg-pink-600 text-white px-4 py-2 rounded-md transition duration-300">Learn More</button>
</div>
</div>
</div>
</div>
</div>Composants associés
Composant Badges
Un composant de badges réactifs avec le style Material Design, la prise en charge du thème sombre et la palette de couleurs Earth Tones pour le contenu du blog.
Composant Badges - Mode sombre Tons de terre
Un système complexe de composants de badges conçu avec des tons de terre pour une interface de blog/contenu en mode sombre. Le composant comprend différents types de badges pour les catégories d’articles, le statut de l’utilisateur, les balises de contenu, les notifications et les indicateurs de réussite. Le tout en utilisant des couleurs naturelles de couleur terre avec prise en charge du mode sombre. Le design est entièrement réactif et s’adapte aux différentes tailles d’écran.
OrganicNatureInspiredBadges
Un composant de badges de complexité modérée avec des lignes fluides inspirées de la nature et une palette de couleurs triadique, adapté à un portfolio pour présenter des travaux ou des produits. Il inclut la réactivité et la prise en charge du mode sombre.