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
Un composant de badges réactifs avec prise en charge des micro-interactions et des thèmes sombres, conçu à l’aide de Tailwind CSS. Ce composant inclut des effets de survol et utilise des images d’espace réservé pour les avatars.
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.
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.