GradientSepiaBadges
A responsive music/audio specific badge component with sepia/brown gradient transitions, suitable for displaying genres, moods, or artist categories. Includes dark mode support.
HTML Code
<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>Related Components
Badges Component - 3D Analogous Dashboard
A responsive Badges Component with 3D design, analogous color scheme, moderate complexity, and dark theme support for dashboards. Uses Tailwind CSS classes only.
Badges Component
A responsive Badges component designed with microinteractions, featuring a complementary color scheme and dark theme support. Ideal for business and corporate websites, this component includes engaging animations that respond to user actions. Previously mentioned visual cues like hover effects enhance the user experience.
Badges Component
A responsive badges component with microinteractions and dark theme support, designed using Tailwind CSS. This component includes hover effects and uses placeholder images for avatars.