CCHub Logo CCHub Tailwind Collection
组件 产品展示 Product Gallery 组件

Product Gallery 组件

一个复杂的响应式产品库组件，具有 Neumorphism 设计风格和互补配色方案，专为音乐/音频平台量身定制。包括深色模式支持以及曲目列表、艺术家信息和播放按钮等功能。

预览

HTML 代码 

<div class="p-4 sm:p-8 bg-gray-200 dark:bg-gray-800 text-gray-800 dark:text-gray-200 min-h-screen font-sans transition-colors duration-300">

  <h2 class="text-3xl sm:text-4xl font-extrabold text-center mb-10 tracking-tight leading-tight pt-4 dark:text-orange-300 text-teal-700">
    Featured Albums & Tracks
  </h2>

  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-7xl mx-auto">

    <!-- Album Card 1 -->
    <div class="relative bg-gray-200 dark:bg-gray-700 p-6 rounded-3xl shadow-neumorphic dark:shadow-neumorphic-dark transition-all duration-300 hover:shadow-neumorphic-pressed dark:hover:shadow-neumorphic-pressed-dark flex flex-col">
      <div class="relative mb-4 rounded-2xl overflow-hidden shadow-inner-neumorphic dark:shadow-inner-neumorphic-dark aspect-square">
        <img src="https://picsum.photos/id/1043/400/400" alt="Album Art - Chill Vibes" class="w-full h-full object-cover rounded-2xl">
        <div class="absolute inset-0 bg-gradient-to-t from-gray-900/60 to-transparent flex items-end p-4">
          <button class="p-3 rounded-full bg-teal-500 dark:bg-orange-500 text-white shadow-md hover:scale-105 active:scale-95 transition-transform duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-teal-500 dark:focus:ring-orange-500 focus:ring-offset-gray-200 dark:focus:ring-offset-gray-700">
            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><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"></path></svg>
          </button>
        </div>
      </div>
      <h3 class="text-xl font-semibold mb-1 text-teal-700 dark:text-orange-300">Sunset Sessions</h3>
      <p class="text-sm text-gray-600 dark:text-gray-400 mb-3">By <span class="font-medium text-gray-700 dark:text-gray-300">Aurora Beats</span></p>

      <div class="flex items-center gap-2 mb-4">
        <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Artist Avatar" class="w-8 h-8 rounded-full shadow-inner-neumorphic dark:shadow-inner-neumorphic-dark">
        <span class="text-sm text-gray-600 dark:text-gray-400">50K Listeners</span>
      </div>

      <div class="flex-grow mb-4">
        <p class="text-sm text-gray-700 dark:text-gray-300 mb-2 font-medium">Tracklist:</p>
        <ul class="space-y-1 text-sm text-gray-600 dark:text-gray-400 mb-1">
          <li class="flex items-center justify-between text-base">
            <span>1. Golden Hour</span>
            <button class="text-teal-600 hover:text-teal-800 dark:text-orange-400 dark:hover:text-orange-bright transition-colors">
              <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd"></path></svg>
            </button>
          </li>
          <li class="flex items-center justify-between text-base">
            <span>2. Ocean Breeze</span>
            <button class="text-teal-600 hover:text-teal-800 dark:text-orange-400 dark:hover:text-orange-bright transition-colors">
              <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd"></path></svg>
            </button>
          </li>
          <li class="flex items-center justify-between text-base">
            <span>3. Midnight Drive</span>
            <button class="text-teal-600 hover:text-teal-800 dark:text-orange-400 dark:hover:text-orange-bright transition-colors">
              <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd"></path></svg>
            </button>
          </li>
        </ul>
        <a href="#" class="text-sm text-teal-600 dark:text-orange-400 hover:underline">
          View all tracks...
        </a>
      </div>

      <button class="w-full py-3 rounded-full bg-teal-500 dark:bg-orange-600 text-white font-semibold shadow-neumorphic-button dark:shadow-neumorphic-button-dark transition-all duration-200 hover:translate-y-0.5 active:translate-y-1 active:shadow-neumorphic-button-pressed dark:active:shadow-neumorphic-button-pressed-dark focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-b-teal-500 dark:focus:ring-orange-600 focus:ring-offset-gray-200 dark:focus:ring-offset-gray-700">
        Add to Library
      </button>
    </div>

    <!-- Album Card 2 -->
    <div class="bg-gray-200 dark:bg-gray-700 p-6 rounded-3xl shadow-neumorphic dark:shadow-neumorphic-dark transition-all duration-300 hover:shadow-neumorphic-pressed dark:hover:shadow-neumorphic-pressed-dark flex flex-col">
      <div class="relative mb-4 rounded-2xl overflow-hidden shadow-inner-neumorphic dark:shadow-inner-neumorphic-dark aspect-square">
        <img src="https://picsum.photos/id/1070/400/400" alt="Album Art - Cosmic Sounds" class="w-full h-full object-cover rounded-2xl">
        <div class="absolute inset-0 bg-gradient-to-t from-gray-900/60 to-transparent flex items-end p-4">
          <button class="p-3 rounded-full bg-teal-500 dark:bg-orange-500 text-white shadow-md hover:scale-105 active:scale-95 transition-transform duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-teal-500 dark:focus:ring-orange-500 focus:ring-offset-gray-200 dark:focus:ring-offset-gray-700">
            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><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"></path></svg>
          </button>
        </div>
      </div>
      <h3 class="text-xl font-semibold mb-1 text-teal-700 dark:text-orange-300">Starlight Symphony</h3>
      <p class="text-sm text-gray-600 dark:text-gray-400 mb-3">By <span class="font-medium text-gray-700 dark:text-gray-300">Cosmic Cadence</span></p>

      <div class="flex items-center gap-2 mb-4">
        <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Artist Avatar" class="w-8 h-8 rounded-full shadow-inner-neumorphic dark:shadow-inner-neumorphic-dark">
        <span class="text-sm text-gray-600 dark:text-gray-400">75K Listeners</span>
      </div>

      <div class="flex-grow mb-4">
        <p class="text-sm text-gray-700 dark:text-gray-300 mb-2 font-medium">Tracklist:</p>
        <ul class="space-y-1 text-sm text-gray-600 dark:text-gray-400 mb-1">
          <li class="flex items-center justify-between text-base">
            <span>1. Nebula Drift</span>
            <button class="text-teal-600 hover:text-teal-800 dark:text-orange-400 dark:hover:text-orange-bright transition-colors">
              <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd"></path></svg>
            </button>
          </li>
          <li class="flex items-center justify-between text-base">
            <span>2. Pulsar Echoes</span>
            <button class="text-teal-600 hover:text-teal-800 dark:text-orange-400 dark:hover:text-orange-bright transition-colors">
              <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd"></path></svg>
            </button>
          </li>
          <li class="flex items-center justify-between text-base">
            <span>3. Galactic Haze</span>
            <button class="text-teal-600 hover:text-teal-800 dark:text-orange-400 dark:hover:text-orange-bright transition-colors">
              <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd"></path></svg>
            </button>
          </li>
        </ul>
        <a href="#" class="text-sm text-teal-600 dark:text-orange-400 hover:underline">
          View all tracks...
        </a>
      </div>

      <button class="w-full py-3 rounded-full bg-teal-500 dark:bg-orange-600 text-white font-semibold shadow-neumorphic-button dark:shadow-neumorphic-button-dark transition-all duration-200 hover:translate-y-0.5 active:translate-y-1 active:shadow-neumorphic-button-pressed dark:active:shadow-neumorphic-button-pressed-dark focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-b-teal-500 dark:focus:ring-orange-600 focus:ring-offset-gray-200 dark:focus:ring-offset-gray-700">
        Add to Library
      </button>
    </div>

    <!-- Album Card 3 -->
    <div class="bg-gray-200 dark:bg-gray-700 p-6 rounded-3xl shadow-neumorphic dark:shadow-neumorphic-dark transition-all duration-300 hover:shadow-neumorphic-pressed dark:hover:shadow-neumorphic-pressed-dark flex flex-col">
      <div class="relative mb-4 rounded-2xl overflow-hidden shadow-inner-neumorphic dark:shadow-inner-neumorphic-dark aspect-square">
        <img src="https://picsum.photos/id/1062/400/400" alt="Album Art - Indie Folk" class="w-full h-full object-cover rounded-2xl">
        <div class="absolute inset-0 bg-gradient-to-t from-gray-900/60 to-transparent flex items-end p-4">
          <button class="p-3 rounded-full bg-teal-500 dark:bg-orange-500 text-white shadow-md hover:scale-105 active:scale-95 transition-transform duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-teal-500 dark:focus:ring-orange-500 focus:ring-offset-gray-200 dark:focus:ring-offset-gray-700">
            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><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"></path></svg>
          </button>
        </div>
      </div>
      <h3 class="text-xl font-semibold mb-1 text-teal-700 dark:text-orange-300">Forest Whispers</h3>
      <p class="text-sm text-gray-600 dark:text-gray-400 mb-3">By <span class="font-medium text-gray-700 dark:text-gray-300">Willow Creek</span></p>

      <div class="flex items-center gap-2 mb-4">
        <img src="https://randomuser.me/api/portraits/women/67.jpg" alt="Artist Avatar" class="w-8 h-8 rounded-full shadow-inner-neumorphic dark:shadow-inner-neumorphic-dark">
        <span class="text-sm text-gray-600 dark:text-gray-400">60K Listeners</span>
      </div>

      <div class="flex-grow mb-4">
        <p class="text-sm text-gray-700 dark:text-gray-300 mb-2 font-medium">Tracklist:</p>
        <ul class="space-y-1 text-sm text-gray-600 dark:text-gray-400 mb-1">
          <li class="flex items-center justify-between text-base">
            <span>1. Evergreen Path</span>
            <button class="text-teal-600 hover:text-teal-800 dark:text-orange-400 dark:hover:text-orange-bright transition-colors">
              <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd"></path></svg>
            </button>
          </li>
          <li class="flex items-center justify-between text-base">
            <span>2. River's Song</span>
            <button class="text-teal-600 hover:text-teal-800 dark:text-orange-400 dark:hover:text-orange-bright transition-colors">
              <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd"></path></svg>
            </button>
          </li>
          <li class="flex items-center justify-between text-base">
            <span>3. Misted Dawn</span>
            <button class="text-teal-600 hover:text-teal-800 dark:text-orange-400 dark:hover:text-orange-bright transition-colors">
              <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd"></path></svg>
            </button>
          </li>
        </ul>
        <a href="#" class="text-sm text-teal-600 dark:text-orange-400 hover:underline">
          View all tracks...
        </a>
      </div>

      <button class="w-full py-3 rounded-full bg-teal-500 dark:bg-orange-600 text-white font-semibold shadow-neumorphic-button dark:shadow-neumorphic-button-dark transition-all duration-200 hover:translate-y-0.5 active:translate-y-1 active:shadow-neumorphic-button-pressed dark:active:shadow-neumorphic-button-pressed-dark focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-b-teal-500 dark:focus:ring-orange-600 focus:ring-offset-gray-200 dark:focus:ring-offset-gray-700">
        Add to Library
      </button>
    </div>

  </div>

  <!-- Custom Styles for Neumorphism Shadows (usually in a CSS file or <style> block, but for a single HTML component, inline is shown for completeness) -->
  <style>
    .shadow-neumorphic {
      box-shadow: 7px 7px 15px rgba(174, 174, 192, 0.4), -7px -7px 15px #ffffff;
    }
    .dark .shadow-neumorphic-dark {
      box-shadow: 7px 7px 15px rgba(0, 0, 0, 0.4), -7px -7px 15px rgba(255, 255, 255, 0.05);
    }
    .shadow-neumorphic-pressed {
      box-shadow: inset 5px 5px 10px rgba(174, 174, 192, 0.5), inset -5px -5px 10px #ffffff;
    }
    .dark .shadow-neumorphic-pressed-dark {
      box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.5), inset -5px -5px 10px rgba(255, 255, 255, 0.08);
    }

    .shadow-inner-neumorphic {
      box-shadow: inset 3px 3px 6px rgba(174, 174, 192, 0.3), inset -3px -3px 6px #ffffff;
    }
    .dark .shadow-inner-neumorphic-dark {
      box-shadow: inset 3px 3px 6px rgba(0, 0, 0, 0.3), inset -3px -3px 6px rgba(255, 255, 255, 0.03);
    }

    .shadow-neumorphic-button {
      box-shadow: 5px 5px 10px rgba(174, 174, 192, 0.4), -5px -5px 10px #ffffff;
    }
    .dark .shadow-neumorphic-button-dark {
      box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.4), -5px -5px 10px rgba(255, 255, 255, 0.05);
    }
    .shadow-neumorphic-button-pressed {
      box-shadow: inset 3px 3px 8px rgba(0, 0, 0, 0.2), inset -3px -3px 8px rgba(255, 255, 255, 0.3);
    }
    .dark .shadow-neumorphic-button-pressed-dark {
      box-shadow: inset 3px 3px 8px rgba(0, 0, 0, 0.4), inset -3px -3px 8px rgba(255, 255, 255, 0.1);
    }
    /* Complementary colors (teal and orange-ish) */
    .text-teal-700 { color: #0f766e; } /* Deeper Teal for headings */
    .dark .text-orange-300 { color: #fdba74; } /* Lighter Orange for headings */
    .bg-teal-500 { background-color: #14b8a6; } /* Primary Teal for buttons */
    .dark .bg-orange-500 { background-color: #f97316; } /* Primary Orange for buttons */
    .dark .bg-orange-600 { background-color: #ea580c; } /* Darker Orange for buttons */
    .text-teal-600 { color: #0d9488; } /* Teal for links/icons */
    .hover\:text-teal-800:hover { color: #065f46; } /* Darker Teal on hover */
    .dark .text-orange-400 { color: #fb923c; } /* Orange for links/icons */
    .dark .hover\:text-orange-bright:hover { color: #ffedd5; } /* Brighter Orange on hover */
  </style>

</div>

相关组件

Product Gallery 组件

一个响应式产品库组件，具有受纸张/印刷启发的设计、温暖的中性色方案和深色模式支持，适用于娱乐/媒体平台。

打开

Product Gallery 组件

具有 Material Design 美感的响应式产品库组件，具有基于网格的布局和互动元素，适合展示产品或产品组合。包括深色模式支持，并使用类似的配色方案。

打开

Product Gallery 组件

一个响应式产品库组件，通过引人入胜的微交互展示商品，并专注于大地色调。

打开