DégradéSépiaBadges
Un composant de badge spécifique à la musique/à l’audio réactif avec des transitions dégradées sépia/marron, adapté à l’affichage de genres, d’ambiances ou de catégories d’artistes. Inclut la prise en charge du mode sombre.
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>Composants associés
Composant Badges
Un composant simple de badges de style Glassmorphism pour les réseaux sociaux, avec des effets de verre dépoli avec du flou, des couleurs analogues et la prise en charge du mode sombre à l’aide de Tailwind CSS. Il est réactif et utilise picsum.photos pour les images et randomuser.me pour les avatars si nécessaire. Aucun JavaScript n’est inclus.
Glassmorphism_Grayscale_Badges_Component
Un composant simple et réactif de type badges de type glassmorphism avec une palette de couleurs en niveaux de gris, adapté aux sites Web d’entreprise. Inclut la prise en charge du mode sombre.
Composant Badges
Un composant de badge en mode sombre réactif pour le commerce électronique, présentant divers badges avec des schémas de couleurs complémentaires et des éléments interactifs.