CCHub Logo CCHub Tailwind Collection
Komponenten Produktgalerie Komponente "Produktgalerie"

Komponente "Produktgalerie"

Eine reaktionsschnelle Produktgalerie-Komponente, die Artikel mit ansprechenden Mikrointeraktionen und einem Fokus auf Erdtönen präsentiert.

Vorschau

HTML-Code 

<div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-lg">
  <h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-4">Product Gallery</h2>
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
    <div class="bg-gray-100 dark:bg-gray-700 rounded-lg overflow-hidden transform hover:scale-105 transition-transform duration-300">
      <img src="https://picsum.photos/200/300?random=1" alt="Product 1" class="w-full h-48 object-cover" />
      <div class="p-4">
        <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300">Product 1</h3>
        <p class="text-gray-600 dark:text-gray-400">Description of product 1.</p>
      </div>
    </div>
    <div class="bg-gray-100 dark:bg-gray-700 rounded-lg overflow-hidden transform hover:scale-105 transition-transform duration-300">
      <img src="https://picsum.photos/200/300?random=2" alt="Product 2" class="w-full h-48 object-cover" />
      <div class="p-4">
        <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300">Product 2</h3>
        <p class="text-gray-600 dark:text-gray-400">Description of product 2.</p>
      </div>
    </div>
    <div class="bg-gray-100 dark:bg-gray-700 rounded-lg overflow-hidden transform hover:scale-105 transition-transform duration-300">
      <img src="https://picsum.photos/200/300?random=3" alt="Product 3" class="w-full h-48 object-cover" />
      <div class="p-4">
        <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300">Product 3</h3>
        <p class="text-gray-600 dark:text-gray-400">Description of product 3.</p>
      </div>
    </div>
  </div>

  <div class="mt-6">
    <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">User Reviews</h3>
    <div class="flex items-center mt-2">
      <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-gray-300 dark:border-gray-600 mr-2" />
      <div>
        <strong class="text-gray-700 dark:text-gray-300">John Doe</strong>
        <p class="text-gray-600 dark:text-gray-400">Great product! Really enjoyed using it.</p>
      </div>
    </div>
  </div>
</div>

Verwandte Komponenten

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.

Offen

Komponente "Produktgalerie"

Eine responsive Produktgalerie-Komponente, die Tailwind CSS mit einem neumorphischen Designstil, einem komplementären Farbschema und einem komplexen Layout verwendet, das für Unternehmenswebsites geeignet ist. Enthält Unterstützung für den Dunkelmodus und verwendet Bilder von picsum.photos.

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