CCHub Logo CCHub Tailwind Collection
Komponenten Produktgalerie Komponente "Produktgalerie"

Komponente "Produktgalerie"

Eine Produktgalerie-Komponente mit Mikrointeraktionen.

Vorschau

HTML-Code 


<div class="container mx-auto px-5 py-2 lg:px-32 lg:pt-12">
  <div class="-m-1 flex flex-wrap md:-m-2">
    <div class="flex w-1/3 flex-wrap">
      <div class="w-full p-1 md:p-2 transform transition duration-500 ease-in-out hover:scale-105">
        <img
          alt="gallery"
          class="block h-full w-full rounded-lg object-cover object-center"
          src="https://picsum.photos/500/300?random=1" />
      </div>
    </div>
    <div class="flex w-1/3 flex-wrap">
      <div class="w-full p-1 md:p-2 transform transition duration-500 ease-in-out hover:scale-105">
        <img
          alt="gallery"
          class="block h-full w-full rounded-lg object-cover object-center"
          src="https://picsum.photos/500/300?random=2" />
      </div>
    </div>
    <div class="flex w-1/3 flex-wrap">
      <div class="w-full p-1 md:p-2 transform transition duration-500 ease-in-out hover:scale-105">
        <img
          alt="gallery"
          class="block h-full w-full rounded-lg object-cover object-center"
          src="https://picsum.photos/500/300?random=3" />
      </div>
    </div>
    <div class="flex w-1/3 flex-wrap">
      <div class="w-full p-1 md:p-2 transform transition duration-500 ease-in-out hover:scale-105">
        <img
          alt="gallery"
          class="block h-full w-full rounded-lg object-cover object-center"
          src="https://picsum.photos/500/300?random=4" />
      </div>
    </div>
    <div class="flex w-1/3 flex-wrap">
      <div class="w-full p-1 md:p-2 transform transition duration-500 ease-in-out hover:scale-105">
        <img
          alt="gallery"
          class="block h-full w-full rounded-lg object-cover object-center"
          src="https://picsum.photos/500/300?random=5" />
      </div>
    </div>
    <div class="flex w-1/3 flex-wrap">
      <div class="w-full p-1 md:p-2 transform transition duration-500 ease-in-out hover:scale-105">
        <img
          alt="gallery"
          class="block h-full w-full rounded-lg object-cover object-center"
          src="https://picsum.photos/500/300?random=6" />
      </div>
    </div>
  </div>
</div>

Verwandte Komponenten

Komponente "Produktgalerie"

Eine reaktionsschnelle Produktgalerie-Komponente, die mit Glassmorphism entwickelt wurde und mattglasähnliche durchscheinende Elemente mit Unschärfeeffekten und einem komplementären Farbschema enthält. Es enthält mehrere interaktive Elemente, die für den E-Commerce geeignet sind, mit Unterstützung für den Dunkelmodus.

Offen

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"

Glassmorphism Product Gallery Component mit responsiven Effekten und Unterstützung für dunkle Themen.

Offen