CCHub Logo CCHub Tailwind Collection
구성 요소 갤러리 Luxury Gallery 구성 요소

Luxury Gallery 구성 요소

음악 및 오디오 플랫폼용으로 설계된 우아하고 세련된 갤러리 구성 요소로, 따뜻한 중립색, 반응형 레이아웃 및 다크 모드 지원을 특징으로 합니다.

미리 보기

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>

관련 구성 요소

전자상거래 제품 갤러리

복잡하고 반응이 빠르며 어두운 테마와 호환되는 갤러리 구성 요소로, 미니멀한 디자인, 보색적인 색 구성표, 전자 상거래에 적합한 여러 인터랙티브 요소가 있습니다.

열다

갤러리 구성 요소

반응형 효과와 어두운 테마를 지원하는 복고풍 빈티지 스타일 갤러리 구성 요소입니다.

열다

갤러리 구성 요소

머티리얼 디자인 스타일의 Tailwind CSS를 사용하는 반응형 갤러리 구성 요소로, 어두운 테마를 지원하는 대시보드에 적합합니다.

열다