CCHub Logo CCHub Tailwind Collection
Komponenten Produktgalerie Komponente "Produktgalerie"

Komponente "Produktgalerie"

Responsive Produktgalerie-Komponente mit Dunkelmodus

Vorschau

HTML-Code 

<div class="bg-gray-900 py-10">
  <div class="container mx-auto px-4">
    <h2 class="text-pastel-light mb-8 text-3xl font-bold text-center">Product Gallery</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
      <div class="bg-gray-800 p-6 rounded-lg shadow-lg">
        <img src="https://picsum.photos/seed/product1/400/300" alt="Product 1" class="rounded-md mb-4 w-full">
        <h3 class="text-pastel-lighter text-xl font-semibold mb-2">Product Title 1</h3>
        <p class="text-pastel-light text-sm mb-4">A brief description of Product 1.</p>
        <button class="bg-pastel-accent text-gray-900 py-2 px-4 rounded-md hover:bg-pastel-darker transition duration-300">View Details</button>
      </div>
      <div class="bg-gray-800 p-6 rounded-lg shadow-lg">
        <img src="https://picsum.photos/seed/product2/400/300" alt="Product 2" class="rounded-md mb-4 w-full">
        <h3 class="text-pastel-lighter text-xl font-semibold mb-2">Product Title 2</h3>
        <p class="text-pastel-light text-sm mb-4">A brief description of Product 2.</p>
        <button class="bg-pastel-accent text-gray-900 py-2 px-4 rounded-md hover:bg-pastel-darker transition duration-300">View Details</button>
      </div>
      <div class="bg-gray-800 p-6 rounded-lg shadow-lg">
        <img src="https://picsum.photos/seed/product3/400/300" alt="Product 3" class="rounded-md mb-4 w-full">
        <h3 class="text-pastel-lighter text-xl font-semibold mb-2">Product Title 3</h3>
        <p class="text-pastel-light text-sm mb-4">A brief description of Product 3.</p>
        <button class="bg-pastel-accent text-gray-900 py-2 px-4 rounded-md hover:bg-pastel-darker transition duration-300">View Details</button>
      </div>
    </div>
  </div>
</div>

Verwandte Komponenten

Komponente "Produktgalerie"

Eine reaktionsschnelle Produktgalerie-Komponente im Glassmorphism-Designstil mit mattglasähnlichen, durchscheinenden Elementen mit Unschärfeeffekten und Unterstützung für dunkle Themen. Es zeigt Produktbilder und Benutzer-Avatare.

Offen

Komponente "Produktgalerie"

Eine reaktionsschnelle Produktgaleriekomponente mit dunkler Benutzeroberfläche, Sepia/Braun-Farbschema, geeignet für Geschäfts-/Unternehmenswebsites. Enthält mehrere Produktkarten mit Bildern, Titeln, Beschreibungen und Preisen und unterstützt den Dunkelmodus.

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