DegradadoSepiaBadges
Un componente de insignia sensible específico para música/audio con transiciones de degradado sepia/marrón, adecuado para mostrar géneros, estados de ánimo o categorías de artistas. Incluye soporte para modo oscuro.
Código 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>Componentes relacionados
Componente de insignias de productos de comercio electrónico
Un componente complejo de insignias de productos de comercio electrónico con un uso intensivo de degradados de color de una paleta de bosque / verde, transiciones suaves y un diseño receptivo con soporte para modo oscuro. Adecuado para mostrar el estado del producto, ofertas o categorías.
Componente de insignias
Un componente de insignias responsivo con un diseño 3D, con profundidad y soporte para temas oscuros. Cada insignia representa a un usuario con un nombre, una imagen y una descripción, diseñados con Tailwind CSS.
Componente de insignias
Un componente simple de insignias de estilo Glassmorphism para redes sociales, con efectos de vidrio esmerilado con desenfoque, colores análogos y soporte de modo oscuro usando Tailwind CSS. Es responsivo y usa picsum.photos para imágenes y randomuser.me para avatares cuando sea necesario. No se incluye JavaScript.