3D Gallery Component
A complex responsive 3D gallery component designed for e-commerce, featuring a dark theme and a complementary color scheme.
HTML Code
<div class="max-w-7xl mx-auto p-6">
<h2 class="text-3xl font-bold text-center mb-6 text-gray-900 dark:text-white">3D Gallery Component</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Card 1 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg transform transition-transform hover:scale-105 p-4">
<div class="relative h-48 mb-4 overflow-hidden rounded-lg">
<img src="https://picsum.photos/300/200?random=1" alt="Product Image" class="w-full h-full object-cover rounded-lg shadow-md"/>
<div class="absolute top-2 left-2 bg-blue-600 text-white text-sm px-2 py-1 rounded">New</div>
</div>
<h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Product Title 1</h3>
<p class="mt-2 text-gray-600 dark:text-gray-400">Short description of the product goes here.</p>
<div class="mt-4 flex items-center justify-between">
<span class="text-lg font-bold text-gray-900 dark:text-gray-100">$49.99</span>
<button class="bg-blue-600 text-white px-4 py-2 rounded transition duration-300 hover:bg-blue-700">Add to Cart</button>
</div>
</div>
<!-- Card 2 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg transform transition-transform hover:scale-105 p-4">
<div class="relative h-48 mb-4 overflow-hidden rounded-lg">
<img src="https://picsum.photos/300/200?random=2" alt="Product Image" class="w-full h-full object-cover rounded-lg shadow-md"/>
<div class="absolute top-2 left-2 bg-green-600 text-white text-sm px-2 py-1 rounded">Sale</div>
</div>
<h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Product Title 2</h3>
<p class="mt-2 text-gray-600 dark:text-gray-400">Short description of the product goes here.</p>
<div class="mt-4 flex items-center justify-between">
<span class="text-lg font-bold text-gray-900 dark:text-gray-100">$39.99</span>
<button class="bg-green-600 text-white px-4 py-2 rounded transition duration-300 hover:bg-green-700">Add to Cart</button>
</div>
</div>
<!-- Card 3 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg transform transition-transform hover:scale-105 p-4">
<div class="relative h-48 mb-4 overflow-hidden rounded-lg">
<img src="https://picsum.photos/300/200?random=3" alt="Product Image" class="w-full h-full object-cover rounded-lg shadow-md"/>
<div class="absolute top-2 left-2 bg-red-600 text-white text-sm px-2 py-1 rounded">Featured</div>
</div>
<h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Product Title 3</h3>
<p class="mt-2 text-gray-600 dark:text-gray-400">Short description of the product goes here.</p>
<div class="mt-4 flex items-center justify-between">
<span class="text-lg font-bold text-gray-900 dark:text-gray-100">$29.99</span>
<button class="bg-red-600 text-white px-4 py-2 rounded transition duration-300 hover:bg-red-700">Add to Cart</button>
</div>
</div>
<!-- Card 4 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg transform transition-transform hover:scale-105 p-4">
<div class="relative h-48 mb-4 overflow-hidden rounded-lg">
<img src="https://picsum.photos/300/200?random=4" alt="Product Image" class="w-full h-full object-cover rounded-lg shadow-md"/>
<div class="absolute top-2 left-2 bg-purple-600 text-white text-sm px-2 py-1 rounded">Exclusive</div>
</div>
<h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Product Title 4</h3>
<p class="mt-2 text-gray-600 dark:text-gray-400">Short description of the product goes here.</p>
<div class="mt-4 flex items-center justify-between">
<span class="text-lg font-bold text-gray-900 dark:text-gray-100">$59.99</span>
<button class="bg-purple-600 text-white px-4 py-2 rounded transition duration-300 hover:bg-purple-700">Add to Cart</button>
</div>
</div>
<!-- Card 5 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg transform transition-transform hover:scale-105 p-4">
<div class="relative h-48 mb-4 overflow-hidden rounded-lg">
<img src="https://picsum.photos/300/200?random=5" alt="Product Image" class="w-full h-full object-cover rounded-lg shadow-md"/>
<div class="absolute top-2 left-2 bg-orange-600 text-white text-sm px-2 py-1 rounded">Popular</div>
</div>
<h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Product Title 5</h3>
<p class="mt-2 text-gray-600 dark:text-gray-400">Short description of the product goes here.</p>
<div class="mt-4 flex items-center justify-between">
<span class="text-lg font-bold text-gray-900 dark:text-gray-100">$19.99</span>
<button class="bg-orange-600 text-white px-4 py-2 rounded transition duration-300 hover:bg-orange-700">Add to Cart</button>
</div>
</div>
<!-- Card 6 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg transform transition-transform hover:scale-105 p-4">
<div class="relative h-48 mb-4 overflow-hidden rounded-lg">
<img src="https://picsum.photos/300/200?random=6" alt="Product Image" class="w-full h-full object-cover rounded-lg shadow-md"/>
<div class="absolute top-2 left-2 bg-teal-600 text-white text-sm px-2 py-1 rounded">Limited</div>
</div>
<h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Product Title 6</h3>
<p class="mt-2 text-gray-600 dark:text-gray-400">Short description of the product goes here.</p>
<div class="mt-4 flex items-center justify-between">
<span class="text-lg font-bold text-gray-900 dark:text-gray-100">$99.99</span>
<button class="bg-teal-600 text-white px-4 py-2 rounded transition duration-300 hover:bg-teal-700">Add to Cart</button>
</div>
</div>
</div>
</div>Related Components
Neumorphism Gallery Component
A responsive Neumorphic gallery component with dark mode support. Images are placeholders from picsum.photos and avatars from randomuser.me.
Gallery Component
A simple, responsive image gallery component designed for business/corporate websites, featuring a triadic color scheme inspired by Material Design principles. It includes a dark theme for user preference and uses a grid-based layout.
Event_Gallery_Component
A responsive gallery component for event and conference websites, featuring jewel tones, color gradients, smooth transitions, and dark mode support. It showcases event highlights or speaker images in a visually engaging grid.