Product Gallery 구성 요소
Neumorphism 디자인 스타일과 보색 구성표를 갖춘 복잡하고 반응이 빠른 제품 갤러리 구성 요소로, 음악/오디오 플랫폼에 맞게 조정됩니다. 다크 모드 지원 및 트랙 목록, 아티스트 정보 및 재생 버튼과 같은 기능이 포함되어 있습니다.
HTML 코드
<div class="p-4 sm:p-8 bg-gray-200 dark:bg-gray-800 text-gray-800 dark:text-gray-200 min-h-screen font-sans transition-colors duration-300">
<h2 class="text-3xl sm:text-4xl font-extrabold text-center mb-10 tracking-tight leading-tight pt-4 dark:text-orange-300 text-teal-700">
Featured Albums & Tracks
</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-7xl mx-auto">
<!-- Album Card 1 -->
<div class="relative bg-gray-200 dark:bg-gray-700 p-6 rounded-3xl shadow-neumorphic dark:shadow-neumorphic-dark transition-all duration-300 hover:shadow-neumorphic-pressed dark:hover:shadow-neumorphic-pressed-dark flex flex-col">
<div class="relative mb-4 rounded-2xl overflow-hidden shadow-inner-neumorphic dark:shadow-inner-neumorphic-dark aspect-square">
<img src="https://picsum.photos/id/1043/400/400" alt="Album Art - Chill Vibes" class="w-full h-full object-cover rounded-2xl">
<div class="absolute inset-0 bg-gradient-to-t from-gray-900/60 to-transparent flex items-end p-4">
<button class="p-3 rounded-full bg-teal-500 dark:bg-orange-500 text-white shadow-md hover:scale-105 active:scale-95 transition-transform duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-teal-500 dark:focus:ring-orange-500 focus:ring-offset-gray-200 dark:focus:ring-offset-gray-700">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd"></path></svg>
</button>
</div>
</div>
<h3 class="text-xl font-semibold mb-1 text-teal-700 dark:text-orange-300">Sunset Sessions</h3>
<p class="text-sm text-gray-600 dark:text-gray-400 mb-3">By <span class="font-medium text-gray-700 dark:text-gray-300">Aurora Beats</span></p>
<div class="flex items-center gap-2 mb-4">
<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Artist Avatar" class="w-8 h-8 rounded-full shadow-inner-neumorphic dark:shadow-inner-neumorphic-dark">
<span class="text-sm text-gray-600 dark:text-gray-400">50K Listeners</span>
</div>
<div class="flex-grow mb-4">
<p class="text-sm text-gray-700 dark:text-gray-300 mb-2 font-medium">Tracklist:</p>
<ul class="space-y-1 text-sm text-gray-600 dark:text-gray-400 mb-1">
<li class="flex items-center justify-between text-base">
<span>1. Golden Hour</span>
<button class="text-teal-600 hover:text-teal-800 dark:text-orange-400 dark:hover:text-orange-bright transition-colors">
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd"></path></svg>
</button>
</li>
<li class="flex items-center justify-between text-base">
<span>2. Ocean Breeze</span>
<button class="text-teal-600 hover:text-teal-800 dark:text-orange-400 dark:hover:text-orange-bright transition-colors">
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd"></path></svg>
</button>
</li>
<li class="flex items-center justify-between text-base">
<span>3. Midnight Drive</span>
<button class="text-teal-600 hover:text-teal-800 dark:text-orange-400 dark:hover:text-orange-bright transition-colors">
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd"></path></svg>
</button>
</li>
</ul>
<a href="#" class="text-sm text-teal-600 dark:text-orange-400 hover:underline">
View all tracks...
</a>
</div>
<button class="w-full py-3 rounded-full bg-teal-500 dark:bg-orange-600 text-white font-semibold shadow-neumorphic-button dark:shadow-neumorphic-button-dark transition-all duration-200 hover:translate-y-0.5 active:translate-y-1 active:shadow-neumorphic-button-pressed dark:active:shadow-neumorphic-button-pressed-dark focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-b-teal-500 dark:focus:ring-orange-600 focus:ring-offset-gray-200 dark:focus:ring-offset-gray-700">
Add to Library
</button>
</div>
<!-- Album Card 2 -->
<div class="bg-gray-200 dark:bg-gray-700 p-6 rounded-3xl shadow-neumorphic dark:shadow-neumorphic-dark transition-all duration-300 hover:shadow-neumorphic-pressed dark:hover:shadow-neumorphic-pressed-dark flex flex-col">
<div class="relative mb-4 rounded-2xl overflow-hidden shadow-inner-neumorphic dark:shadow-inner-neumorphic-dark aspect-square">
<img src="https://picsum.photos/id/1070/400/400" alt="Album Art - Cosmic Sounds" class="w-full h-full object-cover rounded-2xl">
<div class="absolute inset-0 bg-gradient-to-t from-gray-900/60 to-transparent flex items-end p-4">
<button class="p-3 rounded-full bg-teal-500 dark:bg-orange-500 text-white shadow-md hover:scale-105 active:scale-95 transition-transform duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-teal-500 dark:focus:ring-orange-500 focus:ring-offset-gray-200 dark:focus:ring-offset-gray-700">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd"></path></svg>
</button>
</div>
</div>
<h3 class="text-xl font-semibold mb-1 text-teal-700 dark:text-orange-300">Starlight Symphony</h3>
<p class="text-sm text-gray-600 dark:text-gray-400 mb-3">By <span class="font-medium text-gray-700 dark:text-gray-300">Cosmic Cadence</span></p>
<div class="flex items-center gap-2 mb-4">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Artist Avatar" class="w-8 h-8 rounded-full shadow-inner-neumorphic dark:shadow-inner-neumorphic-dark">
<span class="text-sm text-gray-600 dark:text-gray-400">75K Listeners</span>
</div>
<div class="flex-grow mb-4">
<p class="text-sm text-gray-700 dark:text-gray-300 mb-2 font-medium">Tracklist:</p>
<ul class="space-y-1 text-sm text-gray-600 dark:text-gray-400 mb-1">
<li class="flex items-center justify-between text-base">
<span>1. Nebula Drift</span>
<button class="text-teal-600 hover:text-teal-800 dark:text-orange-400 dark:hover:text-orange-bright transition-colors">
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd"></path></svg>
</button>
</li>
<li class="flex items-center justify-between text-base">
<span>2. Pulsar Echoes</span>
<button class="text-teal-600 hover:text-teal-800 dark:text-orange-400 dark:hover:text-orange-bright transition-colors">
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd"></path></svg>
</button>
</li>
<li class="flex items-center justify-between text-base">
<span>3. Galactic Haze</span>
<button class="text-teal-600 hover:text-teal-800 dark:text-orange-400 dark:hover:text-orange-bright transition-colors">
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd"></path></svg>
</button>
</li>
</ul>
<a href="#" class="text-sm text-teal-600 dark:text-orange-400 hover:underline">
View all tracks...
</a>
</div>
<button class="w-full py-3 rounded-full bg-teal-500 dark:bg-orange-600 text-white font-semibold shadow-neumorphic-button dark:shadow-neumorphic-button-dark transition-all duration-200 hover:translate-y-0.5 active:translate-y-1 active:shadow-neumorphic-button-pressed dark:active:shadow-neumorphic-button-pressed-dark focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-b-teal-500 dark:focus:ring-orange-600 focus:ring-offset-gray-200 dark:focus:ring-offset-gray-700">
Add to Library
</button>
</div>
<!-- Album Card 3 -->
<div class="bg-gray-200 dark:bg-gray-700 p-6 rounded-3xl shadow-neumorphic dark:shadow-neumorphic-dark transition-all duration-300 hover:shadow-neumorphic-pressed dark:hover:shadow-neumorphic-pressed-dark flex flex-col">
<div class="relative mb-4 rounded-2xl overflow-hidden shadow-inner-neumorphic dark:shadow-inner-neumorphic-dark aspect-square">
<img src="https://picsum.photos/id/1062/400/400" alt="Album Art - Indie Folk" class="w-full h-full object-cover rounded-2xl">
<div class="absolute inset-0 bg-gradient-to-t from-gray-900/60 to-transparent flex items-end p-4">
<button class="p-3 rounded-full bg-teal-500 dark:bg-orange-500 text-white shadow-md hover:scale-105 active:scale-95 transition-transform duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-teal-500 dark:focus:ring-orange-500 focus:ring-offset-gray-200 dark:focus:ring-offset-gray-700">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd"></path></svg>
</button>
</div>
</div>
<h3 class="text-xl font-semibold mb-1 text-teal-700 dark:text-orange-300">Forest Whispers</h3>
<p class="text-sm text-gray-600 dark:text-gray-400 mb-3">By <span class="font-medium text-gray-700 dark:text-gray-300">Willow Creek</span></p>
<div class="flex items-center gap-2 mb-4">
<img src="https://randomuser.me/api/portraits/women/67.jpg" alt="Artist Avatar" class="w-8 h-8 rounded-full shadow-inner-neumorphic dark:shadow-inner-neumorphic-dark">
<span class="text-sm text-gray-600 dark:text-gray-400">60K Listeners</span>
</div>
<div class="flex-grow mb-4">
<p class="text-sm text-gray-700 dark:text-gray-300 mb-2 font-medium">Tracklist:</p>
<ul class="space-y-1 text-sm text-gray-600 dark:text-gray-400 mb-1">
<li class="flex items-center justify-between text-base">
<span>1. Evergreen Path</span>
<button class="text-teal-600 hover:text-teal-800 dark:text-orange-400 dark:hover:text-orange-bright transition-colors">
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd"></path></svg>
</button>
</li>
<li class="flex items-center justify-between text-base">
<span>2. River's Song</span>
<button class="text-teal-600 hover:text-teal-800 dark:text-orange-400 dark:hover:text-orange-bright transition-colors">
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd"></path></svg>
</button>
</li>
<li class="flex items-center justify-between text-base">
<span>3. Misted Dawn</span>
<button class="text-teal-600 hover:text-teal-800 dark:text-orange-400 dark:hover:text-orange-bright transition-colors">
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd"></path></svg>
</button>
</li>
</ul>
<a href="#" class="text-sm text-teal-600 dark:text-orange-400 hover:underline">
View all tracks...
</a>
</div>
<button class="w-full py-3 rounded-full bg-teal-500 dark:bg-orange-600 text-white font-semibold shadow-neumorphic-button dark:shadow-neumorphic-button-dark transition-all duration-200 hover:translate-y-0.5 active:translate-y-1 active:shadow-neumorphic-button-pressed dark:active:shadow-neumorphic-button-pressed-dark focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-b-teal-500 dark:focus:ring-orange-600 focus:ring-offset-gray-200 dark:focus:ring-offset-gray-700">
Add to Library
</button>
</div>
</div>
<!-- Custom Styles for Neumorphism Shadows (usually in a CSS file or <style> block, but for a single HTML component, inline is shown for completeness) -->
<style>
.shadow-neumorphic {
box-shadow: 7px 7px 15px rgba(174, 174, 192, 0.4), -7px -7px 15px #ffffff;
}
.dark .shadow-neumorphic-dark {
box-shadow: 7px 7px 15px rgba(0, 0, 0, 0.4), -7px -7px 15px rgba(255, 255, 255, 0.05);
}
.shadow-neumorphic-pressed {
box-shadow: inset 5px 5px 10px rgba(174, 174, 192, 0.5), inset -5px -5px 10px #ffffff;
}
.dark .shadow-neumorphic-pressed-dark {
box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.5), inset -5px -5px 10px rgba(255, 255, 255, 0.08);
}
.shadow-inner-neumorphic {
box-shadow: inset 3px 3px 6px rgba(174, 174, 192, 0.3), inset -3px -3px 6px #ffffff;
}
.dark .shadow-inner-neumorphic-dark {
box-shadow: inset 3px 3px 6px rgba(0, 0, 0, 0.3), inset -3px -3px 6px rgba(255, 255, 255, 0.03);
}
.shadow-neumorphic-button {
box-shadow: 5px 5px 10px rgba(174, 174, 192, 0.4), -5px -5px 10px #ffffff;
}
.dark .shadow-neumorphic-button-dark {
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.4), -5px -5px 10px rgba(255, 255, 255, 0.05);
}
.shadow-neumorphic-button-pressed {
box-shadow: inset 3px 3px 8px rgba(0, 0, 0, 0.2), inset -3px -3px 8px rgba(255, 255, 255, 0.3);
}
.dark .shadow-neumorphic-button-pressed-dark {
box-shadow: inset 3px 3px 8px rgba(0, 0, 0, 0.4), inset -3px -3px 8px rgba(255, 255, 255, 0.1);
}
/* Complementary colors (teal and orange-ish) */
.text-teal-700 { color: #0f766e; } /* Deeper Teal for headings */
.dark .text-orange-300 { color: #fdba74; } /* Lighter Orange for headings */
.bg-teal-500 { background-color: #14b8a6; } /* Primary Teal for buttons */
.dark .bg-orange-500 { background-color: #f97316; } /* Primary Orange for buttons */
.dark .bg-orange-600 { background-color: #ea580c; } /* Darker Orange for buttons */
.text-teal-600 { color: #0d9488; } /* Teal for links/icons */
.hover\:text-teal-800:hover { color: #065f46; } /* Darker Teal on hover */
.dark .text-orange-400 { color: #fb923c; } /* Orange for links/icons */
.dark .hover\:text-orange-bright:hover { color: #ffedd5; } /* Brighter Orange on hover */
</style>
</div>