Komponente "Produktgalerie"
Eine einfache, reaktionsschnelle Produktgalerie-Komponente, die nach den Prinzipien des Material Designs entwickelt wurde, mit leuchtenden Farben und Unterstützung des Dunkelmodus, die für ein Dashboard geeignet ist. Diese Komponente verwendet Tailwind CSS für das Styling.
HTML-Code
<div class="flex flex-col items-center p-4 bg-white dark:bg-gray-800 rounded-lg shadow-md">
<h2 class="text-2xl font-semibold text-center text-gray-800 dark:text-gray-200">Product Gallery</h2>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 w-full mt-4">
<div class="bg-white dark:bg-gray-700 rounded-lg shadow-lg p-4 hover:shadow-xl transition-shadow duration-300">
<img src="https://picsum.photos/300/200?random=1" alt="Product 1" class="w-full h-48 object-cover rounded-md">
<h3 class="text-lg font-medium text-gray-800 dark:text-gray-200 mt-2">Product 1</h3>
<p class="text-gray-600 dark:text-gray-400">Description of product 1.</p>
</div>
<div class="bg-white dark:bg-gray-700 rounded-lg shadow-lg p-4 hover:shadow-xl transition-shadow duration-300">
<img src="https://picsum.photos/300/200?random=2" alt="Product 2" class="w-full h-48 object-cover rounded-md">
<h3 class="text-lg font-medium text-gray-800 dark:text-gray-200 mt-2">Product 2</h3>
<p class="text-gray-600 dark:text-gray-400">Description of product 2.</p>
</div>
<div class="bg-white dark:bg-gray-700 rounded-lg shadow-lg p-4 hover:shadow-xl transition-shadow duration-300">
<img src="https://picsum.photos/300/200?random=3" alt="Product 3" class="w-full h-48 object-cover rounded-md">
<h3 class="text-lg font-medium text-gray-800 dark:text-gray-200 mt-2">Product 3</h3>
<p class="text-gray-600 dark:text-gray-400">Description of product 3.</p>
</div>
<div class="bg-white dark:bg-gray-700 rounded-lg shadow-lg p-4 hover:shadow-xl transition-shadow duration-300">
<img src="https://picsum.photos/300/200?random=4" alt="Product 4" class="w-full h-48 object-cover rounded-md">
<h3 class="text-lg font-medium text-gray-800 dark:text-gray-200 mt-2">Product 4</h3>
<p class="text-gray-600 dark:text-gray-400">Description of product 4.</p>
</div>
<div class="bg-white dark:bg-gray-700 rounded-lg shadow-lg p-4 hover:shadow-xl transition-shadow duration-300">
<img src="https://picsum.photos/300/200?random=5" alt="Product 5" class="w-full h-48 object-cover rounded-md">
<h3 class="text-lg font-medium text-gray-800 dark:text-gray-200 mt-2">Product 5</h3>
<p class="text-gray-600 dark:text-gray-400">Description of product 5.</p>
</div>
<div class="bg-white dark:bg-gray-700 rounded-lg shadow-lg p-4 hover:shadow-xl transition-shadow duration-300">
<img src="https://picsum.photos/300/200?random=6" alt="Product 6" class="w-full h-48 object-cover rounded-md">
<h3 class="text-lg font-medium text-gray-800 dark:text-gray-200 mt-2">Product 6</h3>
<p class="text-gray-600 dark:text-gray-400">Description of product 6.</p>
</div>
</div>
</div>Verwandte Komponenten
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.
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.
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.