Product Gallery Component
A responsive product gallery component with a dark UI, sepia/brown color scheme, suitable for business/corporate websites. Includes multiple product cards with images, titles, descriptions, and prices, and supports dark mode.
HTML Code
<section class="py-12 bg-stone-100 dark:bg-stone-900 text-stone-900 dark:text-stone-100 font-sans">
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-12">
<h2 class="text-4xl font-extrabold text-stone-800 dark:text-stone-200 sm:text-5xl lg:text-6xl leading-tight">
Our Premium Collection
</h2>
<p class="mt-4 text-xl text-stone-600 dark:text-stone-400 max-w-2xl mx-auto">
Discover exquisitely crafted products designed with passion and precision.
</p>
</div>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8">
<!-- Product Card 1 -->
<div class="flex flex-col rounded-xl overflow-hidden shadow-lg transform transition-transform duration-300 hover:scale-105 bg-stone-200 dark:bg-stone-800 border border-stone-300 dark:border-stone-700">
<div class="relative pb-[75%] overflow-hidden">
<img class="absolute inset-0 w-full h-full object-cover" src="https://picsum.photos/id/1018/600/400" alt="Product Image 1">
<div class="absolute top-4 left-4 bg-stone-700/80 dark:bg-stone-600/80 text-stone-100 text-xs font-semibold px-3 py-1 rounded-full">New Arrival</div>
</div>
<div class="p-6 flex flex-col flex-grow">
<h3 class="text-xl font-bold text-stone-800 dark:text-stone-200 mb-2 truncate">Elegant Desk Lamp</h3>
<p class="text-sm text-stone-600 dark:text-stone-400 mb-4 flex-grow line-clamp-3">A sophisticated lamp with adjustable brightness, perfect for modern workspaces.</p>
<div class="flex items-center justify-between mt-auto pt-2 border-t border-stone-300 dark:border-stone-700">
<span class="text-2xl font-extrabold text-stone-700 dark:text-stone-300">$89.99</span>
<button class="px-5 py-2 bg-amber-700 dark:bg-amber-600 text-white dark:text-stone-100 font-semibold rounded-lg hover:bg-amber-800 dark:hover:bg-amber-700 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-opacity-75 transition duration-300">
Add to Cart
</button>
</div>
</div>
</div>
<!-- Product Card 2 -->
<div class="flex flex-col rounded-xl overflow-hidden shadow-lg transform transition-transform duration-300 hover:scale-105 bg-stone-200 dark:bg-stone-800 border border-stone-300 dark:border-stone-700">
<div class="relative pb-[75%] overflow-hidden">
<img class="absolute inset-0 w-full h-full object-cover" src="https://picsum.photos/id/1/600/400" alt="Product Image 2">
</div>
<div class="p-6 flex flex-col flex-grow">
<h3 class="text-xl font-bold text-stone-800 dark:text-stone-200 mb-2 truncate">Vintage Leather Bag</h3>
<p class="text-sm text-stone-600 dark:text-stone-400 mb-4 flex-grow line-clamp-3">Hand-stitched leather bag with durable hardware, ideal for daily use or travel.</p>
<div class="flex items-center justify-between mt-auto pt-2 border-t border-stone-300 dark:border-stone-700">
<span class="text-2xl font-extrabold text-stone-700 dark:text-stone-300">$149.00</span>
<button class="px-5 py-2 bg-amber-700 dark:bg-amber-600 text-white dark:text-stone-100 font-semibold rounded-lg hover:bg-amber-800 dark:hover:bg-amber-700 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-opacity-75 transition duration-300">
Add to Cart
</button>
</div>
</div>
</div>
<!-- Product Card 3 -->
<div class="flex flex-col rounded-xl overflow-hidden shadow-lg transform transition-transform duration-300 hover:scale-105 bg-stone-200 dark:bg-stone-800 border border-stone-300 dark:border-stone-700">
<div class="relative pb-[75%] overflow-hidden">
<img class="absolute inset-0 w-full h-full object-cover" src="https://picsum.photos/id/1084/600/400" alt="Product Image 3">
<div class="absolute top-4 right-4 bg-red-600/80 dark:bg-red-500/80 text-white text-xs font-semibold px-3 py-1 rounded-full">Sale</div>
</div>
<div class="p-6 flex flex-col flex-grow">
<h3 class="text-xl font-bold text-stone-800 dark:text-stone-200 mb-2 truncate">Ceramic Coffee Mug Set</h3>
<p class="text-sm text-stone-600 dark:text-stone-400 mb-4 flex-grow line-clamp-3">Artisan crafted set of four mugs, perfect for your morning brew or evening tea.</p>
<div class="flex items-center justify-between mt-auto pt-2 border-t border-stone-300 dark:border-stone-700">
<span class="text-2xl font-extrabold text-stone-700 dark:text-stone-300 line-through text-lg">$45.00</span>
<span class="text-2xl font-extrabold text-red-600 dark:text-red-500">$32.50</span>
<button class="px-5 py-2 bg-amber-700 dark:bg-amber-600 text-white dark:text-stone-100 font-semibold rounded-lg hover:bg-amber-800 dark:hover:bg-amber-700 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-opacity-75 transition duration-300">
Add to Cart
</button>
</div>
</div>
</div>
<!-- Product Card 4 -->
<div class="flex flex-col rounded-xl overflow-hidden shadow-lg transform transition-transform duration-300 hover:scale-105 bg-stone-200 dark:bg-stone-800 border border-stone-300 dark:border-stone-700">
<div class="relative pb-[75%] overflow-hidden">
<img class="absolute inset-0 w-full h-full object-cover" src="https://picsum.photos/id/1015/600/400" alt="Product Image 4">
</div>
<div class="p-6 flex flex-col flex-grow">
<h3 class="text-xl font-bold text-stone-800 dark:text-stone-200 mb-2 truncate">Botanical Wall Art</h3>
<p class="text-sm text-stone-600 dark:text-stone-400 mb-4 flex-grow line-clamp-3">Stunning framed print, bringing the tranquility of nature indoors.</p>
<div class="flex items-center justify-between mt-auto pt-2 border-t border-stone-300 dark:border-stone-700">
<span class="text-2xl font-extrabold text-stone-700 dark:text-stone-300">$65.00</span>
<button class="px-5 py-2 bg-amber-700 dark:bg-amber-600 text-white dark:text-stone-100 font-semibold rounded-lg hover:bg-amber-800 dark:hover:bg-amber-700 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-opacity-75 transition duration-300">
Add to Cart
</button>
</div>
</div>
</div>
<!-- Product Card 5 -->
<div class="flex flex-col rounded-xl overflow-hidden shadow-lg transform transition-transform duration-300 hover:scale-105 bg-stone-200 dark:bg-stone-800 border border-stone-300 dark:border-stone-700">
<div class="relative pb-[75%] overflow-hidden">
<img class="absolute inset-0 w-full h-full object-cover" src="https://picsum.photos/id/10/600/400" alt="Product Image 5">
</div>
<div class="p-6 flex flex-col flex-grow">
<h3 class="text-xl font-bold text-stone-800 dark:text-stone-200 mb-2 truncate">High-Quality Headphones</h3>
<p class="text-sm text-stone-600 dark:text-stone-400 mb-4 flex-grow line-clamp-3">Experience immersive sound with active noise cancellation and ergonomic design.</p>
<div class="flex items-center justify-between mt-auto pt-2 border-t border-stone-300 dark:border-stone-700">
<span class="text-2xl font-extrabold text-stone-700 dark:text-stone-300">$199.99</span>
<button class="px-5 py-2 bg-amber-700 dark:bg-amber-600 text-white dark:text-stone-100 font-semibold rounded-lg hover:bg-amber-800 dark:hover:bg-amber-700 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-opacity-75 transition duration-300">
Add to Cart
</button>
</div>
</div>
</div>
<!-- Product Card 6 -->
<div class="flex flex-col rounded-xl overflow-hidden shadow-lg transform transition-transform duration-300 hover:scale-105 bg-stone-200 dark:bg-stone-800 border border-stone-300 dark:border-stone-700">
<div class="relative pb-[75%] overflow-hidden">
<img class="absolute inset-0 w-full h-full object-cover" src="https://picsum.photos/id/1020/600/400" alt="Product Image 6">
<div class="absolute top-4 left-4 bg-stone-700/80 dark:bg-stone-600/80 text-stone-100 text-xs font-semibold px-3 py-1 rounded-full">Limited Edition</div>
</div>
<div class="p-6 flex flex-col flex-grow">
<h3 class="text-xl font-bold text-stone-800 dark:text-stone-200 mb-2 truncate">Luxury Fountain Pen</h3>
<p class="text-sm text-stone-600 dark:text-stone-400 mb-4 flex-grow line-clamp-3">A refined writing instrument, handcrafted for exceptional balance and smooth ink flow.</p>
<div class="flex items-center justify-between mt-auto pt-2 border-t border-stone-300 dark:border-stone-700">
<span class="text-2xl font-extrabold text-stone-700 dark:text-stone-300">$249.00</span>
<button class="px-5 py-2 bg-amber-700 dark:bg-amber-600 text-white dark:text-stone-100 font-semibold rounded-lg hover:bg-amber-800 dark:hover:bg-amber-700 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-opacity-75 transition duration-300">
Add to Cart
</button>
</div>
</div>
</div>
<!-- Product Card 7 -->
<div class="flex flex-col rounded-xl overflow-hidden shadow-lg transform transition-transform duration-300 hover:scale-105 bg-stone-200 dark:bg-stone-800 border border-stone-300 dark:border-stone-700">
<div class="relative pb-[75%] overflow-hidden">
<img class="absolute inset-0 w-full h-full object-cover" src="https://picsum.photos/id/1005/600/400" alt="Product Image 7">
</div>
<div class="p-6 flex flex-col flex-grow">
<h3 class="text-xl font-bold text-stone-800 dark:text-stone-200 mb-2 truncate">Smart Home Assistant</h3>
<p class="text-sm text-stone-600 dark:text-stone-400 mb-4 flex-grow line-clamp-3">Integrate and control your smart devices with simple voice commands.</p>
<div class="flex items-center justify-between mt-auto pt-2 border-t border-stone-300 dark:border-stone-700">
<span class="text-2xl font-extrabold text-stone-700 dark:text-stone-300">$129.00</span>
<button class="px-5 py-2 bg-amber-700 dark:bg-amber-600 text-white dark:text-stone-100 font-semibold rounded-lg hover:bg-amber-800 dark:hover:bg-amber-700 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-opacity-75 transition duration-300">
Add to Cart
</button>
</div>
</div>
</div>
<!-- Product Card 8 -->
<div class="flex flex-col rounded-xl overflow-hidden shadow-lg transform transition-transform duration-300 hover:scale-105 bg-stone-200 dark:bg-stone-800 border border-stone-300 dark:border-stone-700">
<div class="relative pb-[75%] overflow-hidden">
<img class="absolute inset-0 w-full h-full object-cover" src="https://picsum.photos/id/1021/600/400" alt="Product Image 8">
<div class="absolute top-4 right-4 bg-emerald-600/80 dark:bg-emerald-500/80 text-white text-xs font-semibold px-3 py-1 rounded-full">In Stock</div>
</div>
<div class="p-6 flex flex-col flex-grow">
<h3 class="text-xl font-bold text-stone-800 dark:text-stone-200 mb-2 truncate">Organic Scented Candle</h3>
<p class="text-sm text-stone-600 dark:text-stone-400 mb-4 flex-grow line-clamp-3">Eco-friendly candle made with natural waxes and essential oils for a calming aroma.</p>
<div class="flex items-center justify-between mt-auto pt-2 border-t border-stone-300 dark:border-stone-700">
<span class="text-2xl font-extrabold text-stone-700 dark:text-stone-300">$34.99</span>
<button class="px-5 py-2 bg-amber-700 dark:bg-amber-600 text-white dark:text-stone-100 font-semibold rounded-lg hover:bg-amber-800 dark:hover:bg-amber-700 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-opacity-75 transition duration-300">
Add to Cart
</button>
</div>
</div>
</div>
</div>
<div class="mt-12 text-center">
<button class="inline-flex items-center px-8 py-3 bg-stone-700 dark:bg-stone-600 text-white font-semibold text-lg rounded-lg shadow-lg hover:bg-stone-800 dark:hover:bg-stone-700 transition duration-300 focus:outline-none focus:ring-2 focus:ring-stone-500 focus:ring-opacity-75">
View All Products
<svg class="ml-2 -mr-1 w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L12.586 11H5a1 1 0 110-2h7.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
</button>
</div>
</div>
</section>Related Components
Product Gallery Component
A complex, responsive product gallery component designed with subtle microinteractions, pastel color scheme, and full dark mode support, suitable for a forum or community platform. Features interactive image selection and detailed product information.
Product Gallery Component
A responsive product gallery with a retro/vintage aesthetic, featuring dark mode support. It includes images and avatars generated from placeholder services.
Product Gallery Component
A responsive product gallery component showcasing items with engaging microinteractions and a focus on earth tones.