Product Gallery Component
A responsive product gallery component with a paper/print-inspired design, warm neutrals color scheme, and dark mode support, suitable for entertainment/media platforms.
HTML Code
<div class="p-4 sm:p-8 bg-gradient-to-br from-stone-100 to-stone-200 dark:from-stone-800 dark:to-stone-900 font-sans">
<div class="max-w-7xl mx-auto">
<h2 class="text-4xl sm:text-5xl font-bold text-center mb-12 relative text-stone-800 dark:text-stone-200 leading-tight tracking-tight">
Featured Releases
<span class="block w-24 h-1.5 bg-yellow-600 dark:bg-yellow-400 mx-auto mt-4 rounded-full"></span>
</h2>
<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="group relative overflow-hidden bg-white dark:bg-stone-700 rounded-lg shadow-xl hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-1 border border-stone-300 dark:border-stone-600 print-effect">
<img src="https://picsum.photos/id/1025/400/300" alt="Product Image" loading="lazy" class="w-full h-48 object-cover rounded-t-lg transition-transform duration-300 group-hover:scale-105">
<div class="p-6">
<h3 class="text-xl font-semibold mb-2 text-stone-900 dark:text-stone-100">The Echoing Abyss</h3>
<p class="text-sm text-stone-600 dark:text-stone-300 mb-4 line-clamp-2">Immerse yourself in a gripping narrative of mystery and suspense. A true cinematic masterpiece.</p>
<div class="flex items-center justify-between mb-4">
<span class="text-2xl font-bold text-yellow-700 dark:text-yellow-400">$19.99</span>
<div class="flex space-x-1">
<span class="text-yellow-500 dark:text-yellow-400">★</span>
<span class="text-yellow-500 dark:text-yellow-400">★</span>
<span class="text-yellow-500 dark:text-yellow-400">★</span>
<span class="text-yellow-500 dark:text-yellow-400">★</span>
<span class="text-stone-400 dark:text-stone-500">★</span>
</div>
</div>
<button class="w-full bg-yellow-600 hover:bg-yellow-700 text-white font-semibold py-3 px-4 rounded-md transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:ring-opacity-75 dark:bg-yellow-500 dark:hover:bg-yellow-600">
View Details
</button>
</div>
<div class="absolute top-0 right-0 p-2 bg-yellow-600 dark:bg-yellow-500 text-white text-xs font-bold rounded-bl-lg animate-pulse-once">
New
</div>
</div>
<!-- Product Card 2 -->
<div class="group relative overflow-hidden bg-white dark:bg-stone-700 rounded-lg shadow-xl hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-1 border border-stone-300 dark:border-stone-600 print-effect">
<img src="https://picsum.photos/id/1018/400/300" alt="Product Image" loading="lazy" class="w-full h-48 object-cover rounded-t-lg transition-transform duration-300 group-hover:scale-105">
<div class="p-6">
<h3 class="text-xl font-semibold mb-2 text-stone-900 dark:text-stone-100">Whispers of the Stars</h3>
<p class="text-sm text-stone-600 dark:text-stone-300 mb-4 line-clamp-2">An epic journey through cosmic wonders and ancient prophecies. Visually stunning!</p>
<div class="flex items-center justify-between mb-4">
<span class="text-2xl font-bold text-yellow-700 dark:text-yellow-400">$24.99</span>
<div class="flex space-x-1">
<span class="text-yellow-500 dark:text-yellow-400">★</span>
<span class="text-yellow-500 dark:text-yellow-400">★</span>
<span class="text-yellow-500 dark:text-yellow-400">★</span>
<span class="text-yellow-500 dark:text-yellow-400">★</span>
<span class="text-yellow-500 dark:text-yellow-400">★</span>
</div>
</div>
<button class="w-full bg-yellow-600 hover:bg-yellow-700 text-white font-semibold py-3 px-4 rounded-md transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:ring-opacity-75 dark:bg-yellow-500 dark:hover:bg-yellow-600">
Pre-order Now
</button>
</div>
<div class="absolute top-0 right-0 p-2 bg-purple-600 dark:bg-purple-500 text-white text-xs font-bold rounded-bl-lg animate-pulse-once">
Pre-order
</div>
</div>
<!-- Product Card 3 -->
<div class="group relative overflow-hidden bg-white dark:bg-stone-700 rounded-lg shadow-xl hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-1 border border-stone-300 dark:border-stone-600 print-effect">
<img src="https://picsum.photos/id/10/400/300" alt="Product Image" loading="lazy" class="w-full h-48 object-cover rounded-t-lg transition-transform duration-300 group-hover:scale-105">
<div class="p-6">
<h3 class="text-xl font-semibold mb-2 text-stone-900 dark:text-stone-100">Lost in the Glitch</h3>
<p class="text-sm text-stone-600 dark:text-stone-300 mb-4 line-clamp-2">A mind-bending sci-fi thriller exploring virtual realities and forgotten memories.</p>
<div class="flex items-center justify-between mb-4">
<span class="text-2xl font-bold text-yellow-700 dark:text-yellow-400">$16.50</span>
<div class="flex space-x-1">
<span class="text-yellow-500 dark:text-yellow-400">★</span>
<span class="text-yellow-500 dark:text-yellow-400">★</span>
<span class="text-yellow-500 dark:text-yellow-400">★</span>
<span class="text-stone-400 dark:text-stone-500">★</span>
<span class="text-stone-400 dark:text-stone-500">★</span>
</div>
</div>
<button class="w-full bg-yellow-600 hover:bg-yellow-700 text-white font-semibold py-3 px-4 rounded-md transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:ring-opacity-75 dark:bg-yellow-500 dark:hover:bg-yellow-600">
Add to Cart
</button>
</div>
</div>
<!-- Product Card 4 -->
<div class="group relative overflow-hidden bg-white dark:bg-stone-700 rounded-lg shadow-xl hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-1 border border-stone-300 dark:border-stone-600 print-effect">
<img src="https://picsum.photos/id/1060/400/300" alt="Product Image" loading="lazy" class="w-full h-48 object-cover rounded-t-lg transition-transform duration-300 group-hover:scale-105">
<div class="p-6">
<h3 class="text-xl font-semibold mb-2 text-stone-900 dark:text-stone-100">Chronicles of Eldoria</h3>
<p class="text-sm text-stone-600 dark:text-stone-300 mb-4 line-clamp-2">A classic fantasy adventure, now remastered in breathtaking 4K UHD. Limited Edition!</p>
<div class="flex items-center justify-between mb-4">
<span class="text-2xl font-bold text-yellow-700 dark:text-yellow-400">$29.99</span>
<div class="flex space-x-1">
<span class="text-yellow-500 dark:text-yellow-400">★</span>
<span class="text-yellow-500 dark:text-yellow-400">★</span>
<span class="text-yellow-500 dark:text-yellow-400">★</span>
<span class="text-yellow-500 dark:text-yellow-400">★</span>
<span class="text-stone-400 dark:text-stone-500">★</span>
</div>
</div>
<button class="w-full bg-yellow-600 hover:bg-yellow-700 text-white font-semibold py-3 px-4 rounded-md transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:ring-opacity-75 dark:bg-yellow-500 dark:hover:bg-yellow-600">
Buy Now
</button>
</div>
<div class="absolute top-0 right-0 p-2 bg-red-600 dark:bg-red-500 text-white text-xs font-bold rounded-bl-lg animate-pulse-once">
Limited
</div>
</div>
</div>
<div class="mt-16 text-center">
<button class="px-8 py-4 bg-yellow-600 hover:bg-yellow-700 text-white text-lg font-semibold rounded-full shadow-lg hover:shadow-xl transition-all duration-300 focus:outline-none focus:ring-4 focus:ring-yellow-500 focus:ring-opacity-75 dark:bg-yellow-500 dark:hover:bg-yellow-600 dark:focus:ring-yellow-400">
Explore All Products
</button>
</div>
</div>
</div>
<style>
/* Simple 'paper curl' effect for cards (optional, for visual flair) */
.print-effect {
position: relative;
/* filter: drop-shadow(2px 4px 6px rgba(0,0,0,0.1)); */
}
.print-effect::before {
content: '';
position: absolute;
bottom: -5px;
left: 5%;
width: 90%;
height: 10px;
background: rgba(0,0,0,0.05);
border-radius: 50%;
filter: blur(4px);
z-index: -1;
transition: transform 0.3s ease-out;
}
.print-effect:hover::before {
transform: scale(1.05);
background: rgba(0,0,0,0.1);
}
/* Custom animation for badges */
@keyframes pulse-once {
0% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.05); opacity: 0.9; }
100% { transform: scale(1); opacity: 1; }
}
.animate-pulse-once {
animation: pulse-once 1.2s ease-out 1;
}
</style>Related Components
Product Gallery Component
A product gallery component with a brutalist design, grayscale color scheme, and moderate complexity. It is designed for a dashboard purpose and is responsive with dark theme support.
Product Gallery Component
A complex, responsive product gallery component with a 3D design aesthetic and sepia/brown color scheme, suitable for Technology/SaaS applications. Includes multiple interactive elements and dark mode support.