CCHub Logo CCHub Tailwind Collection
Komponenten Galerie Luxus-Galerie-Komponente

Luxus-Galerie-Komponente

Eine elegante und ausgefeilte Galerie-Komponente, die für Musik- und Audioplattformen entwickelt wurde, mit warmen Neutraltönen, reaktionsschnellen Layouts und Unterstützung für den Dunkelmodus.

Vorschau

HTML-Code 

<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>

Verwandte Komponenten

Galerie-Komponente

Eine Galeriekomponente im Neumorphism-Stil mit Erdtönen für Blog-/Inhaltszwecke. Diese Komponente verfügt über eine umfangreiche Benutzeroberfläche mit mehreren interaktiven Elementen, responsivem Design und Unterstützung für dunkle Themen.

Offen

Retro-Galerie-Komponente

Eine reaktionsschnelle Galeriekomponente im Retro-/Vintage-Stil, einem lebendigen Farbschema und einem einfachen Layout für den Konsum von Blogs / Inhalten mit Unterstützung für den Dunkelmodus. Verwendet Tailwind CSS.

Offen

Galerie-Komponente

Eine Galeriekomponente im brutalistischen Stil, die für den Konsum von Blogs oder Inhalten entwickelt wurde, mit einem responsiven Layout mit Unterstützung für dunkle Themen.

Offen