Product Gallery Component
A responsive product gallery with a retro/vintage style, featuring a complementary color scheme and designed for business/corporate websites with dark mode support.
HTML Code
<div class="max-w-6xl mx-auto p-5">
<h2 class="text-3xl font-bold text-center text-amber-500">Product Gallery</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mt-6">
<!-- Product Card -->
<div class="bg-gray-800 rounded-lg overflow-hidden shadow-lg transition-transform transform hover:scale-105">
<img src="https://picsum.photos/300/200?random=1" alt="Product 1" class="w-full h-40 object-cover">
<div class="p-4">
<h3 class="text-xl font-semibold text-orange-300">Product Title 1</h3>
<p class="text-gray-400">A brief description of the product that highlights its features.</p>
<div class="flex items-center justify-between mt-4">
<span class="text-xl text-amber-500 font-bold">$29.99</span>
<button class="bg-amber-500 text-gray-800 font-semibold py-2 px-4 rounded-full hover:bg-orange-400 transition">Add to Cart</button>
</div>
</div>
</div>
<!-- Product Card -->
<div class="bg-gray-800 rounded-lg overflow-hidden shadow-lg transition-transform transform hover:scale-105">
<img src="https://picsum.photos/300/200?random=2" alt="Product 2" class="w-full h-40 object-cover">
<div class="p-4">
<h3 class="text-xl font-semibold text-orange-300">Product Title 2</h3>
<p class="text-gray-400">A brief description of the product that highlights its features.</p>
<div class="flex items-center justify-between mt-4">
<span class="text-xl text-amber-500 font-bold">$39.99</span>
<button class="bg-amber-500 text-gray-800 font-semibold py-2 px-4 rounded-full hover:bg-orange-400 transition">Add to Cart</button>
</div>
</div>
</div>
<!-- Product Card -->
<div class="bg-gray-800 rounded-lg overflow-hidden shadow-lg transition-transform transform hover:scale-105">
<img src="https://picsum.photos/300/200?random=3" alt="Product 3" class="w-full h-40 object-cover">
<div class="p-4">
<h3 class="text-xl font-semibold text-orange-300">Product Title 3</h3>
<p class="text-gray-400">A brief description of the product that highlights its features.</p>
<div class="flex items-center justify-between mt-4">
<span class="text-xl text-amber-500 font-bold">$19.99</span>
<button class="bg-amber-500 text-gray-800 font-semibold py-2 px-4 rounded-full hover:bg-orange-400 transition">Add to Cart</button>
</div>
</div>
</div>
<!-- Product Card -->
<div class="bg-gray-800 rounded-lg overflow-hidden shadow-lg transition-transform transform hover:scale-105">
<img src="https://picsum.photos/300/200?random=4" alt="Product 4" class="w-full h-40 object-cover">
<div class="p-4">
<h3 class="text-xl font-semibold text-orange-300">Product Title 4</h3>
<p class="text-gray-400">A brief description of the product that highlights its features.</p>
<div class="flex items-center justify-between mt-4">
<span class="text-xl text-amber-500 font-bold">$49.99</span>
<button class="bg-amber-500 text-gray-800 font-semibold py-2 px-4 rounded-full hover:bg-orange-400 transition">Add to Cart</button>
</div>
</div>
</div>
<!-- Product Card -->
<div class="bg-gray-800 rounded-lg overflow-hidden shadow-lg transition-transform transform hover:scale-105">
<img src="https://picsum.photos/300/200?random=5" alt="Product 5" class="w-full h-40 object-cover">
<div class="p-4">
<h3 class="text-xl font-semibold text-orange-300">Product Title 5</h3>
<p class="text-gray-400">A brief description of the product that highlights its features.</p>
<div class="flex items-center justify-between mt-4">
<span class="text-xl text-amber-500 font-bold">$59.99</span>
<button class="bg-amber-500 text-gray-800 font-semibold py-2 px-4 rounded-full hover:bg-orange-400 transition">Add to Cart</button>
</div>
</div>
</div>
<!-- Product Card -->
<div class="bg-gray-800 rounded-lg overflow-hidden shadow-lg transition-transform transform hover:scale-105">
<img src="https://picsum.photos/300/200?random=6" alt="Product 6" class="w-full h-40 object-cover">
<div class="p-4">
<h3 class="text-xl font-semibold text-orange-300">Product Title 6</h3>
<p class="text-gray-400">A brief description of the product that highlights its features.</p>
<div class="flex items-center justify-between mt-4">
<span class="text-xl text-amber-500 font-bold">$69.99</span>
<button class="bg-amber-500 text-gray-800 font-semibold py-2 px-4 rounded-full hover:bg-orange-400 transition">Add to Cart</button>
</div>
</div>
</div>
</div>
</div>Related Components
Product Gallery Component
A simple product gallery component designed with 3D elements for depth, using a triadic color scheme. It's responsive and supports dark theme, suitable for showcasing work or products.
Product Gallery Component
A complex, responsive product gallery component with a Neumorphism design style and complementary color scheme, tailored for music/audio platforms. Includes dark mode support and features like track listings, artist info, and play buttons.
Product Gallery Component
Responsive Product Gallery Component with Dark Theme support, Material Design style, Earth tones color scheme, Simple complexity, for E-commerce purpose.