CCHub Logo CCHub Tailwind Collection
Komponenten Produktgalerie LuxusMonochromatischProduktGalerie

LuxusMonochromatischProduktGalerie

Eine einfache, elegante Produktgaleriekomponente mit einem monochromen Farbschema, das für Musik-/Audioplattformen entwickelt wurde. Bietet volle Reaktionsfähigkeit und Unterstützung für den Dunkelmodus.

Vorschau

HTML-Code 

<div class="bg-gray-100 py-12 dark:bg-gray-900 transition-colors duration-300">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <h2 class="text-3xl font-extrabold tracking-tight text-gray-900 dark:text-white sm:text-4xl text-center mb-12 font-serif">
      Our Exquisite Collection
    </h2>
    <div class="grid grid-cols-1 gap-y-10 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 xl:gap-x-8">
      <!-- Product Card 1 -->
      <a href="#" class="group block dark:bg-gray-800 bg-white rounded-lg shadow-lg overflow-hidden transform hover:scale-105 transition-transform duration-300">
        <div class="w-full aspect-w-1 aspect-h-1 bg-gray-200 overflow-hidden xl:aspect-w-7 xl:aspect-h-8">
          <img src="https://picsum.photos/id/1047/500/500" alt="Luxury Headphones" class="w-full h-full object-center object-cover group-hover:opacity-75 transition-opacity duration-300">
        </div>
        <div class="p-4">
          <h3 class="mt-4 text-lg font-medium text-gray-900 dark:text-gray-100 font-serif">Elegance Pro Headphones</h3>
          <p class="mt-1 text-sm text-gray-700 dark:text-gray-300">Immersive sound, unparalleled comfort.</p>
          <p class="mt-3 text-lg font-bold text-gray-900 dark:text-white">$499.00</p>
        </div>
      </a>

      <!-- Product Card 2 -->
      <a href="#" class="group block dark:bg-gray-800 bg-white rounded-lg shadow-lg overflow-hidden transform hover:scale-105 transition-transform duration-300">
        <div class="w-full aspect-w-1 aspect-h-1 bg-gray-200 overflow-hidden xl:aspect-w-7 xl:aspect-h-8">
          <img src="https://picsum.photos/id/160/500/500" alt="Studio Microphone" class="w-full h-full object-center object-cover group-hover:opacity-75 transition-opacity duration-300">
        </div>
        <div class="p-4">
          <h3 class="mt-4 text-lg font-medium text-gray-900 dark:text-gray-100 font-serif">Vocalist Studio Mic</h3>
          <p class="mt-1 text-sm text-gray-700 dark:text-gray-300">Capture clarity with precision.</p>
          <p class="mt-3 text-lg font-bold text-gray-900 dark:text-white">$349.00</p>
        </div>
      </a>

      <!-- Product Card 3 -->
      <a href="#" class="group block dark:bg-gray-800 bg-white rounded-lg shadow-lg overflow-hidden transform hover:scale-105 transition-transform duration-300">
        <div class="w-full aspect-w-1 aspect-h-1 bg-gray-200 overflow-hidden xl:aspect-w-7 xl:aspect-h-8">
          <img src="https://picsum.photos/id/161/500/500" alt="Portable Speaker" class="w-full h-full object-center object-cover group-hover:opacity-75 transition-opacity duration-300">
        </div>
        <div class="p-4">
          <h3 class="mt-4 text-lg font-medium text-gray-900 dark:text-gray-100 font-serif">AuraFlow Portable Speaker</h3>
          <p class="mt-1 text-sm text-gray-700 dark:text-gray-300">Sound that moves with you.</p>
          <p class="mt-3 text-lg font-bold text-gray-900 dark:text-white">$189.00</p>
        </div>
      </a>

      <!-- Product Card 4 -->
      <a href="#" class="group block dark:bg-gray-800 bg-white rounded-lg shadow-lg overflow-hidden transform hover:scale-105 transition-transform duration-300">
        <div class="w-full aspect-w-1 aspect-h-1 bg-gray-200 overflow-hidden xl:aspect-w-7 xl:aspect-h-8">
          <img src="https://picsum.photos/id/1054/500/500" alt="Vinyl Turntable" class="w-full h-full object-center object-cover group-hover:opacity-75 transition-opacity duration-300">
        </div>
        <div class="p-4">
          <h3 class="mt-4 text-lg font-medium text-gray-900 dark:text-gray-100 font-serif">Harmonix Vinyl Player</h3>
          <p class="mt-1 text-sm text-gray-700 dark:text-gray-300">Rediscover the warmth of sound.</p>
          <p class="mt-3 text-lg font-bold text-gray-900 dark:text-white">$799.00</p>
        </div>
      </a>
    </div>
  </div>
</div>

Verwandte Komponenten

Komponente "Produktgalerie"

Eine einfache Produktgalerie-Komponente, die mit 3D-Elementen für Tiefe unter Verwendung eines triadischen Farbschemas entworfen wurde. Es ist reaktionsschnell und unterstützt ein dunkles Design, das sich für die Präsentation von Arbeiten oder Produkten eignet.

Offen

Komponente "Produktgalerie"

Eine komplexe, von Papier und Druck inspirierte Produktgaleriekomponente mit Komplementärfarben, die für den Konsum von Inhalten wie in einem Blog entwickelt wurde und umfangreiche Details, Reaktionsfähigkeit und Unterstützung für den Dunkelmodus bietet.

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