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
Gallery Component
A responsive gallery component with a 3D design style, featuring depth and engagement through shadow and hover effects. It supports dark and light themes.
JewelTone_Photography_Gallery
A complex, responsive photography gallery component with jewel tone colors and a clean, typographic layout, featuring grid systems and dark mode support. Ideal for photographer portfolios.
Gallery Component
A Brutalist-style gallery component designed for blog or content consumption, featuring a responsive layout with dark theme support.