그라디언트세피아 배지
세피아/갈색 그라디언트 전환이 있는 반응형 음악/오디오 전용 배지 구성 요소로, 장르, 분위기 또는 아티스트 카테고리를 표시하는 데 적합합니다. 다크 모드 지원이 포함됩니다.
HTML 코드
<div class="p-6 sm:p-8 bg-gradient-to-br from-amber-50 to-orange-100 dark:from-neutral-900 dark:to-neutral-800 min-h-screen font-sans antialiased">
<div class="max-w-7xl mx-auto">
<h2 class="text-3xl sm:text-4xl font-extrabold text-stone-800 dark:text-stone-100 mb-8 sm:mb-12 text-center">
Explore Music Categories
</h2>
<div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-4 sm:gap-6">
<!-- Badge 1: Jazz -->
<div class="group relative overflow-hidden rounded-xl shadow-lg ring-1 ring-amber-200 dark:ring-neutral-700
bg-gradient-to-br from-amber-100 to-orange-200 dark:from-neutral-800 dark:to-neutral-700
transition-all duration-300 ease-in-out transform hover:scale-105 hover:shadow-xl">
<img src="https://picsum.photos/id/1049/300/200" alt="Jazz music icon" class="w-full h-24 sm:h-32 object-cover object-center transition-all duration-300 group-hover:opacity-80">
<div class="p-3 sm:p-4 text-center">
<p class="text-sm sm:text-base font-semibold text-stone-800 dark:text-stone-200">Jazz</p>
<p class="text-xs text-stone-600 dark:text-stone-400 mt-1">Smooth & Serene</p>
</div>
<div class="absolute inset-0 bg-gradient-to-bl from-amber-400/20 to-orange-500/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
</div>
<!-- Badge 2: Rock -->
<div class="group relative overflow-hidden rounded-xl shadow-lg ring-1 ring-amber-200 dark:ring-neutral-700
bg-gradient-to-br from-amber-100 to-orange-200 dark:from-neutral-800 dark:to-neutral-700
transition-all duration-300 ease-in-out transform hover:scale-105 hover:shadow-xl">
<img src="https://picsum.photos/id/15/300/200" alt="Rock music icon" class="w-full h-24 sm:h-32 object-cover object-center transition-all duration-300 group-hover:opacity-80">
<div class="p-3 sm:p-4 text-center">
<p class="text-sm sm:text-base font-semibold text-stone-800 dark:text-stone-200">Rock</p>
<p class="text-xs text-stone-600 dark:text-stone-400 mt-1">Energetic & Bold</p>
</div>
<div class="absolute inset-0 bg-gradient-to-bl from-amber-400/20 to-orange-500/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
</div>
<!-- Badge 3: Electronic -->
<div class="group relative overflow-hidden rounded-xl shadow-lg ring-1 ring-amber-200 dark:ring-neutral-700
bg-gradient-to-br from-amber-100 to-orange-200 dark:from-neutral-800 dark:to-neutral-700
transition-all duration-300 ease-in-out transform hover:scale-105 hover:shadow-xl">
<img src="https://picsum.photos/id/1084/300/200" alt="Electronic music icon" class="w-full h-24 sm:h-32 object-cover object-center transition-all duration-300 group-hover:opacity-80">
<div class="p-3 sm:p-4 text-center">
<p class="text-sm sm:text-base font-semibold text-stone-800 dark:text-stone-200">Electronic</p>
<p class="text-xs text-stone-600 dark:text-stone-400 mt-1">Pulsing & Modern</p>
</div>
<div class="absolute inset-0 bg-gradient-to-bl from-amber-400/20 to-orange-500/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
</div>
<!-- Badge 4: Classical -->
<div class="group relative overflow-hidden rounded-xl shadow-lg ring-1 ring-amber-200 dark:ring-neutral-700
bg-gradient-to-br from-amber-100 to-orange-200 dark:from-neutral-800 dark:to-neutral-700
transition-all duration-300 ease-in-out transform hover:scale-105 hover:shadow-xl">
<img src="https://picsum.photos/id/123/300/200" alt="Classical music icon" class="w-full h-24 sm:h-32 object-cover object-center transition-all duration-300 group-hover:opacity-80">
<div class="p-3 sm:p-4 text-center">
<p class="text-sm sm:text-base font-semibold text-stone-800 dark:text-stone-200">Classical</p>
<p class="text-xs text-stone-600 dark:text-stone-400 mt-1">Timeless & Grand</p>
</div>
<div class="absolute inset-0 bg-gradient-to-bl from-amber-400/20 to-orange-500/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
</div>
<!-- Badge 5: Hip Hop -->
<div class="group relative overflow-hidden rounded-xl shadow-lg ring-1 ring-amber-200 dark:ring-neutral-700
bg-gradient-to-br from-amber-100 to-orange-200 dark:from-neutral-800 dark:to-neutral-700
transition-all duration-300 ease-in-out transform hover:scale-105 hover:shadow-xl">
<img src="https://picsum.photos/id/1025/300/200" alt="Hip Hop music icon" class="w-full h-24 sm:h-32 object-cover object-center transition-all duration-300 group-hover:opacity-80">
<div class="p-3 sm:p-4 text-center">
<p class="text-sm sm:text-base font-semibold text-stone-800 dark:text-stone-200">Hip Hop</p>
<p class="text-xs text-stone-600 dark:text-stone-400 mt-1">Rhythmic & Urban</p>
</div>
<div class="absolute inset-0 bg-gradient-to-bl from-amber-400/20 to-orange-500/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
</div>
<!-- Badge 6: Country -->
<div class="group relative overflow-hidden rounded-xl shadow-lg ring-1 ring-amber-200 dark:ring-neutral-700
bg-gradient-to-br from-amber-100 to-orange-200 dark:from-neutral-800 dark:to-neutral-700
transition-all duration-300 ease-in-out transform hover:scale-105 hover:shadow-xl">
<img src="https://picsum.photos/id/1069/300/200" alt="Country music icon" class="w-full h-24 sm:h-32 object-cover object-center transition-all duration-300 group-hover:opacity-80">
<div class="p-3 sm:p-4 text-center">
<p class="text-sm sm:text-base font-semibold text-stone-800 dark:text-stone-200">Country</p>
<p class="text-xs text-stone-600 dark:text-stone-400 mt-1">Rustic & Soulful</p>
</div>
<div class="absolute inset-0 bg-gradient-to-bl from-amber-400/20 to-orange-500/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
</div>
<!-- Badge 7: Pop -->
<div class="group relative overflow-hidden rounded-xl shadow-lg ring-1 ring-amber-200 dark:ring-neutral-700
bg-gradient-to-br from-amber-100 to-orange-200 dark:from-neutral-800 dark:to-neutral-700
transition-all duration-300 ease-in-out transform hover:scale-105 hover:shadow-xl">
<img src="https://picsum.photos/id/1012/300/200" alt="Pop music icon" class="w-full h-24 sm:h-32 object-cover object-center transition-all duration-300 group-hover:opacity-80">
<div class="p-3 sm:p-4 text-center">
<p class="text-sm sm:text-base font-semibold text-stone-800 dark:text-stone-200">Pop</p>
<p class="text-xs text-stone-600 dark:text-stone-400 mt-1">Catchy & Mainstream</p>
</div>
<div class="absolute inset-0 bg-gradient-to-bl from-amber-400/20 to-orange-500/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
</div>
<!-- Badge 8: R&B -->
<div class="group relative overflow-hidden rounded-xl shadow-lg ring-1 ring-amber-200 dark:ring-neutral-700
bg-gradient-to-br from-amber-100 to-orange-200 dark:from-neutral-800 dark:to-neutral-700
transition-all duration-300 ease-in-out transform hover:scale-105 hover:shadow-xl">
<img src="https://picsum.photos/id/152/300/200" alt="R&B music icon" class="w-full h-24 sm:h-32 object-cover object-center transition-all duration-300 group-hover:opacity-80">
<div class="p-3 sm:p-4 text-center">
<p class="text-sm sm:text-base font-semibold text-stone-800 dark:text-stone-200">R&B</p>
<p class="text-xs text-stone-600 dark:text-stone-400 mt-1">Smooth & Soulful</p>
</div>
<div class="absolute inset-0 bg-gradient-to-bl from-amber-400/20 to-orange-500/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
</div>
<!-- Badge 9: Indie -->
<div class="group relative overflow-hidden rounded-xl shadow-lg ring-1 ring-amber-200 dark:ring-neutral-700
bg-gradient-to-br from-amber-100 to-orange-200 dark:from-neutral-800 dark:to-neutral-700
transition-all duration-300 ease-in-out transform hover:scale-105 hover:shadow-xl">
<img src="https://picsum.photos/id/40/300/200" alt="Indie music icon" class="w-full h-24 sm:h-32 object-cover object-center transition-all duration-300 group-hover:opacity-80">
<div class="p-3 sm:p-4 text-center">
<p class="text-sm sm:text-base font-semibold text-stone-800 dark:text-stone-200">Indie</p>
<p class="text-xs text-stone-600 dark:text-stone-400 mt-1">Alternative & Unique</p>
</div>
<div class="absolute inset-0 bg-gradient-to-bl from-amber-400/20 to-orange-500/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
</div>
<!-- Badge 10: Folk -->
<div class="group relative overflow-hidden rounded-xl shadow-lg ring-1 ring-amber-200 dark:ring-neutral-700
bg-gradient-to-br from-amber-100 to-orange-200 dark:from-neutral-800 dark:to-neutral-700
transition-all duration-300 ease-in-out transform hover:scale-105 hover:shadow-xl">
<img src="https://picsum.photos/id/29/300/200" alt="Folk music icon" class="w-full h-24 sm:h-32 object-cover object-center transition-all duration-300 group-hover:opacity-80">
<div class="p-3 sm:p-4 text-center">
<p class="text-sm sm:text-base font-semibold text-stone-800 dark:text-stone-200">Folk</p>
<p class="text-xs text-stone-600 dark:text-stone-400 mt-1">Acoustic & Storytelling</p>
</div>
<div class="absolute inset-0 bg-gradient-to-bl from-amber-400/20 to-orange-500/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
</div>
</div>
<div class="mt-12 text-center">
<a href="#" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-full shadow-sm
bg-gradient-to-r from-amber-600 to-orange-700 text-white
hover:from-amber-700 hover:to-orange-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-orange-500
dark:from-amber-700 dark:to-orange-800 dark:hover:from-amber-800 dark:hover:to-orange-900 dark:focus:ring-amber-600
transition-all duration-300 ease-in-out">
View All Genres
<svg class="ml-2 -mr-1 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M10.293 15.707a1 1 0 010-1.414L13.586 11H4a1 1 0 110-2h9.586l-3.293-3.293a1 1 0 111.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd" />
</svg>
</a>
</div>
</div>
</div>