Container Component
A responsive Material Design container for e-commerce, with pastel colors, dark mode support, and complex interactive elements using Tailwind CSS.
HTML Code
<div class="min-h-screen bg-gradient-to-br from-purple-50 to-pink-100 dark:from-gray-900 dark:to-gray-800 p-8 flex items-center justify-center">
<div class="shadow-2xl rounded-3xl overflow-hidden max-w-6xl w-full bg-white dark:bg-gray-700 transition-all duration-300 transform hover:scale-[1.01] hover:shadow-purple-400/30 dark:hover:shadow-pink-400/20">
<div class="md:flex">
<!-- Product Image Section -->
<div class="md:flex-shrink-0 md:w-1/2 relative">
<img class="w-full h-96 object-cover object-center transform transition-transform duration-500 hover:scale-105" src="https://picsum.photos/seed/picsum/600/400" alt="Product Image">
<div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
<div class="absolute bottom-0 left-0 p-6">
<h1 class="text-4xl font-extrabold text-white mb-2">Premium Gadget Pro</h1>
<p class="text-purple-200 text-lg">Unleash your potential with unparalleled performance.</p>
</div>
<span class="absolute top-4 left-4 bg-purple-500 text-white text-sm font-bold px-3 py-1 rounded-full shadow-lg">NEW ARRIVAL</span>
</div>
<!-- Product Details Section -->
<div class="p-8 md:w-1/2 flex flex-col justify-between">
<div>
<span class="text-sm text-purple-600 dark:text-purple-300 font-semibold mb-2 block">Electronics > Smartphones</span>
<h2 class="text-4xl font-bold text-gray-800 dark:text-white mb-4">Flagship Smartphone X</h2>
<p class="text-gray-600 dark:text-gray-300 leading-relaxed mb-6">Experience cutting-edge technology with our revolutionary smartphone. Featuring a stunning display, an advanced camera system, and all-day battery life.</p>
<div class="flex items-center mb-6">
<span class="text-5xl font-extrabold text-purple-700 dark:text-purple-300 mr-3">$999</span>
<span class="text-xl text-gray-400 line-through">$1200</span>
<span class="ml-3 bg-green-200 text-green-800 text-sm font-bold px-3 py-1 rounded-full">17% OFF</span>
</div>
<!-- Color Options -->
<div class="mb-6">
<h3 class="text-lg font-semibold text-gray-800 dark:text-white mb-3">Color:</h3>
<div class="flex space-x-3">
<button class="w-10 h-10 rounded-full bg-blue-500 border-4 border-purple-400 focus:outline-none focus:ring-4 focus:ring-blue-300 transition-all duration-200"></button>
<button class="w-10 h-10 rounded-full bg-pink-500 border-2 border-transparent hover:border-purple-400 focus:outline-none focus:ring-4 focus:ring-pink-300 transition-all duration-200"></button>
<button class="w-10 h-10 rounded-full bg-gray-800 border-2 border-transparent hover:border-purple-400 focus:outline-none focus:ring-4 focus:ring-gray-600 transition-all duration-200"></button>
</div>
</div>
<!-- Quantity Selector -->
<div class="mb-8">
<h3 class="text-lg font-semibold text-gray-800 dark:text-white mb-3">Quantity:</h3>
<div class="flex items-center space-x-3">
<button class="bg-gray-200 dark:bg-gray-600 text-gray-700 dark:text-white p-2 rounded-lg hover:bg-gray-300 dark:hover:bg-gray-500 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-purple-400">-</button>
<span class="text-xl font-bold text-gray-800 dark:text-white">1</span>
<button class="bg-gray-200 dark:bg-gray-600 text-gray-700 dark:text-white p-2 rounded-lg hover:bg-gray-300 dark:hover:bg-gray-500 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-purple-400">+</button>
</div>
</div>
</div>
<!-- Call to Action Buttons -->
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
<button class="bg-purple-600 hover:bg-purple-700 text-white font-bold py-3 px-6 rounded-xl shadow-lg transform hover:scale-105 transition-all duration-200 focus:outline-none focus:ring-4 focus:ring-purple-300">Add to Cart</button>
<button class="bg-pink-500 hover:bg-pink-600 text-white font-bold py-3 px-6 rounded-xl shadow-lg transform hover:scale-105 transition-all duration-200 focus:outline-none focus:ring-4 focus:ring-pink-300">Buy Now</button>
</div>
</div>
</div>
<!-- Customer Reviews Section -->
<div class="p-8 border-t border-gray-200 dark:border-gray-600">
<h3 class="text-2xl font-bold text-gray-800 dark:text-white mb-6">Customer Reviews</h3>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Review Card 1 -->
<div class="bg-gray-50 dark:bg-gray-600 p-6 rounded-2xl shadow-md transition-all duration-200 transform hover:scale-[1.02] hover:shadow-lg">
<div class="flex items-center mb-4">
<img class="w-12 h-12 rounded-full mr-4 object-cover" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
<div>
<p class="font-semibold text-gray-800 dark:text-white">Jane Doe</p>
<div class="flex text-yellow-400 text-sm">
<i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star-half-alt"></i>
</div>
</div>
</div>
<p class="text-gray-600 dark:text-gray-200 leading-relaxed">
"Absolutely love this product! The camera is incredible and the battery lasts forever. Highly recommend it to everyone."
</p>
</div>
<!-- Review Card 2 -->
<div class="bg-gray-50 dark:bg-gray-600 p-6 rounded-2xl shadow-md transition-all duration-200 transform hover:scale-[1.02] hover:shadow-lg">
<div class="flex items-center mb-4">
<img class="w-12 h-12 rounded-full mr-4 object-cover" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
<div>
<p class="font-semibold text-gray-800 dark:text-white">John Smith</p>
<div class="flex text-yellow-400 text-sm">
<i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i>
</div>
</div>
</div>
<p class="text-gray-600 dark:text-gray-200 leading-relaxed">
"Fast shipping and the phone exceeded my expectations. So smooth and powerful. Best purchase this year!"
</p>
</div>
<!-- Review Card 3 -->
<div class="bg-gray-50 dark:bg-gray-600 p-6 rounded-2xl shadow-md transition-all duration-200 transform hover:scale-[1.02] hover:shadow-lg">
<div class="flex items-center mb-4">
<img class="w-12 h-12 rounded-full mr-4 object-cover" src="https://randomuser.me/api/portraits/women/76.jpg" alt="User Avatar">
<div>
<p class="font-semibold text-gray-800 dark:text-white">Emily White</p>
<div class="flex text-yellow-400 text-sm">
<i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="far fa-star"></i>
</div>
</div>
</div>
<p class="text-gray-600 dark:text-gray-200 leading-relaxed">
"Great phone, though it took a bit to get used to the new OS. Still, fantastic performance and beautiful design."
</p>
</div>
</div>
</div>
<!-- Related Products Section -->
<div class="p-8 border-t border-gray-200 dark:border-gray-600">
<h3 class="text-2xl font-bold text-gray-800 dark:text-white mb-6">Related Products</h3>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
<!-- Related Product Card 1 -->
<div class="bg-gray-50 dark:bg-gray-600 rounded-2xl shadow-md overflow-hidden transition-all duration-200 transform hover:scale-[1.03] hover:shadow-lg">
<img class="w-full h-48 object-cover" src="https://picsum.photos/seed/related1/400/300" alt="Related Product">
<div class="p-4">
<h4 class="font-semibold text-gray-800 dark:text-white mb-1">Wireless Headphones</h4>
<p class="text-sm text-gray-600 dark:text-gray-300 mb-2">Immersive audio experience.</p>
<p class="text-lg font-bold text-purple-700 dark:text-purple-300">$149</p>
<button class="mt-4 w-full bg-purple-500 text-white py-2 rounded-lg text-sm hover:bg-purple-600 focus:outline-none focus:ring-2 focus:ring-purple-400 transition-colors duration-200">View Details</button>
</div>
</div>
<!-- Related Product Card 2 -->
<div class="bg-gray-50 dark:bg-gray-600 rounded-2xl shadow-md overflow-hidden transition-all duration-200 transform hover:scale-[1.03] hover:shadow-lg">
<img class="w-full h-48 object-cover" src="https://picsum.photos/seed/related2/400/300" alt="Related Product">
<div class="p-4">
<h4 class="font-semibold text-gray-800 dark:text-white mb-1">Smartwatch Elite</h4>
<p class="text-sm text-gray-600 dark:text-gray-300 mb-2">Track your fitness and stay connected.</p>
<p class="text-lg font-bold text-purple-700 dark:text-purple-300">$299</p>
<button class="mt-4 w-full bg-purple-500 text-white py-2 rounded-lg text-sm hover:bg-purple-600 focus:outline-none focus:ring-2 focus:ring-purple-400 transition-colors duration-200">View Details</button>
</div>
</div>
<!-- Related Product Card 3 -->
<div class="bg-gray-50 dark:bg-gray-600 rounded-2xl shadow-md overflow-hidden transition-all duration-200 transform hover:scale-[1.03] hover:shadow-lg">
<img class="w-full h-48 object-cover" src="https://picsum.photos/seed/related3/400/300" alt="Related Product">
<div class="p-4">
<h4 class="font-semibold text-gray-800 dark:text-white mb-1">Portable Power Bank</h4>
<p class="text-sm text-gray-600 dark:text-gray-300 mb-2">Never run out of battery.</p>
<p class="text-lg font-bold text-purple-700 dark:text-purple-300">$59</p>
<button class="mt-4 w-full bg-purple-500 text-white py-2 rounded-lg text-sm hover:bg-purple-600 focus:outline-none focus:ring-2 focus:ring-purple-400 transition-colors duration-200">View Details</button>
</div>
</div>
<!-- Related Product Card 4 -->
<div class="bg-gray-50 dark:bg-gray-600 rounded-2xl shadow-md overflow-hidden transition-all duration-200 transform hover:scale-[1.03] hover:shadow-lg">
<img class="w-full h-48 object-cover" src="https://picsum.photos/seed/related4/400/300" alt="Related Product">
<div class="p-4">
<h4 class="font-semibold text-gray-800 dark:text-white mb-1">Noise-Cancelling Earbuds</h4>
<p class="text-sm text-gray-600 dark:text-gray-300 mb-2">Pure sound, no distractions.</p>
<p class="text-lg font-bold text-purple-700 dark:text-purple-300">$199</p>
<button class="mt-4 w-full bg-purple-500 text-white py-2 rounded-lg text-sm hover:bg-purple-600 focus:outline-none focus:ring-2 focus:ring-purple-400 transition-colors duration-200">View Details</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Font Awesome for icons (optional) -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">Related Components
Container Component
A retro/vintage styled container component for portfolios, with a monochromatic color scheme and dark mode support.
Glassmorphism Container Component
A responsive Glassmorphism Container Component with a triadic color scheme, designed for portfolios. Supports dark mode.
Skeuomorphic_E-commerce_Container
Skeuomorphic E-commerce Container Component in Pastel tones with Dark Mode support