Fiche produit e-commerce pour l’agriculture
Un composant de fiche produit ludique et joyeux pour les sites e-commerce agricole, avec des éléments arrondis, des tons océan/bleu, un design réactif et une prise en charge du mode sombre.
HTML Code
<div class="p-4 md:p-8 bg-gradient-to-br from-blue-50 to-sky-100 dark:from-gray-800 dark:to-gray-950 min-h-screen flex items-center justify-center font-sans">
<div class="max-w-xs sm:max-w-sm md:max-w-md lg:max-w-lg mx-auto bg-white dark:bg-gray-850 rounded-3xl shadow-xl overflow-hidden transform transition-all duration-300 hover:scale-[1.02] border-4 border-blue-200 dark:border-blue-800">
<div class="relative">
<img class="w-full h-48 sm:h-56 md:h-64 object-cover object-center rounded-t-2xl" src="https://picsum.photos/600/400?random=1&seed=farming" alt="Fresh Organic Produce">
<div class="absolute top-3 left-3 bg-blue-500 text-white text-xs font-bold px-3 py-1 rounded-full shadow-md transform -rotate-3">Grows Fast!</div>
<div class="absolute top-3 right-3 bg-green-400 text-white text-xs font-bold px-3 py-1 rounded-full shadow-md transform rotate-3">Fresh Pick</div>
</div>
<div class="p-5 sm:p-6 md:p-7 space-y-4">
<h3 class="text-xl sm:text-2xl font-extrabold text-blue-800 dark:text-blue-200 leading-tight">Organic Heirloom Tomatoes</h3>
<p class="text-sm sm:text-base text-gray-600 dark:text-gray-400 leading-relaxed">Cultivated with love and care, these juicy heirloom tomatoes are perfect for your summer salads and sauces.</p>
<div class="flex items-center justify-between mt-4">
<span class="text-2xl sm:text-3xl font-extrabold text-green-600 dark:text-green-400">$5.99</span>
<span class="text-lg text-gray-500 line-through dark:text-gray-600">$7.50</span>
</div>
<div class="flex items-center text-yellow-500 mt-2">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><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.817 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.817-2.034a1 1 0 00-1.176 0l-2.817 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.725c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><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.817 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.817-2.034a1 1 0 00-1.176 0l-2.817 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.725c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><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.817 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.817-2.034a1 1 0 00-1.176 0l-2.817 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.725c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><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.817 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.817-2.034a1 1 0 00-1.176 0l-2.817 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.725c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
<svg class="w-5 h-5 text-gray-300 dark:text-gray-600" fill="currentColor" viewBox="0 0 20 20"><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.817 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.817-2.034a1 1 0 00-1.176 0l-2.817 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.725c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
<span class="text-sm ml-1 text-gray-500 dark:text-gray-400">(4.5)</span>
</div>
<button type="button" class="w-full py-3 sm:py-4 px-6 mt-4 bg-blue-600 hover:bg-blue-700 active:bg-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:bg-blue-700 dark:hover:bg-blue-800 dark:focus:ring-blue-900 text-white font-bold rounded-full shadow-lg text-lg sm:text-xl transform transition-transform duration-200 hover:scale-[1.03] flex items-center justify-center space-x-2">
<svg class="w-6 h-6" 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 9v3m0 0v3m0-3h3m-3 0H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
<span>Add to Basket</span>
</button>
<div class="flex items-center mt-5 p-3 bg-blue-50 dark:bg-gray-800 rounded-xl">
<img class="w-10 h-10 rounded-full object-cover mr-3 border-2 border-blue-300 dark:border-blue-600" src="https://randomuser.me/api/portraits/men/45.jpg" alt="Farmer John">
<div>
<p class="font-semibold text-blue-800 dark:text-blue-300">Harvested by Farmer John</p>
<p class="text-sm text-gray-500 dark:text-gray-400">Local & Sustainable</p>
</div>
</div>
</div>
</div>
</div>Composants associés
Composant Composants de commerce électronique
Un composant de commerce électronique réactif conçu pour le mode sombre avec une palette de couleurs triadiques, avec des listes de produits, une icône de panier d’achat et un avatar de l’utilisateur.
Composante e-commerce
Un composant de commerce électronique réactif stylisé avec des couleurs Glassmorphism et pastel, adapté aux interfaces de médias sociaux, avec prise en charge du thème sombre.
Industrial_Sunset_Ecommerce_Component
Composant de commerce électronique complexe avec un style de design industriel, une palette de couleurs chaudes de coucher de soleil et une réactivité totale avec prise en charge du mode sombre.