Componente della galleria di lusso
Un componente galleria elegante e sofisticato progettato per piattaforme musicali e audio, con neutri caldi, layout reattivi e supporto per la modalità oscura.
Codice HTML
<div class="bg-stone-50 text-stone-800 dark:bg-stone-900 dark:text-stone-100 min-h-screen font-serif py-12 px-4 sm:px-6 lg:px-8">
<div class="max-w-7xl mx-auto">
<div class="text-center mb-12">
<h2 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold tracking-tight text-stone-900 dark:text-stone-50 mb-4 selection:bg-stone-300 dark:selection:bg-stone-700">
Featured Albums & Artists
</h2>
<p class="mt-4 text-xl text-stone-600 dark:text-stone-300 font-light max-w-2xl mx-auto selection:bg-stone-300 dark:selection:bg-stone-700">
Discover exquisite sounds and immerse yourself in a curated collection of premium audio experiences.
</p>
</div>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8">
<!-- Gallery Item 1 -->
<div class="group relative overflow-hidden rounded-lg shadow-xl hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-1 bg-white dark:bg-stone-800 border border-stone-200 dark:border-stone-700">
<img class="w-full h-64 object-cover object-center transition-transform duration-300 group-hover:scale-105" src="https://picsum.photos/id/1043/400/300" alt="Album Cover 1">
<div class="p-6">
<h3 class="text-xl font-bold text-stone-900 dark:text-stone-50 mb-2 selection:bg-stone-300 dark:selection:bg-stone-700">The Serenity Sessions</h3>
<p class="text-stone-600 dark:text-stone-300 text-sm mb-4 line-clamp-2 selection:bg-stone-300 dark:selection:bg-stone-700">A calming journey through ambient soundscapes and melodic textures, perfect for relaxation.</p>
<div class="flex items-center justify-between">
<div class="flex items-center space-x-2">
<img class="w-8 h-8 rounded-full object-cover border-2 border-stone-300 dark:border-stone-600" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Artist Avatar">
<span class="text-stone-700 dark:text-stone-200 text-sm font-medium selection:bg-stone-300 dark:selection:bg-stone-700">Elysia Croft</span>
</div>
<button class="px-4 py-2 bg-stone-700 text-white dark:bg-stone-600 dark:text-stone-50 rounded-full text-sm font-medium hover:bg-stone-800 dark:hover:bg-stone-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-stone-500 focus:ring-opacity-50">
Listen
</button>
</div>
</div>
<div class="absolute inset-0 bg-gradient-to-t from-stone-900 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end justify-center pb-6 text-white text-lg font-semibold">
<svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-stone-50" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd" />
</svg>
</div>
</div>
<!-- Gallery Item 2 -->
<div class="group relative overflow-hidden rounded-lg shadow-xl hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-1 bg-white dark:bg-stone-800 border border-stone-200 dark:border-stone-700">
<img class="w-full h-64 object-cover object-center transition-transform duration-300 group-hover:scale-105" src="https://picsum.photos/id/111/400/300" alt="Album Cover 2">
<div class="p-6">
<h3 class="text-xl font-bold text-stone-900 dark:text-stone-50 mb-2 selection:bg-stone-300 dark:selection:bg-stone-700">Urban Pulse Beat</h3>
<p class="text-stone-600 dark:text-stone-300 text-sm mb-4 line-clamp-2 selection:bg-stone-300 dark:selection:bg-stone-700">Feel the rhythm of the city with a vibrant mix of electronic and hip-hop beats.</p>
<div class="flex items-center justify-between">
<div class="flex items-center space-x-2">
<img class="w-8 h-8 rounded-full object-cover border-2 border-stone-300 dark:border-stone-600" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Artist Avatar">
<span class="text-stone-700 dark:text-stone-200 text-sm font-medium selection:bg-stone-300 dark:selection:bg-stone-700">DJ Synapse</span>
</div>
<button class="px-4 py-2 bg-stone-700 text-white dark:bg-stone-600 dark:text-stone-50 rounded-full text-sm font-medium hover:bg-stone-800 dark:hover:bg-stone-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-stone-500 focus:ring-opacity-50">
Listen
</button>
</div>
</div>
<div class="absolute inset-0 bg-gradient-to-t from-stone-900 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end justify-center pb-6 text-white text-lg font-semibold">
<svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-stone-50" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd" />
</svg>
</div>
</div>
<!-- Gallery Item 3 -->
<div class="group relative overflow-hidden rounded-lg shadow-xl hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-1 bg-white dark:bg-stone-800 border border-stone-200 dark:border-stone-700">
<img class="w-full h-64 object-cover object-center transition-transform duration-300 group-hover:scale-105" src="https://picsum.photos/id/1069/400/300" alt="Album Cover 3">
<div class="p-6">
<h3 class="text-xl font-bold text-stone-900 dark:text-stone-50 mb-2 selection:bg-stone-300 dark:selection:bg-stone-700">Timeless Melodies</h3>
<p class="text-stone-600 dark:text-stone-300 text-sm mb-4 line-clamp-2 selection:bg-stone-300 dark:selection:bg-stone-700">Classic instrumental pieces reimagined for the modern audiophile, a true auditory delight.</p>
<div class="flex items-center justify-between">
<div class="flex items-center space-x-2">
<img class="w-8 h-8 rounded-full object-cover border-2 border-stone-300 dark:border-stone-600" src="https://randomuser.me/api/portraits/men/67.jpg" alt="Artist Avatar">
<span class="text-stone-700 dark:text-stone-200 text-sm font-medium selection:bg-stone-300 dark:selection:bg-stone-700">Maestro Orion</span>
</div>
<button class="px-4 py-2 bg-stone-700 text-white dark:bg-stone-600 dark:text-stone-50 rounded-full text-sm font-medium hover:bg-stone-800 dark:hover:bg-stone-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-stone-500 focus:ring-opacity-50">
Listen
</button>
</div>
</div>
<div class="absolute inset-0 bg-gradient-to-t from-stone-900 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end justify-center pb-6 text-white text-lg font-semibold">
<svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-stone-50" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd" />
</svg>
</div>
</div>
<!-- Gallery Item 4 -->
<div class="group relative overflow-hidden rounded-lg shadow-xl hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-1 bg-white dark:bg-stone-800 border border-stone-200 dark:border-stone-700">
<img class="w-full h-64 object-cover object-center transition-transform duration-300 group-hover:scale-105" src="https://picsum.photos/id/1051/400/300" alt="Album Cover 4">
<div class="p-6">
<h3 class="text-xl font-bold text-stone-900 dark:text-stone-50 mb-2 selection:bg-stone-300 dark:selection:bg-stone-700">Jazzy Nights</h3>
<p class="text-stone-600 dark:text-stone-300 text-sm mb-4 line-clamp-2 selection:bg-stone-300 dark:selection:bg-stone-700">Smooth saxophone solos and soulful piano melodies for the perfect evening ambiance.</p>
<div class="flex items-center justify-between">
<div class="flex items-center space-x-2">
<img class="w-8 h-8 rounded-full object-cover border-2 border-stone-300 dark:border-stone-600" src="https://randomuser.me/api/portraits/women/12.jpg" alt="Artist Avatar">
<span class="text-stone-700 dark:text-stone-200 text-sm font-medium selection:bg-stone-300 dark:selection:bg-stone-700">Luna Serenade</span>
</div>
<button class="px-4 py-2 bg-stone-700 text-white dark:bg-stone-600 dark:text-stone-50 rounded-full text-sm font-medium hover:bg-stone-800 dark:hover:bg-stone-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-stone-500 focus:ring-opacity-50">
Listen
</button>
</div>
</div>
<div class="absolute inset-0 bg-gradient-to-t from-stone-900 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end justify-center pb-6 text-white text-lg font-semibold">
<svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-stone-50" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd" />
</svg>
</div>
</div>
<!-- Gallery Item 5 -->
<div class="group relative overflow-hidden rounded-lg shadow-xl hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-1 bg-white dark:bg-stone-800 border border-stone-200 dark:border-stone-700">
<img class="w-full h-64 object-cover object-center transition-transform duration-300 group-hover:scale-105" src="https://picsum.photos/id/1025/400/300" alt="Album Cover 5">
<div class="p-6">
<h3 class="text-xl font-bold text-stone-900 dark:text-stone-50 mb-2 selection:bg-stone-300 dark:selection:bg-stone-700">Echoes of the Forest</h3>
<p class="text-stone-600 dark:text-stone-300 text-sm mb-4 line-clamp-2 selection:bg-stone-300 dark:selection:bg-stone-700">Nature-inspired soundscapes blending organic instruments and environmental recordings.</p>
<div class="flex items-center justify-between">
<div class="flex items-center space-x-2">
<img class="w-8 h-8 rounded-full object-cover border-2 border-stone-300 dark:border-stone-600" src="https://randomuser.me/api/portraits/men/88.jpg" alt="Artist Avatar">
<span class="text-stone-700 dark:text-stone-200 text-sm font-medium selection:bg-stone-300 dark:selection:bg-stone-700">Forest Whisperer</span>
</div>
<button class="px-4 py-2 bg-stone-700 text-white dark:bg-stone-600 dark:text-stone-50 rounded-full text-sm font-medium hover:bg-stone-800 dark:hover:bg-stone-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-stone-500 focus:ring-opacity-50">
Listen
</button>
</div>
</div>
<div class="absolute inset-0 bg-gradient-to-t from-stone-900 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end justify-center pb-6 text-white text-lg font-semibold">
<svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-stone-50" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd" />
</svg>
</div>
</div>
<!-- Gallery Item 6 -->
<div class="group relative overflow-hidden rounded-lg shadow-xl hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-1 bg-white dark:bg-stone-800 border border-stone-200 dark:border-stone-700">
<img class="w-full h-64 object-cover object-center transition-transform duration-300 group-hover:scale-105" src="https://picsum.photos/id/1084/400/300" alt="Album Cover 6">
<div class="p-6">
<h3 class="text-xl font-bold text-stone-900 dark:text-stone-50 mb-2 selection:bg-stone-300 dark:selection:bg-stone-700">Acoustic Reverie</h3>
<p class="text-stone-600 dark:text-stone-300 text-sm mb-4 line-clamp-2 selection:bg-stone-300 dark:selection:bg-stone-700">Unplugged sessions delivering raw emotion and pure, unadulterated musicality.</p>
<div class="flex items-center justify-between">
<div class="flex items-center space-x-2">
<img class="w-8 h-8 rounded-full object-cover border-2 border-stone-300 dark:border-stone-600" src="https://randomuser.me/api/portraits/women/76.jpg" alt="Artist Avatar">
<span class="text-stone-700 dark:text-stone-200 text-sm font-medium selection:bg-stone-300 dark:selection:bg-stone-700">Willow Creek Band</span>
</div>
<button class="px-4 py-2 bg-stone-700 text-white dark:bg-stone-600 dark:text-stone-50 rounded-full text-sm font-medium hover:bg-stone-800 dark:hover:bg-stone-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-stone-500 focus:ring-opacity-50">
Listen
</button>
</div>
</div>
<div class="absolute inset-0 bg-gradient-to-t from-stone-900 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end justify-center pb-6 text-white text-lg font-semibold">
<svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-stone-50" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd" />
</svg>
</div>
</div>
</div>
</div>
</div>Componenti correlati
Componente Galleria
Un componente della galleria reattivo progettato in Material Design con una combinazione di colori analoga per uno scopo di dashboard.
Componente Galleria
Un componente della galleria in stile vintage retrò con effetti reattivi e supporto per temi scuri.
Componente della galleria di neumorfismo
Un componente reattivo della galleria neumorfica con supporto per la modalità scura. Le immagini sono segnaposto da picsum.photos e avatar da randomuser.me.