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.
HTML Code
<div class="p-4 sm:p-6 lg:p-8 bg-gray-50 dark:bg-gray-900 min-h-screen font-sans">
<!-- Component Title (Optional) -->
<h2 class="text-2xl sm:text-3xl font-extrabold text-center mb-8 sm:mb-12 text-gray-900 dark:text-gray-100">
Featured Product Badges
</h2>
<div class="max-w-7xl mx-auto grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8">
<!-- Badge Card 1: New Arrival -->
<div class="relative bg-white dark:bg-gray-800 rounded-xl overflow-hidden shadow-lg hover:shadow-2xl transition-all duration-300 ease-in-out transform hover:-translate-y-1">
<img class="w-full h-48 sm:h-56 object-cover" src="https://picsum.photos/id/1018/600/400" alt="Forest Product">
<div class="absolute top-4 left-4">
<span class="px-4 py-2 rounded-full text-sm font-semibold text-white bg-gradient-to-r from-emerald-500 to-green-600 shadow-md transform hover:scale-105 transition-transform duration-200 ease-in-out">
🚀 New Arrival
</span>
</div>
<div class="p-6">
<h3 class="text-xl font-bold text-gray-900 dark:text-gray-100 mb-2">Organic Green Tea</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm mb-4">Premium hand-picked tea leaves from sustainable farms.</p>
<div class="flex justify-between items-center">
<span class="text-2xl font-extrabold text-emerald-600 dark:text-emerald-400">$19.99</span>
<button class="px-5 py-2 rounded-lg bg-gradient-to-r from-lime-500 to-emerald-500 text-white font-medium shadow-md hover:from-lime-600 hover:to-emerald-600 transform hover:scale-105 transition-all duration-300 ease-in-out">
Add to Cart
</button>
</div>
</div>
</div>
<!-- Badge Card 2: Limited Stock / Sale -->
<div class="relative bg-white dark:bg-gray-800 rounded-xl overflow-hidden shadow-lg hover:shadow-2xl transition-all duration-300 ease-in-out transform hover:-translate-y-1">
<img class="w-full h-48 sm:h-56 object-cover" src="https://picsum.photos/id/1020/600/400" alt="Nature Product">
<div class="absolute top-4 right-4">
<span class="px-4 py-2 rounded-full text-sm font-semibold text-white bg-gradient-to-r from-red-500 to-orange-500 shadow-md animate-pulse transform hover:scale-105 transition-transform duration-200 ease-in-out">
🔥 Limited Stock
</span>
</div>
<div class="absolute bottom-4 left-4">
<span class="px-3 py-1 rounded-full text-xs font-semibold text-white bg-gradient-to-tr from-purple-500 to-pink-500 shadow-sm">
Sale -20%
</span>
</div>
<div class="p-6 pt-10">
<h3 class="text-xl font-bold text-gray-900 dark:text-gray-100 mb-2">Bamboo Eco Toothbrush</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm mb-4">Sustainable alternative for your daily dental care.</p>
<div class="flex justify-between items-center">
<div>
<span class="text-lg font-semibold line-through text-gray-400 dark:text-gray-500 mr-2">$9.99</span>
<span class="text-2xl font-extrabold text-orange-600 dark:text-orange-400">$7.99</span>
</div>
<button class="px-5 py-2 rounded-lg bg-gradient-to-r from-emerald-600 to-teal-700 text-white font-medium shadow-md hover:from-emerald-700 hover:to-teal-800 transform hover:scale-105 transition-all duration-300 ease-in-out">
Buy Now
</button>
</div>
</div>
</div>
<!-- Badge Card 3: Bestseller / Eco-Friendly -->
<div class="relative bg-white dark:bg-gray-800 rounded-xl overflow-hidden shadow-lg hover:shadow-2xl transition-all duration-300 ease-in-out transform hover:-translate-y-1">
<img class="w-full h-48 sm:h-56 object-cover" src="https://picsum.photos/id/1025/600/400" alt="River Product">
<div class="absolute top-0 right-0 p-4">
<svg class="w-10 h-10 text-yellow-400 drop-shadow-lg" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72a1 1 0 01.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path>
</svg>
</div>
<div class="absolute top-4 left-4">
<span class="px-4 py-2 rounded-full text-sm font-semibold text-white bg-gradient-to-r from-blue-500 to-indigo-600 shadow-md transform hover:scale-105 transition-transform duration-200 ease-in-out">
🏆 Bestseller
</span>
</div>
<div class="absolute bottom-4 right-4">
<span class="px-3 py-1 rounded-full text-xs font-semibold text-white bg-gradient-to-tl from-green-400 to-blue-400 shadow-sm">
🌱 Eco-Friendly
</span>
</div>
<div class="p-6 pt-10">
<h3 class="text-xl font-bold text-gray-900 dark:text-gray-100 mb-2">Reusable Water Bottle</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm mb-4">Durable, insulated, and stylish for everyday hydration.</p>
<div class="flex justify-between items-center">
<span class="text-2xl font-extrabold text-indigo-600 dark:text-indigo-400">$29.50</span>
<button class="px-5 py-2 rounded-lg bg-gradient-to-r from-emerald-700 to-green-800 text-white font-medium shadow-md hover:from-emerald-800 hover:to-green-900 transform hover:scale-105 transition-all duration-300 ease-in-out">
View Details
</button>
</div>
</div>
</div>
</div>
</div>Composants associés
Composant Badges - Tableau de bord analogue 3D
Un composant de badges réactif avec une conception 3D, une palette de couleurs analogue, une complexité modérée et la prise en charge du thème sombre pour les tableaux de bord. Utilise uniquement les classes CSS Tailwind.
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 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.