Komponente "Produktgalerie"
Eine reaktionsschnelle Produktgalerie mit Retro-/Vintage-Ästhetik und Unterstützung für den Dunkelmodus. Es enthält Bilder und Avatare, die von Platzhalterdiensten generiert wurden.
HTML-Code
<div class="max-w-7xl mx-auto p-8">
<h2 class="text-4xl font-bold text-center text-gray-800 dark:text-gray-100 mb-6">Retro Product Gallery</h2>
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-transform transform hover:scale-105">
<img src="https://picsum.photos/200?random=1" alt="Product 1" class="w-full h-48 object-cover">
<div class="p-4">
<h3 class="font-semibold text-xl text-gray-900 dark:text-gray-200">Product Title 1</h3>
<p class="text-gray-600 dark:text-gray-400">$19.99</p>
<div class="flex items-center mt-2">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
<span class="text-gray-700 dark:text-gray-300">Seller Name</span>
</div>
</div>
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-transform transform hover:scale-105">
<img src="https://picsum.photos/200?random=2" alt="Product 2" class="w-full h-48 object-cover">
<div class="p-4">
<h3 class="font-semibold text-xl text-gray-900 dark:text-gray-200">Product Title 2</h3>
<p class="text-gray-600 dark:text-gray-400">$29.99</p>
<div class="flex items-center mt-2">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
<span class="text-gray-700 dark:text-gray-300">Seller Name</span>
</div>
</div>
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-transform transform hover:scale-105">
<img src="https://picsum.photos/200?random=3" alt="Product 3" class="w-full h-48 object-cover">
<div class="p-4">
<h3 class="font-semibold text-xl text-gray-900 dark:text-gray-200">Product Title 3</h3>
<p class="text-gray-600 dark:text-gray-400">$39.99</p>
<div class="flex items-center mt-2">
<img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
<span class="text-gray-700 dark:text-gray-300">Seller Name</span>
</div>
</div>
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-transform transform hover:scale-105">
<img src="https://picsum.photos/200?random=4" alt="Product 4" class="w-full h-48 object-cover">
<div class="p-4">
<h3 class="font-semibold text-xl text-gray-900 dark:text-gray-200">Product Title 4</h3>
<p class="text-gray-600 dark:text-gray-400">$49.99</p>
<div class="flex items-center mt-2">
<img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
<span class="text-gray-700 dark:text-gray-300">Seller Name</span>
</div>
</div>
</div>
</div>
</div>Verwandte Komponenten
ProductGalleryComponent
Produktgalerie-Komponente mit brutalistischem Design, Responsive- und Dark-Mode-Unterstützung.
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.