Product Gallery Component
A complex, paper/print-inspired product gallery component with complementary colors, designed for content consumption like a blog, featuring rich details, responsiveness, and dark mode support.
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>Related Components
Product Gallery Component
A responsive product gallery component designed for dark mode, featuring images and avatars with Tailwind CSS.
LuxuryMonochromaticProductGallery
A simple, elegant product gallery component with a monochromatic color scheme, designed for music/audio platforms. Features full responsiveness and dark mode support.