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 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.
Komponente "Produktgalerie"
Eine reaktionsschnelle Produktgalerie-Komponente mit einem von Papier/Druck inspirierten Design, einem warmen neutralen Farbschema und Unterstützung für den Dunkelmodus, geeignet für Unterhaltungs-/Medienplattformen.
Komponente "Produktgalerie"
Eine komplexe, reaktionsschnelle Produktgalerie-Komponente mit einem Neumorphism-Designstil und einem komplementären Farbschema, das auf Musik-/Audioplattformen zugeschnitten ist. Enthält Unterstützung für den Dunkelmodus und Funktionen wie Titellisten, Künstlerinformationen und Wiedergabetasten.