CCHub Logo CCHub Tailwind Collection
Komponenten Produktgalerie Komponente "Produktgalerie"

Komponente "Produktgalerie"

Eine reaktionsschnelle Produktgalerie-Komponente, die für Musik- und Audioplattformen entwickelt wurde, mit einer dunklen Benutzeroberfläche mit einer Wald-/Grün-Farbpalette und vollständiger Unterstützung des Dunkelmodus.

Vorschau

HTML-Code 

<div class="min-h-screen bg-gray-950 text-gray-100 p-4 sm:p-8 dark:bg-gray-950 dark:text-gray-100">
  <div class="max-w-7xl mx-auto py-8">
    <h2 class="text-4xl sm:text-5xl font-extrabold text-emerald-400 mb-4 tracking-tight">Featured Albums</h2>
    <p class="text-lg sm:text-xl text-gray-400 mb-12">Explore our curated collection of new releases and timeless classics.</p>

    <div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">

      <!-- Product Card 1 -->
      <div class="bg-gray-900 rounded-lg shadow-xl overflow-hidden transform transition-all duration-300 hover:scale-105 hover:shadow-2xl hover:bg-gray-800">
        <div class="relative pb-3/4 sm:pb-full overflow-hidden">
          <img class="absolute h-full w-full object-cover" src="https://picsum.photos/id/1043/400/400" alt="Album Cover">
          <div class="absolute inset-0 bg-gradient-to-t from-gray-900 via-transparent to-transparent opacity-70"></div>
          <button class="absolute bottom-4 right-4 bg-emerald-600 hover:bg-emerald-700 text-white p-3 rounded-full shadow-lg transition-colors duration-300">
            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8 5v14l11-7z"></path></svg>
          </button>
        </div>
        <div class="p-5">
          <h3 class="text-xl font-semibold text-emerald-300 truncate mb-1">The Serene Symphony</h3>
          <p class="text-sm text-gray-400 mb-3">Artist Name</p>
          <div class="flex items-center justify-between">
            <span class="text-lg font-bold text-gray-200">$12.99</span>
            <button class="bg-emerald-500 hover:bg-emerald-600 text-white text-sm py-2 px-4 rounded-full transition-colors duration-300">
              Add to Cart
            </button>
          </div>
          <div class="mt-4 flex items-center justify-between text-gray-400 text-xs">
            <span>Genre: Ambient</span>
            <span>2023</span>
          </div>
        </div>
      </div>

      <!-- Product Card 2 -->
      <div class="bg-gray-900 rounded-lg shadow-xl overflow-hidden transform transition-all duration-300 hover:scale-105 hover:shadow-2xl hover:bg-gray-800">
        <div class="relative pb-3/4 sm:pb-full overflow-hidden">
          <img class="absolute h-full w-full object-cover" src="https://picsum.photos/id/1044/400/400" alt="Album Cover">
          <div class="absolute inset-0 bg-gradient-to-t from-gray-900 via-transparent to-transparent opacity-70"></div>
          <button class="absolute bottom-4 right-4 bg-emerald-600 hover:bg-emerald-700 text-white p-3 rounded-full shadow-lg transition-colors duration-300">
            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8 5v14l11-7z"></path></svg>
          </button>
        </div>
        <div class="p-5">
          <h3 class="text-xl font-semibold text-emerald-300 truncate mb-1">Echoes of the Forest</h3>
          <p class="text-sm text-gray-400 mb-3">The Green Leaves</p>
          <div class="flex items-center justify-between">
            <span class="text-lg font-bold text-gray-200">$14.50</span>
            <button class="bg-emerald-500 hover:bg-emerald-600 text-white text-sm py-2 px-4 rounded-full transition-colors duration-300">
              Add to Cart
            </button>
          </div>
          <div class="mt-4 flex items-center justify-between text-gray-400 text-xs">
            <span>Genre: Folk</span>
            <span>2022</span>
          </div>
        </div>
      </div>

      <!-- Product Card 3 -->
      <div class="bg-gray-900 rounded-lg shadow-xl overflow-hidden transform transition-all duration-300 hover:scale-105 hover:shadow-2xl hover:bg-gray-800">
        <div class="relative pb-3/4 sm:pb-full overflow-hidden">
          <img class="absolute h-full w-full object-cover" src="https://picsum.photos/id/1005/400/400" alt="Album Cover">
          <div class="absolute inset-0 bg-gradient-to-t from-gray-900 via-transparent to-transparent opacity-70"></div>
          <button class="absolute bottom-4 right-4 bg-emerald-600 hover:bg-emerald-700 text-white p-3 rounded-full shadow-lg transition-colors duration-300">
            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8 5v14l11-7z"></path></svg>
          </button>
        </div>
        <div class="p-5">
          <h3 class="text-xl font-semibold text-emerald-300 truncate mb-1">Deep Woods Beats</h3>
          <p class="text-sm text-gray-400 mb-3">DJ Mossy</p>
          <div class="flex items-center justify-between">
            <span class="text-lg font-bold text-gray-200">$11.75</span>
            <button class="bg-emerald-500 hover:bg-emerald-600 text-white text-sm py-2 px-4 rounded-full transition-colors duration-300">
              Add to Cart
            </button>
          </div>
          <div class="mt-4 flex items-center justify-between text-gray-400 text-xs">
            <span>Genre: Electronic</span>
            <span>2023</span>
          </div>
        </div>
      </div>

      <!-- Product Card 4 -->
      <div class="bg-gray-900 rounded-lg shadow-xl overflow-hidden transform transition-all duration-300 hover:scale-105 hover:shadow-2xl hover:bg-gray-800">
        <div class="relative pb-3/4 sm:pb-full overflow-hidden">
          <img class="absolute h-full w-full object-cover" src="https://picsum.photos/id/1020/400/400" alt="Album Cover">
          <div class="absolute inset-0 bg-gradient-to-t from-gray-900 via-transparent to-transparent opacity-70"></div>
          <button class="absolute bottom-4 right-4 bg-emerald-600 hover:bg-emerald-700 text-white p-3 rounded-full shadow-lg transition-colors duration-300">
            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8 5v14l11-7z"></path></svg>
          </button>
        </div>
        <div class="p-5">
          <h3 class="text-xl font-semibold text-emerald-300 truncate mb-1">Nature's Melody</h3>
          <p class="text-sm text-gray-400 mb-3">Calm Rivers</p>
          <div class="flex items-center justify-between">
            <span class="text-lg font-bold text-gray-200">$9.99</span>
            <button class="bg-emerald-500 hover:bg-emerald-600 text-white text-sm py-2 px-4 rounded-full transition-colors duration-300">
              Add to Cart
            </button>
          </div>
          <div class="mt-4 flex items-center justify-between text-gray-400 text-xs">
            <span>Genre: Classical</span>
            <span>2021</span>
          </div>
        </div>
      </div>

      <!-- Product Card 5 -->
      <div class="bg-gray-900 rounded-lg shadow-xl overflow-hidden transform transition-all duration-300 hover:scale-105 hover:shadow-2xl hover:bg-gray-800">
        <div class="relative pb-3/4 sm:pb-full overflow-hidden">
          <img class="absolute h-full w-full object-cover" src="https://picsum.photos/id/1040/400/400" alt="Album Cover">
          <div class="absolute inset-0 bg-gradient-to-t from-gray-900 via-transparent to-transparent opacity-70"></div>
          <button class="absolute bottom-4 right-4 bg-emerald-600 hover:bg-emerald-700 text-white p-3 rounded-full shadow-lg transition-colors duration-300">
            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8 5v14l11-7z"></path></svg>
          </button>
        </div>
        <div class="p-5">
          <h3 class="text-xl font-semibold text-emerald-300 truncate mb-1">Undergrowth Rhythms</h3>
          <p class="text-sm text-gray-400 mb-3">The Root Band</p>
          <div class="flex items-center justify-between">
            <span class="text-lg font-bold text-gray-200">$13.25</span>
            <button class="bg-emerald-500 hover:bg-emerald-600 text-white text-sm py-2 px-4 rounded-full transition-colors duration-300">
              Add to Cart
            </button>
          </div>
          <div class="mt-4 flex items-center justify-between text-gray-400 text-xs">
            <span>Genre: Indie</span>
            <span>2023</span>
          </div>
        </div>
      </div>

      <!-- Product Card 6 -->
      <div class="bg-gray-900 rounded-lg shadow-xl overflow-hidden transform transition-all duration-300 hover:scale-105 hover:shadow-2xl hover:bg-gray-800">
        <div class="relative pb-3/4 sm:pb-full overflow-hidden">
          <img class="absolute h-full w-full object-cover" src="https://picsum.photos/id/1018/400/400" alt="Album Cover">
          <div class="absolute inset-0 bg-gradient-to-t from-gray-900 via-transparent to-transparent opacity-70"></div>
          <button class="absolute bottom-4 right-4 bg-emerald-600 hover:bg-emerald-700 text-white p-3 rounded-full shadow-lg transition-colors duration-300">
            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8 5v14l11-7z"></path></svg>
          </button>
        </div>
        <div class="p-5">
          <h3 class="text-xl font-semibold text-emerald-300 truncate mb-1">Mystic Pond Sounds</h3>
          <p class="text-sm text-gray-400 mb-3">Aqua Echoes</p>
          <div class="flex items-center justify-between">
            <span class="text-lg font-bold text-gray-200">$10.50</span>
            <button class="bg-emerald-500 hover:bg-emerald-600 text-white text-sm py-2 px-4 rounded-full transition-colors duration-300">
              Add to Cart
            </button>
          </div>
          <div class="mt-4 flex items-center justify-between text-gray-400 text-xs">
            <span>Genre: Chillwave</span>
            <span>2022</span>
          </div>
        </div>
      </div>

    </div>
  </div>
</div>

Verwandte Komponenten

Komponente "Produktgalerie"

Eine reaktionsschnelle Produktgalerie im Retro-/Vintage-Stil mit einem komplementären Farbschema und für Geschäfts-/Unternehmenswebsites mit Unterstützung des Dunkelmodus.

Offen

ProductGalleryComponent

Produktgalerie-Komponente mit brutalistischem Design, Responsive- und Dark-Mode-Unterstützung.

Offen

Komponente "Produktgalerie"

Eine Produktgalerie-Komponente, die im Material Design-Stil mit einem triadischen Farbschema entworfen wurde. Es bietet rasterbasierte Layouts, reaktionsschnelle Animationen und unterstützt dunkle Themen. Die Galerie enthält Bilder und Avatare und eignet sich für ein Dashboard.

Offen