Music_Cards_Component
반응형 음악/오디오 카드 구성 요소는 풍부한 보석 색조의 그라데이션과 부드러운 전환을 특징으로 하며 다크 모드를 지원합니다. 앨범 또는 트랙 표시를 위한 간단한 레이아웃.
HTML 코드
<div class="p-4 sm:p-8 bg-gradient-to-br from-purple-950 via-indigo-950 to-black dark:from-gray-950 dark:via-blue-950 dark:to-teal-950 min-h-screen flex items-center justify-center font-sans">
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 w-full max-w-7xl">
<!-- Card 1 -->
<div class="group relative overflow-hidden rounded-2xl shadow-xl transform transition-all duration-500 ease-in-out hover:scale-105 hover:shadow-2xl
bg-gradient-to-tr from-fuchsia-700 via-purple-700 to-indigo-700 dark:from-fuchsia-900 dark:via-purple-900 dark:to-indigo-900">
<div class="relative p-6 z-10 flex flex-col items-center text-center">
<img src="https://picsum.photos/seed/music1/200/200" alt="Album Art" class="rounded-full w-32 h-32 object-cover mb-4 ring-4 ring-white dark:ring-gray-300 transition-transform duration-300 group-hover:scale-110">
<h3 class="text-2xl font-bold text-white mb-2">Groovy Rhythms</h3>
<p class="text-lg text-indigo-100 mb-4">Artist Name</p>
<button class="px-6 py-3 rounded-full bg-white text-indigo-800 font-semibold text-lg shadow-md hover:bg-gray-100 hover:text-indigo-900 transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-white focus:ring-opacity-75">
Play Now
</button>
</div>
<div class="absolute inset-0 bg-gradient-to-br from-transparent via-transparent to-black opacity-30 group-hover:opacity-60 transition-opacity duration-500"></div>
</div>
<!-- Card 2 -->
<div class="group relative overflow-hidden rounded-2xl shadow-xl transform transition-all duration-500 ease-in-out hover:scale-105 hover:shadow-2xl
bg-gradient-to-tr from-purple-700 via-blue-700 to-cyan-700 dark:from-purple-900 dark:via-blue-900 dark:to-cyan-900">
<div class="relative p-6 z-10 flex flex-col items-center text-center">
<img src="https://picsum.photos/seed/music2/200/200" alt="Album Art" class="rounded-full w-32 h-32 object-cover mb-4 ring-4 ring-white dark:ring-gray-300 transition-transform duration-300 group-hover:scale-110">
<h3 class="text-2xl font-bold text-white mb-2">Electric Dreams</h3>
<p class="text-lg text-blue-100 mb-4">Another Artist</p>
<button class="px-6 py-3 rounded-full bg-white text-blue-800 font-semibold text-lg shadow-md hover:bg-gray-100 hover:text-blue-900 transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-white focus:ring-opacity-75">
Play Now
</button>
</div>
<div class="absolute inset-0 bg-gradient-to-br from-transparent via-transparent to-black opacity-30 group-hover:opacity-60 transition-opacity duration-500"></div>
</div>
<!-- Card 3 -->
<div class="group relative overflow-hidden rounded-2xl shadow-xl transform transition-all duration-500 ease-in-out hover:scale-105 hover:shadow-2xl
bg-gradient-to-tr from-emerald-700 via-teal-700 to-sky-700 dark:from-emerald-900 dark:via-teal-900 dark:to-sky-900">
<div class="relative p-6 z-10 flex flex-col items-center text-center">
<img src="https://picsum.photos/seed/music3/200/200" alt="Album Art" class="rounded-full w-32 h-32 object-cover mb-4 ring-4 ring-white dark:ring-gray-300 transition-transform duration-300 group-hover:scale-110">
<h3 class="text-2xl font-bold text-white mb-2">Jazzy Beats</h3>
<p class="text-lg text-teal-100 mb-4">New Age Jazz Ensemble</p>
<button class="px-6 py-3 rounded-full bg-white text-teal-800 font-semibold text-lg shadow-md hover:bg-gray-100 hover:text-teal-900 transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-white focus:ring-opacity-75">
Play Now
</button>
</div>
<div class="absolute inset-0 bg-gradient-to-br from-transparent via-transparent to-black opacity-30 group-hover:opacity-60 transition-opacity duration-500"></div>
</div>
<!-- Card 4 -->
<div class="group relative overflow-hidden rounded-2xl shadow-xl transform transition-all duration-500 ease-in-out hover:scale-105 hover:shadow-2xl
bg-gradient-to-tr from-red-700 via-pink-700 to-purple-700 dark:from-red-900 dark:via-pink-900 dark:to-purple-900">
<div class="relative p-6 z-10 flex flex-col items-center text-center">
<img src="https://picsum.photos/seed/music4/200/200" alt="Album Art" class="rounded-full w-32 h-32 object-cover mb-4 ring-4 ring-white dark:ring-gray-300 transition-transform duration-300 group-hover:scale-110">
<h3 class="text-2xl font-bold text-white mb-2">Melody Flow</h3>
<p class="text-lg text-pink-100 mb-4">The Sound Weavers</p>
<button class="px-6 py-3 rounded-full bg-white text-red-800 font-semibold text-lg shadow-md hover:bg-gray-100 hover:text-red-900 transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-white focus:ring-opacity-75">
Play Now
</button>
</div>
<div class="absolute inset-0 bg-gradient-to-br from-transparent via-transparent to-black opacity-30 group-hover:opacity-60 transition-opacity duration-500"></div>
</div>
</div>
</div>