Komponente "Produktgalerie"
Eine reaktionsschnelle Produktgaleriekomponente mit dunkler Benutzeroberfläche, Sepia/Braun-Farbschema, geeignet für Geschäfts-/Unternehmenswebsites. Enthält mehrere Produktkarten mit Bildern, Titeln, Beschreibungen und Preisen und unterstützt den Dunkelmodus.
HTML-Code
<section class="py-12 bg-stone-100 dark:bg-stone-900 text-stone-900 dark:text-stone-100 font-sans">
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-12">
<h2 class="text-4xl font-extrabold text-stone-800 dark:text-stone-200 sm:text-5xl lg:text-6xl leading-tight">
Our Premium Collection
</h2>
<p class="mt-4 text-xl text-stone-600 dark:text-stone-400 max-w-2xl mx-auto">
Discover exquisitely crafted products designed with passion and precision.
</p>
</div>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8">
<!-- Product Card 1 -->
<div class="flex flex-col rounded-xl overflow-hidden shadow-lg transform transition-transform duration-300 hover:scale-105 bg-stone-200 dark:bg-stone-800 border border-stone-300 dark:border-stone-700">
<div class="relative pb-[75%] overflow-hidden">
<img class="absolute inset-0 w-full h-full object-cover" src="https://picsum.photos/id/1018/600/400" alt="Product Image 1">
<div class="absolute top-4 left-4 bg-stone-700/80 dark:bg-stone-600/80 text-stone-100 text-xs font-semibold px-3 py-1 rounded-full">New Arrival</div>
</div>
<div class="p-6 flex flex-col flex-grow">
<h3 class="text-xl font-bold text-stone-800 dark:text-stone-200 mb-2 truncate">Elegant Desk Lamp</h3>
<p class="text-sm text-stone-600 dark:text-stone-400 mb-4 flex-grow line-clamp-3">A sophisticated lamp with adjustable brightness, perfect for modern workspaces.</p>
<div class="flex items-center justify-between mt-auto pt-2 border-t border-stone-300 dark:border-stone-700">
<span class="text-2xl font-extrabold text-stone-700 dark:text-stone-300">$89.99</span>
<button class="px-5 py-2 bg-amber-700 dark:bg-amber-600 text-white dark:text-stone-100 font-semibold rounded-lg hover:bg-amber-800 dark:hover:bg-amber-700 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-opacity-75 transition duration-300">
Add to Cart
</button>
</div>
</div>
</div>
<!-- Product Card 2 -->
<div class="flex flex-col rounded-xl overflow-hidden shadow-lg transform transition-transform duration-300 hover:scale-105 bg-stone-200 dark:bg-stone-800 border border-stone-300 dark:border-stone-700">
<div class="relative pb-[75%] overflow-hidden">
<img class="absolute inset-0 w-full h-full object-cover" src="https://picsum.photos/id/1/600/400" alt="Product Image 2">
</div>
<div class="p-6 flex flex-col flex-grow">
<h3 class="text-xl font-bold text-stone-800 dark:text-stone-200 mb-2 truncate">Vintage Leather Bag</h3>
<p class="text-sm text-stone-600 dark:text-stone-400 mb-4 flex-grow line-clamp-3">Hand-stitched leather bag with durable hardware, ideal for daily use or travel.</p>
<div class="flex items-center justify-between mt-auto pt-2 border-t border-stone-300 dark:border-stone-700">
<span class="text-2xl font-extrabold text-stone-700 dark:text-stone-300">$149.00</span>
<button class="px-5 py-2 bg-amber-700 dark:bg-amber-600 text-white dark:text-stone-100 font-semibold rounded-lg hover:bg-amber-800 dark:hover:bg-amber-700 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-opacity-75 transition duration-300">
Add to Cart
</button>
</div>
</div>
</div>
<!-- Product Card 3 -->
<div class="flex flex-col rounded-xl overflow-hidden shadow-lg transform transition-transform duration-300 hover:scale-105 bg-stone-200 dark:bg-stone-800 border border-stone-300 dark:border-stone-700">
<div class="relative pb-[75%] overflow-hidden">
<img class="absolute inset-0 w-full h-full object-cover" src="https://picsum.photos/id/1084/600/400" alt="Product Image 3">
<div class="absolute top-4 right-4 bg-red-600/80 dark:bg-red-500/80 text-white text-xs font-semibold px-3 py-1 rounded-full">Sale</div>
</div>
<div class="p-6 flex flex-col flex-grow">
<h3 class="text-xl font-bold text-stone-800 dark:text-stone-200 mb-2 truncate">Ceramic Coffee Mug Set</h3>
<p class="text-sm text-stone-600 dark:text-stone-400 mb-4 flex-grow line-clamp-3">Artisan crafted set of four mugs, perfect for your morning brew or evening tea.</p>
<div class="flex items-center justify-between mt-auto pt-2 border-t border-stone-300 dark:border-stone-700">
<span class="text-2xl font-extrabold text-stone-700 dark:text-stone-300 line-through text-lg">$45.00</span>
<span class="text-2xl font-extrabold text-red-600 dark:text-red-500">$32.50</span>
<button class="px-5 py-2 bg-amber-700 dark:bg-amber-600 text-white dark:text-stone-100 font-semibold rounded-lg hover:bg-amber-800 dark:hover:bg-amber-700 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-opacity-75 transition duration-300">
Add to Cart
</button>
</div>
</div>
</div>
<!-- Product Card 4 -->
<div class="flex flex-col rounded-xl overflow-hidden shadow-lg transform transition-transform duration-300 hover:scale-105 bg-stone-200 dark:bg-stone-800 border border-stone-300 dark:border-stone-700">
<div class="relative pb-[75%] overflow-hidden">
<img class="absolute inset-0 w-full h-full object-cover" src="https://picsum.photos/id/1015/600/400" alt="Product Image 4">
</div>
<div class="p-6 flex flex-col flex-grow">
<h3 class="text-xl font-bold text-stone-800 dark:text-stone-200 mb-2 truncate">Botanical Wall Art</h3>
<p class="text-sm text-stone-600 dark:text-stone-400 mb-4 flex-grow line-clamp-3">Stunning framed print, bringing the tranquility of nature indoors.</p>
<div class="flex items-center justify-between mt-auto pt-2 border-t border-stone-300 dark:border-stone-700">
<span class="text-2xl font-extrabold text-stone-700 dark:text-stone-300">$65.00</span>
<button class="px-5 py-2 bg-amber-700 dark:bg-amber-600 text-white dark:text-stone-100 font-semibold rounded-lg hover:bg-amber-800 dark:hover:bg-amber-700 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-opacity-75 transition duration-300">
Add to Cart
</button>
</div>
</div>
</div>
<!-- Product Card 5 -->
<div class="flex flex-col rounded-xl overflow-hidden shadow-lg transform transition-transform duration-300 hover:scale-105 bg-stone-200 dark:bg-stone-800 border border-stone-300 dark:border-stone-700">
<div class="relative pb-[75%] overflow-hidden">
<img class="absolute inset-0 w-full h-full object-cover" src="https://picsum.photos/id/10/600/400" alt="Product Image 5">
</div>
<div class="p-6 flex flex-col flex-grow">
<h3 class="text-xl font-bold text-stone-800 dark:text-stone-200 mb-2 truncate">High-Quality Headphones</h3>
<p class="text-sm text-stone-600 dark:text-stone-400 mb-4 flex-grow line-clamp-3">Experience immersive sound with active noise cancellation and ergonomic design.</p>
<div class="flex items-center justify-between mt-auto pt-2 border-t border-stone-300 dark:border-stone-700">
<span class="text-2xl font-extrabold text-stone-700 dark:text-stone-300">$199.99</span>
<button class="px-5 py-2 bg-amber-700 dark:bg-amber-600 text-white dark:text-stone-100 font-semibold rounded-lg hover:bg-amber-800 dark:hover:bg-amber-700 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-opacity-75 transition duration-300">
Add to Cart
</button>
</div>
</div>
</div>
<!-- Product Card 6 -->
<div class="flex flex-col rounded-xl overflow-hidden shadow-lg transform transition-transform duration-300 hover:scale-105 bg-stone-200 dark:bg-stone-800 border border-stone-300 dark:border-stone-700">
<div class="relative pb-[75%] overflow-hidden">
<img class="absolute inset-0 w-full h-full object-cover" src="https://picsum.photos/id/1020/600/400" alt="Product Image 6">
<div class="absolute top-4 left-4 bg-stone-700/80 dark:bg-stone-600/80 text-stone-100 text-xs font-semibold px-3 py-1 rounded-full">Limited Edition</div>
</div>
<div class="p-6 flex flex-col flex-grow">
<h3 class="text-xl font-bold text-stone-800 dark:text-stone-200 mb-2 truncate">Luxury Fountain Pen</h3>
<p class="text-sm text-stone-600 dark:text-stone-400 mb-4 flex-grow line-clamp-3">A refined writing instrument, handcrafted for exceptional balance and smooth ink flow.</p>
<div class="flex items-center justify-between mt-auto pt-2 border-t border-stone-300 dark:border-stone-700">
<span class="text-2xl font-extrabold text-stone-700 dark:text-stone-300">$249.00</span>
<button class="px-5 py-2 bg-amber-700 dark:bg-amber-600 text-white dark:text-stone-100 font-semibold rounded-lg hover:bg-amber-800 dark:hover:bg-amber-700 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-opacity-75 transition duration-300">
Add to Cart
</button>
</div>
</div>
</div>
<!-- Product Card 7 -->
<div class="flex flex-col rounded-xl overflow-hidden shadow-lg transform transition-transform duration-300 hover:scale-105 bg-stone-200 dark:bg-stone-800 border border-stone-300 dark:border-stone-700">
<div class="relative pb-[75%] overflow-hidden">
<img class="absolute inset-0 w-full h-full object-cover" src="https://picsum.photos/id/1005/600/400" alt="Product Image 7">
</div>
<div class="p-6 flex flex-col flex-grow">
<h3 class="text-xl font-bold text-stone-800 dark:text-stone-200 mb-2 truncate">Smart Home Assistant</h3>
<p class="text-sm text-stone-600 dark:text-stone-400 mb-4 flex-grow line-clamp-3">Integrate and control your smart devices with simple voice commands.</p>
<div class="flex items-center justify-between mt-auto pt-2 border-t border-stone-300 dark:border-stone-700">
<span class="text-2xl font-extrabold text-stone-700 dark:text-stone-300">$129.00</span>
<button class="px-5 py-2 bg-amber-700 dark:bg-amber-600 text-white dark:text-stone-100 font-semibold rounded-lg hover:bg-amber-800 dark:hover:bg-amber-700 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-opacity-75 transition duration-300">
Add to Cart
</button>
</div>
</div>
</div>
<!-- Product Card 8 -->
<div class="flex flex-col rounded-xl overflow-hidden shadow-lg transform transition-transform duration-300 hover:scale-105 bg-stone-200 dark:bg-stone-800 border border-stone-300 dark:border-stone-700">
<div class="relative pb-[75%] overflow-hidden">
<img class="absolute inset-0 w-full h-full object-cover" src="https://picsum.photos/id/1021/600/400" alt="Product Image 8">
<div class="absolute top-4 right-4 bg-emerald-600/80 dark:bg-emerald-500/80 text-white text-xs font-semibold px-3 py-1 rounded-full">In Stock</div>
</div>
<div class="p-6 flex flex-col flex-grow">
<h3 class="text-xl font-bold text-stone-800 dark:text-stone-200 mb-2 truncate">Organic Scented Candle</h3>
<p class="text-sm text-stone-600 dark:text-stone-400 mb-4 flex-grow line-clamp-3">Eco-friendly candle made with natural waxes and essential oils for a calming aroma.</p>
<div class="flex items-center justify-between mt-auto pt-2 border-t border-stone-300 dark:border-stone-700">
<span class="text-2xl font-extrabold text-stone-700 dark:text-stone-300">$34.99</span>
<button class="px-5 py-2 bg-amber-700 dark:bg-amber-600 text-white dark:text-stone-100 font-semibold rounded-lg hover:bg-amber-800 dark:hover:bg-amber-700 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-opacity-75 transition duration-300">
Add to Cart
</button>
</div>
</div>
</div>
</div>
<div class="mt-12 text-center">
<button class="inline-flex items-center px-8 py-3 bg-stone-700 dark:bg-stone-600 text-white font-semibold text-lg rounded-lg shadow-lg hover:bg-stone-800 dark:hover:bg-stone-700 transition duration-300 focus:outline-none focus:ring-2 focus:ring-stone-500 focus:ring-opacity-75">
View All Products
<svg class="ml-2 -mr-1 w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L12.586 11H5a1 1 0 110-2h7.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
</button>
</div>
</div>
</section>Verwandte Komponenten
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.
Komponente "Produktgalerie"
Glassmorphism Product Gallery Component mit responsiven Effekten und Unterstützung für dunkle Themen.
Watercolor_Artistic_Dating_Product_Gallery
Eine komplexe, reaktionsschnelle Produktgalerie-Komponente mit einem "Aquarell/Künstlerisch"-Designstil und einem "Süßigkeiten/Süß"-Farbschema, geeignet für Dating- und Social-Media-Plattformen. Bietet mehrere interaktive Elemente, Unterstützung für den Dunkelmodus und semantisches HTML.