그라디언트세피아 배지
세피아/갈색 그라디언트 전환이 있는 반응형 음악/오디오 전용 배지 구성 요소로, 장르, 분위기 또는 아티스트 카테고리를 표시하는 데 적합합니다. 다크 모드 지원이 포함됩니다.
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>관련 구성 요소
Memphis_Pastel_Food_Badges_Component
음식/레스토랑 웹사이트를 위한 복잡하고 반응이 빠른 배지 구성 요소로, 파스텔 색상 구성표가 있는 Memphis Design에서 영감을 받았습니다. 기하학적 모양, 장난기 넘치는 패턴이 특징이며 다크 모드 지원이 포함되어 있습니다.
Badges 구성 요소
비즈니스/기업 웹사이트용으로 설계된 다재다능한 배지 구성 요소로, 다크 모드 UI에서 어스 톤을 활용하여 사용자 경험을 향상시킵니다. 이 구성 요소는 몇 가지 대화형 요소를 사용하여 응답성을 제공합니다.