Komponente "Produktgalerie"
Eine komplexe, von Papier und Druck inspirierte Produktgaleriekomponente mit Komplementärfarben, die für den Konsum von Inhalten wie in einem Blog entwickelt wurde und umfangreiche Details, Reaktionsfähigkeit und Unterstützung für den Dunkelmodus bietet.
HTML-Code
<div class="font-sans antialiased bg-gray-100 text-gray-900 dark:bg-gray-900 dark:text-gray-100 p-4 sm:p-8 md:p-12">
<!-- Component Wrapper -->
<div class="max-w-7xl mx-auto py-8 lg:py-16">
<!-- Header Section -->
<div class="text-center mb-12">
<h2 class="text-4xl sm:text-5xl font-extrabold text-blue-800 dark:text-orange-300 tracking-tight leading-tight mb-4 filter drop-shadow animate-fade-in-down">
Featured Collection
</h2>
<p class="text-lg text-gray-600 dark:text-gray-400 max-w-2xl mx-auto leading-relaxed animate-fade-in-up">
Discover our handcrafted selections, inspired by timeless artistry and sustainable practices.
</p>
</div>
<!-- Gallery Grid -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8">
<!-- Product Card 1 -->
<article class="bg-white dark:bg-gray-850 rounded-lg shadow-xl shadow-gray-200/50 dark:shadow-black/30 overflow-hidden transform transition-all duration-300 hover:scale-102 hover:shadow-2xl hover:shadow-gray-300/60 dark:hover:shadow-black/50 border border-gray-200 dark:border-gray-700 animate-slide-in-left">
<div class="relative pb-[75%] overflow-hidden">
<img src="https://picsum.photos/id/1018/600/400" alt="Vintage Typewriter" class="absolute inset-0 w-full h-full object-cover transition-transform duration-500 hover:scale-105">
<span class="absolute top-3 left-3 bg-red-600 text-white text-xs font-semibold px-2 py-1 rounded-full shadow-md">New Arrival</span>
</div>
<div class="p-6">
<h3 class="text-xl font-bold text-blue-900 dark:text-orange-200 mb-2 leading-tight">"Whispering Keys" Typewriter</h3>
<p class="text-gray-700 dark:text-gray-300 text-sm mb-4 leading-relaxed line-clamp-3">A beautifully restored vintage typewriter, perfect for the wordsmith in your life. Each click tells a story.</p>
<div class="flex items-center justify-between mb-4">
<span class="text-2xl font-extrabold text-orange-600 dark:text-orange-400">$450.00</span>
<div class="flex items-center">
<span class="text-yellow-500 mr-1">★</span>
<span class="text-gray-600 dark:text-gray-400 text-sm">4.8 (120 reviews)</span>
</div>
</div>
<a href="#" class="block w-full text-center bg-blue-700 hover:bg-blue-800 dark:bg-orange-500 dark:hover:bg-orange-600 text-white font-semibold py-3 px-4 rounded-lg transition-colors duration-200 shadow-md transform hover:translate-y-0.5">
View Details
</a>
</div>
</article>
<!-- Product Card 2 -->
<article class="bg-white dark:bg-gray-850 rounded-lg shadow-xl shadow-gray-200/50 dark:shadow-black/30 overflow-hidden transform transition-all duration-300 hover:scale-102 hover:shadow-2xl hover:shadow-gray-300/60 dark:hover:shadow-black/50 border border-gray-200 dark:border-gray-700 animate-slide-in-right">
<div class="relative pb-[75%] overflow-hidden">
<img src="https://picsum.photos/id/1025/600/400" alt="Leather-bound Journal" class="absolute inset-0 w-full h-full object-cover transition-transform duration-500 hover:scale-105">
<span class="absolute top-3 left-3 bg-green-600 text-white text-xs font-semibold px-2 py-1 rounded-full shadow-md">Eco-Friendly</span>
</div>
<div class="p-6">
<h3 class="text-xl font-bold text-blue-900 dark:text-orange-200 mb-2 leading-tight">"Explorer's" Leather Journal</h3>
<p class="text-gray-700 dark:text-gray-300 text-sm mb-4 leading-relaxed line-clamp-3">Hand-stitched leather journal with acid-free paper, perfect for thoughts, sketches, and adventures.</p>
<div class="flex items-center justify-between mb-4">
<span class="text-2xl font-extrabold text-orange-600 dark:text-orange-400">$85.00</span>
<div class="flex items-center">
<span class="text-yellow-500 mr-1">★</span>
<span class="text-gray-600 dark:text-gray-400 text-sm">4.9 (230 reviews)</span>
</div>
</div>
<a href="#" class="block w-full text-center bg-blue-700 hover:bg-blue-800 dark:bg-orange-500 dark:hover:bg-orange-600 text-white font-semibold py-3 px-4 rounded-lg transition-colors duration-200 shadow-md transform hover:translate-y-0.5">
View Details
</a>
</div>
</article>
<!-- Product Card 3 -->
<article class="bg-white dark:bg-gray-850 rounded-lg shadow-xl shadow-gray-200/50 dark:shadow-black/30 overflow-hidden transform transition-all duration-300 hover:scale-102 hover:shadow-2xl hover:shadow-gray-300/60 dark:hover:shadow-black/50 border border-gray-200 dark:border-gray-700 animate-fade-in-up">
<div class="relative pb-[75%] overflow-hidden">
<img src="https://picsum.photos/id/1033/600/400" alt="Artisan Ceramic Mug" class="absolute inset-0 w-full h-full object-cover transition-transform duration-500 hover:scale-105">
<span class="absolute top-3 left-3 bg-purple-600 text-white text-xs font-semibold px-2 py-1 rounded-full shadow-md">Limited Edition</span>
</div>
<div class="p-6">
<h3 class="text-xl font-bold text-blue-900 dark:text-orange-200 mb-2 leading-tight">"Morning Dew" Ceramic Mug</h3>
<p class="text-gray-700 dark:text-gray-300 text-sm mb-4 leading-relaxed line-clamp-3">Artisan-crafted ceramic mug, unique glaze, perfect for your morning brew or a cozy evening tea.</p>
<div class="flex items-center justify-between mb-4">
<span class="text-2xl font-extrabold text-orange-600 dark:text-orange-400">$45.00</span>
<div class="flex items-center">
<span class="text-yellow-500 mr-1">★</span>
<span class="text-gray-600 dark:text-gray-400 text-sm">4.7 (88 reviews)</span>
</div>
</div>
<a href="#" class="block w-full text-center bg-blue-700 hover:bg-blue-800 dark:bg-orange-500 dark:hover:bg-orange-600 text-white font-semibold py-3 px-4 rounded-lg transition-colors duration-200 shadow-md transform hover:translate-y-0.5">
View Details
</a>
</div>
</article>
<!-- Product Card 4 -->
<article class="bg-white dark:bg-gray-850 rounded-lg shadow-xl shadow-gray-200/50 dark:shadow-black/30 overflow-hidden transform transition-all duration-300 hover:scale-102 hover:shadow-2xl hover:shadow-gray-300/60 dark:hover:shadow-black/50 border border-gray-200 dark:border-gray-700 animate-fade-in-down">
<div class="relative pb-[75%] overflow-hidden">
<img src="https://picsum.photos/id/1040/600/400" alt="Vintage Fountain Pen" class="absolute inset-0 w-full h-full object-cover transition-transform duration-500 hover:scale-105">
<span class="absolute top-3 left-3 bg-blue-600 text-white text-xs font-semibold px-2 py-1 rounded-full shadow-md">Bestseller</span>
</div>
<div class="p-6">
<h3 class="text-xl font-bold text-blue-900 dark:text-orange-200 mb-2 leading-tight">"Inkwell" Fountain Pen</h3>
<p class="text-gray-700 dark:text-gray-300 text-sm mb-4 leading-relaxed line-clamp-3">Elegantly crafted fountain pen, a joy to write with, perfect for calligraphy enthusiasts and professionals.</p>
<div class="flex items-center justify-between mb-4">
<span class="text-2xl font-extrabold text-orange-600 dark:text-orange-400">$120.00</span>
<div class="flex items-center">
<span class="text-yellow-500 mr-1">★</span>
<span class="text-gray-600 dark:text-gray-400 text-sm">4.9 (310 reviews)</span>
</div>
</div>
<a href="#" class="block w-full text-center bg-blue-700 hover:bg-blue-800 dark:bg-orange-500 dark:hover:bg-orange-600 text-white font-semibold py-3 px-4 rounded-lg transition-colors duration-200 shadow-md transform hover:translate-y-0.5">
View Details
</a>
</div>
</article>
<!-- Product Card 5 -->
<article class="bg-white dark:bg-gray-850 rounded-lg shadow-xl shadow-gray-200/50 dark:shadow-black/30 overflow-hidden transform transition-all duration-300 hover:scale-102 hover:shadow-2xl hover:shadow-gray-300/60 dark:hover:shadow-black/50 border border-gray-200 dark:border-gray-700 animate-slide-in-left">
<div class="relative pb-[75%] overflow-hidden">
<img src="https://picsum.photos/id/1044/600/400" alt="Wooden Desk Organizer" class="absolute inset-0 w-full h-full object-cover transition-transform duration-500 hover:scale-105">
<span class="absolute top-3 left-3 bg-yellow-600 text-white text-xs font-semibold px-2 py-1 rounded-full shadow-md">Handmade</span>
</div>
<div class="p-6">
<h3 class="text-xl font-bold text-blue-900 dark:text-orange-200 mb-2 leading-tight">"Artisan" Desk Organizer</h3>
<p class="text-gray-700 dark:text-gray-300 text-sm mb-4 leading-relaxed line-clamp-3">Solid oak desk organizer to declutter your workspace with natural elegance.</p>
<div class="flex items-center justify-between mb-4">
<span class="text-2xl font-extrabold text-orange-600 dark:text-orange-400">$95.00</span>
<div class="flex items-center">
<span class="text-yellow-500 mr-1">★</span>
<span class="text-gray-600 dark:text-gray-400 text-sm">4.6 (95 reviews)</span>
</div>
</div>
<a href="#" class="block w-full text-center bg-blue-700 hover:bg-blue-800 dark:bg-orange-500 dark:hover:bg-orange-600 text-white font-semibold py-3 px-4 rounded-lg transition-colors duration-200 shadow-md transform hover:translate-y-0.5">
View Details
</a>
</div>
</article>
<!-- Product Card 6 -->
<article class="bg-white dark:bg-gray-850 rounded-lg shadow-xl shadow-gray-200/50 dark:shadow-black/30 overflow-hidden transform transition-all duration-300 hover:scale-102 hover:shadow-2xl hover:shadow-gray-300/60 dark:hover:shadow-black/50 border border-gray-200 dark:border-gray-700 animate-slide-in-right">
<div class="relative pb-[75%] overflow-hidden">
<img src="https://picsum.photos/id/1054/600/400" alt="Vintage Camera" class="absolute inset-0 w-full h-full object-cover transition-transform duration-500 hover:scale-105">
<span class="absolute top-3 left-3 bg-teal-600 text-white text-xs font-semibold px-2 py-1 rounded-full shadow-md">Collector's Item</span>
</div>
<div class="p-6">
<h3 class="text-xl font-bold text-blue-900 dark:text-orange-200 mb-2 leading-tight">"Timeless Lens" Vintage Camera</h3>
<p class="text-gray-700 dark:text-gray-300 text-sm mb-4 leading-relaxed line-clamp-3">A classic film camera, meticulously restored, ready to capture new memories with old charm.</p>
<div class="flex items-center justify-between mb-4">
<span class="text-2xl font-extrabold text-orange-600 dark:text-orange-400">$720.00</span>
<div class="flex items-center">
<span class="text-yellow-500 mr-1">★</span>
<span class="text-gray-600 dark:text-gray-400 text-sm">4.9 (75 reviews)</span>
</div>
</div>
<a href="#" class="block w-full text-center bg-blue-700 hover:bg-blue-800 dark:bg-orange-500 dark:hover:bg-orange-600 text-white font-semibold py-3 px-4 rounded-lg transition-colors duration-200 shadow-md transform hover:translate-y-0.5">
View Details
</a>
</div>
</article>
</div>
<!-- Pagination/Load More (Optional) -->
<div class="mt-12 text-center">
<button class="px-8 py-4 bg-blue-600 hover:bg-blue-700 dark:bg-orange-600 dark:hover:bg-orange-700 text-white font-bold rounded-full shadow-lg transition-all duration-300 ease-in-out transform hover:scale-105 active:scale-95 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-orange-800">
Load More Products
</button>
</div>
<!-- Testimonial/Quote Section (to enhance blog/content feel) -->
<div class="mt-20 border-t border-gray-300 dark:border-gray-700 pt-16">
<figure class="max-w-3xl mx-auto bg-blue-50 dark:bg-gray-800 p-8 rounded-lg shadow-inner-xl shadow-gray-200/50 dark:shadow-black/20 text-center relative overflow-hidden">
<blockquote class="text-xl md:text-2xl italic text-gray-800 dark:text-gray-200 leading-relaxed mb-6 relative z-10">
"Every item tells a story, a testament to craftsmanship and passion. Our home feels more authentic with these timeless pieces."
</blockquote>
<figcaption class="flex items-center justify-center space-x-4 relative z-10">
<img src="https://randomuser.me/api/portraits/women/6.jpg" alt="Customer Avatar" class="w-16 h-16 rounded-full border-4 border-orange-400 dark:border-blue-400 shadow-md">
<div>
<cite class="block text-lg font-semibold text-orange-700 dark:text-blue-300 not-italic">Eleanor Vance</cite>
<span class="block text-gray-600 dark:text-gray-400 text-sm">Satisfied Customer</span>
</div>
</figcaption>
<span class="absolute -bottom-10 -right-10 text-9xl font-serif text-blue-100 dark:text-gray-700 opacity-50 select-none">“</span>
<span class="absolute -top-10 -left-10 text-9xl font-serif text-blue-100 dark:text-gray-700 opacity-50 select-none">”</span>
</figure>
</div>
</div>
</div>
<!-- Just for demonstration purposes - Custom Styles for animations and pseudo-elements -->
<style>
@keyframes fadeInDown {
from { opacity: 0; transform: translateY(-20px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInUp {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInLeft {
from { opacity: 0; transform: translateX(-20px); }
to { opacity: 1; transform: translateX(0); }
}
@keyframes fadeInRight {
from { opacity: 0; transform: translateX(20px); }
to { opacity: 1; transform: translateX(0); }
}
.animate-fade-in-down { animation: fadeInDown 0.8s ease-out forwards; }
.animate-fade-in-up { animation: fadeInUp 0.8s ease-out forwards; }
.animate-slide-in-left { animation: fadeInLeft 0.8s ease-out forwards; }
.animate-slide-in-right { animation: fadeInRight 0.8s ease-out forwards; }
/* Stagger animations for better effect */
.grid article:nth-child(1) { animation-delay: 0.1s; }
.grid article:nth-child(2) { animation-delay: 0.2s; }
.grid article:nth-child(3) { animation-delay: 0.3s; }
.grid article:nth-child(4) { animation-delay: 0.4s; }
.grid article:nth-child(5) { animation-delay: 0.5s; }
.grid article:nth-child(6) { animation-delay: 0.6s; }
/* Dark mode specific for testing purposes if not applying to whole page */
/* Use 'dark' class on parent element (e.g., html or body) for actual dark mode activation */
/* .dark .bg-gray-100 { background-color: rgb(17 24 39); } */
/* .dark .text-gray-900 { color: rgb(229 231 235); } */
.dark .bg-gray-850 { background-color: #2a2a2a; /* Slightly lighter than gray-900 for paper texture */ }
/* Pseudo-elements for paper texture (optional, mostly visual flair) */
.bg-white::before,
.bg-white::after,
.dark\:bg-gray-850::before,
.dark\:bg-gray-850::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 0; /* Behind content but above background */
}
.bg-white::before {
background-image: url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%239C92AC' fill-opacity='0.1' fill-rule='evenodd'%3E%3Cpath d='M0 0h3v3H0V0zm3 3h3v3H3V3z'/%3E%3C/g%3E%3C/svg%3E");
opacity: 0.1;
}
.dark\:bg-gray-850::after {
background-image: url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23000000' fill-opacity='0.1' fill-rule='evenodd'%3E%3Cpath d='M0 0h3v3H0V0zm3 3h3v3H3V3z'/%3E%3C/g%3E%3C/svg%3E");
opacity: 0.1;
}
/* Shadow for paper-like elements */
.shadow-inner-xl {
box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05), inset 0 4px 6px 0 rgba(0, 0, 0, 0.03);
}
.dark\:shadow-inner-xl {
box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.3), inset 0 4px 6px 0 rgba(0, 0, 0, 0.2);
}
</style>Verwandte Komponenten
Komponente "Produktgalerie"
Produktgalerie-Komponente, die auf Material Design-Prinzipien basiert, mit responsivem Design und Unterstützung für dunkle Themen. Enthält Platzhalterbilder.
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.
Komponente "Produktgalerie"
Eine einfache, reaktionsschnelle Produktgaleriekomponente mit einem glasmorphischen Designstil, einem Schwarz-Weiß-Farbschema mit einem hellen Akzent, geeignet für Jobbörsen oder Karriereplattformen. Beinhaltet Unterstützung für den Dunkelmodus.