Product Gallery 구성 요소
음악 및 오디오 플랫폼용으로 설계된 반응형 제품 갤러리 구성 요소로, 포레스트/그린 색상 팔레트와 완전한 다크 모드를 지원하는 어두운 UI를 특징으로 합니다.
HTML 코드
<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>관련 구성 요소
Product Gallery 구성 요소
Material Design 원칙을 기반으로 하는 Product Gallery 구성 요소로, 반응형 디자인과 어두운 테마 지원을 제공합니다. 자리 표시자 이미지를 포함합니다.
Product Gallery 구성 요소
종이/인쇄물에서 영감을 받은 디자인, 따뜻한 중성 색상 구성표 및 다크 모드 지원을 갖춘 반응형 제품 갤러리 구성 요소로, 엔터테인먼트/미디어 플랫폼에 적합합니다.
Product Gallery 구성 요소
스큐어모픽 디자인, 단색 색 구성표 및 어두운 테마 지원을 갖춘 반응형 제품 갤러리 구성 요소로, Tailwind CSS로 구축되었습니다. 블로그 및 콘텐츠 소비에 적합한 간단한 레이아웃이 특징이며 미묘한 그림자와 그라디언트로 실제 요소를 모방합니다.