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.
HTML-Code
<div class="bg-gray-800 dark:bg-gray-900 min-h-screen p-6 flex flex-col items-center justify-center">
<h1 class="text-2xl font-bold text-white mb-6">Product Gallery</h1>
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
<!-- Product Card -->
<div class="bg-white dark:bg-gray-800 backdrop-blur-md border border-gray-300 dark:border-gray-700 rounded-lg shadow-lg p-4">
<img src="https://picsum.photos/300/200" alt="Product" class="rounded-lg">
<h2 class="text-lg font-semibold mt-4 dark:text-white">Product Name 1</h2>
<p class="text-gray-600 dark:text-gray-300">$29.99</p>
<button class="mt-2 bg-blue-500 dark:bg-blue-700 text-white font-semibold py-2 px-4 rounded hover:bg-blue-600 dark:hover:bg-blue-800 transition duration-200">Add to Cart</button>
</div>
<!-- Product Card -->
<div class="bg-white dark:bg-gray-800 backdrop-blur-md border border-gray-300 dark:border-gray-700 rounded-lg shadow-lg p-4">
<img src="https://picsum.photos/300/201" alt="Product" class="rounded-lg">
<h2 class="text-lg font-semibold mt-4 dark:text-white">Product Name 2</h2>
<p class="text-gray-600 dark:text-gray-300">$39.99</p>
<button class="mt-2 bg-blue-500 dark:bg-blue-700 text-white font-semibold py-2 px-4 rounded hover:bg-blue-600 dark:hover:bg-blue-800 transition duration-200">Add to Cart</button>
</div>
<!-- Product Card -->
<div class="bg-white dark:bg-gray-800 backdrop-blur-md border border-gray-300 dark:border-gray-700 rounded-lg shadow-lg p-4">
<img src="https://picsum.photos/300/202" alt="Product" class="rounded-lg">
<h2 class="text-lg font-semibold mt-4 dark:text-white">Product Name 3</h2>
<p class="text-gray-600 dark:text-gray-300">$49.99</p>
<button class="mt-2 bg-blue-500 dark:bg-blue-700 text-white font-semibold py-2 px-4 rounded hover:bg-blue-600 dark:hover:bg-blue-800 transition duration-200">Add to Cart</button>
</div>
<!-- Product Card -->
<div class="bg-white dark:bg-gray-800 backdrop-blur-md border border-gray-300 dark:border-gray-700 rounded-lg shadow-lg p-4">
<img src="https://picsum.photos/300/203" alt="Product" class="rounded-lg">
<h2 class="text-lg font-semibold mt-4 dark:text-white">Product Name 4</h2>
<p class="text-gray-600 dark:text-gray-300">$59.99</p>
<button class="mt-2 bg-blue-500 dark:bg-blue-700 text-white font-semibold py-2 px-4 rounded hover:bg-blue-600 dark:hover:bg-blue-800 transition duration-200">Add to Cart</button>
</div>
</div>
<div class="mt-10 flex space-x-4">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-white dark:border-gray-800">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-white dark:border-gray-800">
</div>
</div>Verwandte Komponenten
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.
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.
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.