E-commerce Product Card for Agriculture
A playful and cheerful product card component for agricultural e-commerce websites, featuring rounded elements, ocean/blue tones, responsive design, and dark mode support.
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>Related Components
E-commerce Dashboard Component
E-commerce Dashboard Component with Skeuomorphism, Vibrant colors, and Simple layout for Tailwind CSS, with responsive and dark theme support.
Neumorphic E-commerce Product Card
A soft UI (Neumorphism) style e-commerce product card component with grayscale colors, designed for business/corporate websites. It features a product image, title, price, and an 'Add to Cart' button, fully responsive and with dark mode support.
Retro E-commerce Product Card
A Retro/Vintage E-commerce product card with responsive design and dark mode support.