Komponente "Produktgalerie"
Eine Produktgalerie-Komponente, die im Material Design-Stil mit einem triadischen Farbschema entworfen wurde. Es bietet rasterbasierte Layouts, reaktionsschnelle Animationen und unterstützt dunkle Themen. Die Galerie enthält Bilder und Avatare und eignet sich für ein Dashboard.
HTML-Code
<div class="p-4 bg-white dark:bg-gray-800 rounded-lg shadow-lg">
<h2 class="text-2xl font-semibold text-gray-900 dark:text-white mb-4">Product Gallery</h2>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
<div class="bg-gray-100 dark:bg-gray-700 rounded-lg overflow-hidden shadow transition-transform transform hover:scale-105">
<img src="https://picsum.photos/300/200?random=1" alt="Product Image 1" class="w-full h-40 object-cover">
<div class="p-4">
<h3 class="font-medium text-gray-800 dark:text-white">Product Title 1</h3>
<p class="text-gray-600 dark:text-gray-300">Description of Product 1. This is a great product that offers many features.</p>
<div class="flex items-center mt-2">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-2">
<span class="text-gray-700 dark:text-gray-200">User Name</span>
</div>
</div>
</div>
<div class="bg-gray-100 dark:bg-gray-700 rounded-lg overflow-hidden shadow transition-transform transform hover:scale-105">
<img src="https://picsum.photos/300/200?random=2" alt="Product Image 2" class="w-full h-40 object-cover">
<div class="p-4">
<h3 class="font-medium text-gray-800 dark:text-white">Product Title 2</h3>
<p class="text-gray-600 dark:text-gray-300">Description of Product 2. This is a great product that offers many features.</p>
<div class="flex items-center mt-2">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-2">
<span class="text-gray-700 dark:text-gray-200">User Name</span>
</div>
</div>
</div>
<div class="bg-gray-100 dark:bg-gray-700 rounded-lg overflow-hidden shadow transition-transform transform hover:scale-105">
<img src="https://picsum.photos/300/200?random=3" alt="Product Image 3" class="w-full h-40 object-cover">
<div class="p-4">
<h3 class="font-medium text-gray-800 dark:text-white">Product Title 3</h3>
<p class="text-gray-600 dark:text-gray-300">Description of Product 3. This is a great product that offers many features.</p>
<div class="flex items-center mt-2">
<img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-2">
<span class="text-gray-700 dark:text-gray-200">User Name</span>
</div>
</div>
</div>
<div class="bg-gray-100 dark:bg-gray-700 rounded-lg overflow-hidden shadow transition-transform transform hover:scale-105">
<img src="https://picsum.photos/300/200?random=4" alt="Product Image 4" class="w-full h-40 object-cover">
<div class="p-4">
<h3 class="font-medium text-gray-800 dark:text-white">Product Title 4</h3>
<p class="text-gray-600 dark:text-gray-300">Description of Product 4. This is a great product that offers many features.</p>
<div class="flex items-center mt-2">
<img src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-2">
<span class="text-gray-700 dark:text-gray-200">User Name</span>
</div>
</div>
</div>
<div class="bg-gray-100 dark:bg-gray-700 rounded-lg overflow-hidden shadow transition-transform transform hover:scale-105">
<img src="https://picsum.photos/300/200?random=5" alt="Product Image 5" class="w-full h-40 object-cover">
<div class="p-4">
<h3 class="font-medium text-gray-800 dark:text-white">Product Title 5</h3>
<p class="text-gray-600 dark:text-gray-300">Description of Product 5. This is a great product that offers many features.</p>
<div class="flex items-center mt-2">
<img src="https://randomuser.me/api/portraits/men/3.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-2">
<span class="text-gray-700 dark:text-gray-200">User Name</span>
</div>
</div>
</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 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.
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.