CCHub Logo CCHub Tailwind Collection
Komponenten Produktgalerie Komponente "Produktgalerie"

Komponente "Produktgalerie"

Eine reaktionsschnelle Produktgalerie-Komponente, die nach den Prinzipien des Material Designs entwickelt wurde, Erdtöne enthält, für Dashboards geeignet ist und den Dunkelmodus unterstützt.

Vorschau

HTML-Code 

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 p-6 bg-gray-100 dark:bg-gray-800">
  <div class="bg-white dark:bg-gray-900 shadow-lg rounded-lg overflow-hidden">
    <img class="w-full h-48 object-cover" src="https://picsum.photos/300/200" alt="Product Image" />
    <div class="p-4">
      <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product 1</h2>
      <p class="text-gray-600 dark:text-gray-400">A beautiful product description goes here.</p>
      <div class="flex items-center mt-4">
        <div class="flex-shrink-0">
          <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" />
        </div>
        <div class="ml-3">
          <span class="text-sm font-semibold text-gray-800 dark:text-gray-200">Seller Name</span>
        </div>
      </div>
    </div>
  </div>
  <div class="bg-white dark:bg-gray-900 shadow-lg rounded-lg overflow-hidden">
    <img class="w-full h-48 object-cover" src="https://picsum.photos/300/201" alt="Product Image" />
    <div class="p-4">
      <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product 2</h2>
      <p class="text-gray-600 dark:text-gray-400">A beautiful product description goes here.</p>
      <div class="flex items-center mt-4">
        <div class="flex-shrink-0">
          <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" />
        </div>
        <div class="ml-3">
          <span class="text-sm font-semibold text-gray-800 dark:text-gray-200">Seller Name</span>
        </div>
      </div>
    </div>
  </div>
  <div class="bg-white dark:bg-gray-900 shadow-lg rounded-lg overflow-hidden">
    <img class="w-full h-48 object-cover" src="https://picsum.photos/300/202" alt="Product Image" />
    <div class="p-4">
      <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product 3</h2>
      <p class="text-gray-600 dark:text-gray-400">A beautiful product description goes here.</p>
      <div class="flex items-center mt-4">
        <div class="flex-shrink-0">
          <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar" />
        </div>
        <div class="ml-3">
          <span class="text-sm font-semibold text-gray-800 dark:text-gray-200">Seller Name</span>
        </div>
      </div>
    </div>
  </div>
</div>

Verwandte Komponenten

Komponente "Produktgalerie"

Eine Produktgaleriekomponente mit brutalistischem Design, Graustufen-Farbschema und mäßiger Komplexität. Es wurde für einen Dashboard-Zweck entwickelt und ist reaktionsschnell mit Unterstützung für dunkle Themen.

Offen

Komponente "Produktgalerie"

Eine reaktionsschnelle Produktgalerie-Komponente, die im Brutalismus-Stil mit einem pastellfarbenen Farbschema gestaltet ist, das für soziale Medien geeignet ist. Es zeichnet sich durch einen hohen Kontrast und auffällige Designelemente aus und ist für den Dunkelmodus optimiert.

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