Product Gallery Component
A responsive product gallery component designed for music and audio platforms, featuring a dark UI with a forest/green color palette and full dark mode support.
HTML Code
<div class="min-h-screen bg-gray-950 text-gray-100 p-4 sm:p-8 dark:bg-gray-950 dark:text-gray-100">
<div class="max-w-7xl mx-auto py-8">
<h2 class="text-4xl sm:text-5xl font-extrabold text-emerald-400 mb-4 tracking-tight">Featured Albums</h2>
<p class="text-lg sm:text-xl text-gray-400 mb-12">Explore our curated collection of new releases and timeless classics.</p>
<div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
<!-- Product Card 1 -->
<div class="bg-gray-900 rounded-lg shadow-xl overflow-hidden transform transition-all duration-300 hover:scale-105 hover:shadow-2xl hover:bg-gray-800">
<div class="relative pb-3/4 sm:pb-full overflow-hidden">
<img class="absolute h-full w-full object-cover" src="https://picsum.photos/id/1043/400/400" alt="Album Cover">
<div class="absolute inset-0 bg-gradient-to-t from-gray-900 via-transparent to-transparent opacity-70"></div>
<button class="absolute bottom-4 right-4 bg-emerald-600 hover:bg-emerald-700 text-white p-3 rounded-full shadow-lg transition-colors duration-300">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8 5v14l11-7z"></path></svg>
</button>
</div>
<div class="p-5">
<h3 class="text-xl font-semibold text-emerald-300 truncate mb-1">The Serene Symphony</h3>
<p class="text-sm text-gray-400 mb-3">Artist Name</p>
<div class="flex items-center justify-between">
<span class="text-lg font-bold text-gray-200">$12.99</span>
<button class="bg-emerald-500 hover:bg-emerald-600 text-white text-sm py-2 px-4 rounded-full transition-colors duration-300">
Add to Cart
</button>
</div>
<div class="mt-4 flex items-center justify-between text-gray-400 text-xs">
<span>Genre: Ambient</span>
<span>2023</span>
</div>
</div>
</div>
<!-- Product Card 2 -->
<div class="bg-gray-900 rounded-lg shadow-xl overflow-hidden transform transition-all duration-300 hover:scale-105 hover:shadow-2xl hover:bg-gray-800">
<div class="relative pb-3/4 sm:pb-full overflow-hidden">
<img class="absolute h-full w-full object-cover" src="https://picsum.photos/id/1044/400/400" alt="Album Cover">
<div class="absolute inset-0 bg-gradient-to-t from-gray-900 via-transparent to-transparent opacity-70"></div>
<button class="absolute bottom-4 right-4 bg-emerald-600 hover:bg-emerald-700 text-white p-3 rounded-full shadow-lg transition-colors duration-300">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8 5v14l11-7z"></path></svg>
</button>
</div>
<div class="p-5">
<h3 class="text-xl font-semibold text-emerald-300 truncate mb-1">Echoes of the Forest</h3>
<p class="text-sm text-gray-400 mb-3">The Green Leaves</p>
<div class="flex items-center justify-between">
<span class="text-lg font-bold text-gray-200">$14.50</span>
<button class="bg-emerald-500 hover:bg-emerald-600 text-white text-sm py-2 px-4 rounded-full transition-colors duration-300">
Add to Cart
</button>
</div>
<div class="mt-4 flex items-center justify-between text-gray-400 text-xs">
<span>Genre: Folk</span>
<span>2022</span>
</div>
</div>
</div>
<!-- Product Card 3 -->
<div class="bg-gray-900 rounded-lg shadow-xl overflow-hidden transform transition-all duration-300 hover:scale-105 hover:shadow-2xl hover:bg-gray-800">
<div class="relative pb-3/4 sm:pb-full overflow-hidden">
<img class="absolute h-full w-full object-cover" src="https://picsum.photos/id/1005/400/400" alt="Album Cover">
<div class="absolute inset-0 bg-gradient-to-t from-gray-900 via-transparent to-transparent opacity-70"></div>
<button class="absolute bottom-4 right-4 bg-emerald-600 hover:bg-emerald-700 text-white p-3 rounded-full shadow-lg transition-colors duration-300">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8 5v14l11-7z"></path></svg>
</button>
</div>
<div class="p-5">
<h3 class="text-xl font-semibold text-emerald-300 truncate mb-1">Deep Woods Beats</h3>
<p class="text-sm text-gray-400 mb-3">DJ Mossy</p>
<div class="flex items-center justify-between">
<span class="text-lg font-bold text-gray-200">$11.75</span>
<button class="bg-emerald-500 hover:bg-emerald-600 text-white text-sm py-2 px-4 rounded-full transition-colors duration-300">
Add to Cart
</button>
</div>
<div class="mt-4 flex items-center justify-between text-gray-400 text-xs">
<span>Genre: Electronic</span>
<span>2023</span>
</div>
</div>
</div>
<!-- Product Card 4 -->
<div class="bg-gray-900 rounded-lg shadow-xl overflow-hidden transform transition-all duration-300 hover:scale-105 hover:shadow-2xl hover:bg-gray-800">
<div class="relative pb-3/4 sm:pb-full overflow-hidden">
<img class="absolute h-full w-full object-cover" src="https://picsum.photos/id/1020/400/400" alt="Album Cover">
<div class="absolute inset-0 bg-gradient-to-t from-gray-900 via-transparent to-transparent opacity-70"></div>
<button class="absolute bottom-4 right-4 bg-emerald-600 hover:bg-emerald-700 text-white p-3 rounded-full shadow-lg transition-colors duration-300">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8 5v14l11-7z"></path></svg>
</button>
</div>
<div class="p-5">
<h3 class="text-xl font-semibold text-emerald-300 truncate mb-1">Nature's Melody</h3>
<p class="text-sm text-gray-400 mb-3">Calm Rivers</p>
<div class="flex items-center justify-between">
<span class="text-lg font-bold text-gray-200">$9.99</span>
<button class="bg-emerald-500 hover:bg-emerald-600 text-white text-sm py-2 px-4 rounded-full transition-colors duration-300">
Add to Cart
</button>
</div>
<div class="mt-4 flex items-center justify-between text-gray-400 text-xs">
<span>Genre: Classical</span>
<span>2021</span>
</div>
</div>
</div>
<!-- Product Card 5 -->
<div class="bg-gray-900 rounded-lg shadow-xl overflow-hidden transform transition-all duration-300 hover:scale-105 hover:shadow-2xl hover:bg-gray-800">
<div class="relative pb-3/4 sm:pb-full overflow-hidden">
<img class="absolute h-full w-full object-cover" src="https://picsum.photos/id/1040/400/400" alt="Album Cover">
<div class="absolute inset-0 bg-gradient-to-t from-gray-900 via-transparent to-transparent opacity-70"></div>
<button class="absolute bottom-4 right-4 bg-emerald-600 hover:bg-emerald-700 text-white p-3 rounded-full shadow-lg transition-colors duration-300">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8 5v14l11-7z"></path></svg>
</button>
</div>
<div class="p-5">
<h3 class="text-xl font-semibold text-emerald-300 truncate mb-1">Undergrowth Rhythms</h3>
<p class="text-sm text-gray-400 mb-3">The Root Band</p>
<div class="flex items-center justify-between">
<span class="text-lg font-bold text-gray-200">$13.25</span>
<button class="bg-emerald-500 hover:bg-emerald-600 text-white text-sm py-2 px-4 rounded-full transition-colors duration-300">
Add to Cart
</button>
</div>
<div class="mt-4 flex items-center justify-between text-gray-400 text-xs">
<span>Genre: Indie</span>
<span>2023</span>
</div>
</div>
</div>
<!-- Product Card 6 -->
<div class="bg-gray-900 rounded-lg shadow-xl overflow-hidden transform transition-all duration-300 hover:scale-105 hover:shadow-2xl hover:bg-gray-800">
<div class="relative pb-3/4 sm:pb-full overflow-hidden">
<img class="absolute h-full w-full object-cover" src="https://picsum.photos/id/1018/400/400" alt="Album Cover">
<div class="absolute inset-0 bg-gradient-to-t from-gray-900 via-transparent to-transparent opacity-70"></div>
<button class="absolute bottom-4 right-4 bg-emerald-600 hover:bg-emerald-700 text-white p-3 rounded-full shadow-lg transition-colors duration-300">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8 5v14l11-7z"></path></svg>
</button>
</div>
<div class="p-5">
<h3 class="text-xl font-semibold text-emerald-300 truncate mb-1">Mystic Pond Sounds</h3>
<p class="text-sm text-gray-400 mb-3">Aqua Echoes</p>
<div class="flex items-center justify-between">
<span class="text-lg font-bold text-gray-200">$10.50</span>
<button class="bg-emerald-500 hover:bg-emerald-600 text-white text-sm py-2 px-4 rounded-full transition-colors duration-300">
Add to Cart
</button>
</div>
<div class="mt-4 flex items-center justify-between text-gray-400 text-xs">
<span>Genre: Chillwave</span>
<span>2022</span>
</div>
</div>
</div>
</div>
</div>
</div>Related Components
Product Gallery Component
A simple, responsive product gallery component with earth tones, optimized for dark mode and content consumption. Ideal for blogs or e-commerce sites displaying items.
Product Gallery Component
Product Gallery Component based on Material Design principles, featuring responsive design and dark theme support. Includes placeholder images.
Product Gallery Component
Responsive Product Gallery Component with Dark Theme support, Material Design style, Earth tones color scheme, Simple complexity, for E-commerce purpose.