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.
HTML-Code
<div class="max-w-4xl mx-auto p-4">
<h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 text-center mb-6">Product Gallery</h2>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
<div class="bg-pastel-yellow rounded-lg shadow-lg p-6 border-2 border-gray-300 dark:border-gray-600">
<img src="https://picsum.photos/200/300?random=1" alt="Product 1" class="w-full h-40 object-cover rounded-md mb-2">
<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>
<button class="mt-2 px-4 py-2 bg-pastel-blue rounded text-white dark:bg-blue-700">View Details</button>
</div>
<div class="bg-pastel-green rounded-lg shadow-lg p-6 border-2 border-gray-300 dark:border-gray-600">
<img src="https://picsum.photos/200/300?random=2" alt="Product 2" class="w-full h-40 object-cover rounded-md mb-2">
<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>
<button class="mt-2 px-4 py-2 bg-pastel-blue rounded text-white dark:bg-blue-700">View Details</button>
</div>
<div class="bg-pastel-purple rounded-lg shadow-lg p-6 border-2 border-gray-300 dark:border-gray-600">
<img src="https://picsum.photos/200/300?random=3" alt="Product 3" class="w-full h-40 object-cover rounded-md mb-2">
<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>
<button class="mt-2 px-4 py-2 bg-pastel-blue rounded text-white dark:bg-blue-700">View Details</button>
</div>
<div class="bg-pastel-orange rounded-lg shadow-lg p-6 border-2 border-gray-300 dark:border-gray-600">
<img src="https://picsum.photos/200/300?random=4" alt="Product 4" class="w-full h-40 object-cover rounded-md mb-2">
<h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300">Product 4</h3>
<p class="text-gray-600 dark:text-gray-400">Description of product 4.</p>
<button class="mt-2 px-4 py-2 bg-pastel-blue rounded text-white dark:bg-blue-700">View Details</button>
</div>
<div class="bg-pastel-pink rounded-lg shadow-lg p-6 border-2 border-gray-300 dark:border-gray-600">
<img src="https://picsum.photos/200/300?random=5" alt="Product 5" class="w-full h-40 object-cover rounded-md mb-2">
<h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300">Product 5</h3>
<p class="text-gray-600 dark:text-gray-400">Description of product 5.</p>
<button class="mt-2 px-4 py-2 bg-pastel-blue rounded text-white dark:bg-blue-700">View Details</button>
</div>
<div class="bg-pastel-teal rounded-lg shadow-lg p-6 border-2 border-gray-300 dark:border-gray-600">
<img src="https://picsum.photos/200/300?random=6" alt="Product 6" class="w-full h-40 object-cover rounded-md mb-2">
<h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300">Product 6</h3>
<p class="text-gray-600 dark:text-gray-400">Description of product 6.</p>
<button class="mt-2 px-4 py-2 bg-pastel-blue rounded text-white dark:bg-blue-700">View Details</button>
</div>
</div>
</div>Verwandte Komponenten
Komponente "Produktgalerie"
Eine reaktionsschnelle Produktgalerie-Komponente, die mit dem Neumorphismus-Stil und einem triadischen Farbschema gestaltet wurde und sich für die Präsentation von Arbeiten oder Produkten eignet, mit Unterstützung für dunkle Themen.
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.
Komponente "Produktgalerie"
Eine reaktionsschnelle Produktgalerie mit Retro-/Vintage-Ästhetik und Unterstützung für den Dunkelmodus. Es enthält Bilder und Avatare, die von Platzhalterdiensten generiert wurden.