E-commerce Product Gallery
A minimalist and responsive product gallery component for e-commerce, featuring ocean/blue tones, dark mode support, and interactive image display.
HTML Code
<div class="bg-blue-50 dark:bg-gray-900 py-8 sm:py-12">
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
<h2 class="text-3xl font-extrabold text-blue-900 dark:text-blue-100 mb-8 text-center">
Featured Products
</h2>
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
<!-- Product Card 1 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg transition-all duration-300 overflow-hidden group">
<div class="relative pb-2/3 overflow-hidden rounded-t-lg">
<img src="https://picsum.photos/id/1015/400/300" alt="Product Image" class="absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-300">
</div>
<div class="p-4">
<h3 class="text-lg font-semibold text-blue-800 dark:text-blue-200 mb-1">Ocean Wave Speaker</h3>
<p class="text-sm text-blue-600 dark:text-blue-300 mb-2">Immersive sound experience</p>
<div class="flex justify-between items-center">
<span class="text-xl font-bold text-blue-900 dark:text-blue-100">$129.99</span>
<button class="bg-blue-600 hover:bg-blue-700 text-white dark:bg-blue-700 dark:hover:bg-blue-800 px-4 py-2 rounded-md text-sm font-medium transition-colors duration-200">
Add to Cart
</button>
</div>
</div>
</div>
<!-- Product Card 2 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg transition-all duration-300 overflow-hidden group">
<div class="relative pb-2/3 overflow-hidden rounded-t-lg">
<img src="https://picsum.photos/id/1041/400/300" alt="Product Image" class="absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-300">
</div>
<div class="p-4">
<h3 class="text-lg font-semibold text-blue-800 dark:text-blue-200 mb-1">Azure Comfort Cushion</h3>
<p class="text-sm text-blue-600 dark:text-blue-300 mb-2">Soft & elegant seating</p>
<div class="flex justify-between items-center">
<span class="text-xl font-bold text-blue-900 dark:text-blue-100">$39.99</span>
<button class="bg-blue-600 hover:bg-blue-700 text-white dark:bg-blue-700 dark:hover:bg-blue-800 px-4 py-2 rounded-md text-sm font-medium transition-colors duration-200">
Add to Cart
</button>
</div>
</div>
</div>
<!-- Product Card 3 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg transition-all duration-300 overflow-hidden group">
<div class="relative pb-2/3 overflow-hidden rounded-t-lg">
<img src="https://picsum.photos/id/1025/400/300" alt="Product Image" class="absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-300">
</div>
<div class="p-4">
<h3 class="text-lg font-semibold text-blue-800 dark:text-blue-200 mb-1">Deep Sea Watch</h3>
<p class="text-sm text-blue-600 dark:text-blue-300 mb-2">Water-resistant smart device</p>
<div class="flex justify-between items-center">
<span class="text-xl font-bold text-blue-900 dark:text-blue-100">$249.99</span>
<button class="bg-blue-600 hover:bg-blue-700 text-white dark:bg-blue-700 dark:hover:bg-blue-800 px-4 py-2 rounded-md text-sm font-medium transition-colors duration-200">
Add to Cart
</button>
</div>
</div>
</div>
<!-- Product Card 4 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg transition-all duration-300 overflow-hidden group">
<div class="relative pb-2/3 overflow-hidden rounded-t-lg">
<img src="https://picsum.photos/id/1053/400/300" alt="Product Image" class="absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-300">
</div>
<div class="p-4">
<h3 class="text-lg font-semibold text-blue-800 dark:text-blue-200 mb-1">Sky Blue Backpack</h3>
<p class="text-sm text-blue-600 dark:text-blue-300 mb-2">Lightweight & durable</p>
<div class="flex justify-between items-center">
<span class="text-xl font-bold text-blue-900 dark:text-blue-100">$79.50</span>
<button class="bg-blue-600 hover:bg-blue-700 text-white dark:bg-blue-700 dark:hover:bg-blue-800 px-4 py-2 rounded-md text-sm font-medium transition-colors duration-200">
Add to Cart
</button>
</div>
</div>
</div>
<!-- Product Card 5 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg transition-all duration-300 overflow-hidden group">
<div class="relative pb-2/3 overflow-hidden rounded-t-lg">
<img src="https://picsum.photos/id/1063/400/300" alt="Product Image" class="absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-300">
</div>
<div class="p-4">
<h3 class="text-lg font-semibold text-blue-800 dark:text-blue-200 mb-1">Coral Reef Artwork</h3>
<p class="text-sm text-blue-600 dark:text-blue-300 mb-2">Vibrant wall decor</p>
<div class="flex justify-between items-center">
<span class="text-xl font-bold text-blue-900 dark:text-blue-100">$189.00</span>
<button class="bg-blue-600 hover:bg-blue-700 text-white dark:bg-blue-700 dark:hover:bg-blue-800 px-4 py-2 rounded-md text-sm font-medium transition-colors duration-200">
Add to Cart
</button>
</div>
</div>
</div>
<!-- Product Card 6 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg transition-all duration-300 overflow-hidden group">
<div class="relative pb-2/3 overflow-hidden rounded-t-lg">
<img src="https://picsum.photos/id/1070/400/300" alt="Product Image" class="absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-300">
</div>
<div class="p-4">
<h3 class="text-lg font-semibold text-blue-800 dark:text-blue-200 mb-1">Ocean Breeze Diffuser</h3>
<p class="text-sm text-blue-600 dark:text-blue-300 mb-2">Relaxing aromatherapy</p>
<div class="flex justify-between items-center">
<span class="text-xl font-bold text-blue-900 dark:text-blue-100">$49.99</span>
<button class="bg-blue-600 hover:bg-blue-700 text-white dark:bg-blue-700 dark:hover:bg-blue-800 px-4 py-2 rounded-md text-sm font-medium transition-colors duration-200">
Add to Cart
</button>
</div>
</div>
</div>
<!-- Product Card 7 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg transition-all duration-300 overflow-hidden group">
<div class="relative pb-2/3 overflow-hidden rounded-t-lg">
<img src="https://picsum.photos/id/1084/400/300" alt="Product Image" class="absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-300">
</div>
<div class="p-4">
<h3 class="text-lg font-semibold text-blue-800 dark:text-blue-200 mb-1">Nautical Compass Mug</h3>
<p class="text-sm text-blue-600 dark:text-blue-300 mb-2">For your morning brew</p>
<div class="flex justify-between items-center">
<span class="text-xl font-bold text-blue-900 dark:text-blue-100">$18.75</span>
<button class="bg-blue-600 hover:bg-blue-700 text-white dark:bg-blue-700 dark:hover:bg-blue-800 px-4 py-2 rounded-md text-sm font-medium transition-colors duration-200">
Add to Cart
</button>
</div>
</div>
</div>
<!-- Product Card 8 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg transition-all duration-300 overflow-hidden group">
<div class="relative pb-2/3 overflow-hidden rounded-t-lg">
<img src="https://picsum.photos/id/1018/400/300" alt="Product Image" class="absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-300">
</div>
<div class="p-4">
<h3 class="text-lg font-semibold text-blue-800 dark:text-blue-200 mb-1">Aqua Fitness Bottle</h3>
<p class="text-sm text-blue-600 dark:text-blue-300 mb-2">Stay hydrated in style</p>
<div class="flex justify-between items-center">
<span class="text-xl font-bold text-blue-900 dark:text-blue-100">$22.00</span>
<button class="bg-blue-600 hover:bg-blue-700 text-white dark:bg-blue-700 dark:hover:bg-blue-800 px-4 py-2 rounded-md text-sm font-medium transition-colors duration-200">
Add to Cart
</button>
</div>
</div>
</div>
</div>
</div>
</div>Related Components
Luxury Gallery Component
An elegant and sophisticated gallery component designed for music and audio platforms, featuring warm neutrals, responsive layouts, and dark mode support.
Gallery Component
Responsive Gallery Component with 3D Design, Analogous Color Scheme, and Dark Mode Support for Social Media interfaces.
Real Estate Gallery Component
A responsive and professional gallery component for real estate listings, featuring a clean layout, pastel color scheme, and full dark mode support. Includes property cards with details, a filter/sort section, and a clear call to action.