Komponente "Produktgalerie"
Eine reaktionsschnelle Produktgalerie-Komponente, die Artikel mit ansprechenden Mikrointeraktionen und einem Fokus auf Erdtönen präsentiert.
HTML-Code
<div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-lg">
<h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-4">Product Gallery</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
<div class="bg-gray-100 dark:bg-gray-700 rounded-lg overflow-hidden transform hover:scale-105 transition-transform duration-300">
<img src="https://picsum.photos/200/300?random=1" alt="Product 1" class="w-full h-48 object-cover" />
<div class="p-4">
<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>
</div>
</div>
<div class="bg-gray-100 dark:bg-gray-700 rounded-lg overflow-hidden transform hover:scale-105 transition-transform duration-300">
<img src="https://picsum.photos/200/300?random=2" alt="Product 2" class="w-full h-48 object-cover" />
<div class="p-4">
<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>
</div>
</div>
<div class="bg-gray-100 dark:bg-gray-700 rounded-lg overflow-hidden transform hover:scale-105 transition-transform duration-300">
<img src="https://picsum.photos/200/300?random=3" alt="Product 3" class="w-full h-48 object-cover" />
<div class="p-4">
<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>
</div>
</div>
</div>
<div class="mt-6">
<h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">User Reviews</h3>
<div class="flex items-center mt-2">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-gray-300 dark:border-gray-600 mr-2" />
<div>
<strong class="text-gray-700 dark:text-gray-300">John Doe</strong>
<p class="text-gray-600 dark:text-gray-400">Great product! Really enjoyed using it.</p>
</div>
</div>
</div>
</div>Verwandte Komponenten
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.
Cyberpunk Produktgalerie
Eine reaktionsschnelle Produktgalerie-Komponente mit Cyberpunk-Ästhetik mit dunklem Hintergrund, hellen Akzentfarben (elektrisches Blau) und subtilen interaktiven Elementen, die sich für die Präsentation von Produkten oder eines Portfolios eignen.