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

Brutalist_RealEstate_Product_Gallery

Eine komplexe, brutalistisch gestaltete Produktgaleriekomponente für Immobilienangebote mit Juwelentönen, satten, gesättigten Farben, hohem Kontrast und Unterstützung des Dunkelmodus. Entwickelt für die Anzeige von Immobiliendetails mit mehreren interaktiven Elementen.

Offen

Komponente "Produktgalerie"

Eine responsive Produktgaleriekomponente mit einem skeuomorphen Design, einem monochromen Farbschema und Unterstützung für dunkle Themen, die mit Tailwind CSS erstellt wurde. Es verfügt über ein einfaches Layout, das für Blogs und den Konsum von Inhalten geeignet ist und reale Elemente mit subtilen Schatten und Farbverläufen nachahmt.

Offen