E-commerce Components Component
A responsive e-commerce component with microinteractions, analogous color scheme, and dark theme support.
HTML Code
<div class="container mx-auto p-4 dark:bg-gray-800">
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
<!-- Product 1 -->
<div class="bg-white rounded-lg shadow-md overflow-hidden transform transition duration-500 hover:scale-105 dark:bg-gray-700">
<img src="https://picsum.photos/600/400" alt="Product Image" class="w-full h-64 object-cover">
<div class="p-4">
<h3 class="text-xl font-bold mb-2 text-gray-800 dark:text-white">Product Title</h3>
<p class="text-gray-600 text-sm mb-4 dark:text-gray-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<div class="flex items-center justify-between">
<span class="text-2xl font-bold text-blue-600 dark:text-blue-400">$99.99</span>
<button class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 transition duration-300 dark:bg-blue-700 dark:hover:bg-blue-600">Add to Cart</button>
</div>
</div>
</div>
<!-- Product 2 (similar structure) -->
<div class="bg-white rounded-lg shadow-md overflow-hidden transform transition duration-500 hover:scale-105 dark:bg-gray-700">
<img src="https://picsum.photos/600/400" alt="Product Image" class="w-full h-64 object-cover">
<div class="p-4">
<h3 class="text-xl font-bold mb-2 text-gray-800 dark:text-white">Product Title</h3>
<p class="text-gray-600 text-sm mb-4 dark:text-gray-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<div class="flex items-center justify-between">
<span class="text-2xl font-bold text-blue-600 dark:text-blue-400">$99.99</span>
<button class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 transition duration-300 dark:bg-blue-700 dark:hover:bg-blue-600">Add to Cart</button>
</div>
</div>
</div>
</div>
</div>Related Components
E-commerce Components
A brutalist-style E-commerce component featuring bold design, high contrast, and a responsive layout with dark mode support.
E-commerce Components Component
A brutalist e-commerce component for a blog, featuring a vibrant color scheme and moderate complexity. It includes a responsive design with dark theme support using Tailwind CSS.
E-commerce Components Component - Documentation/Wiki Style
A complex, responsive E-commerce component 'Documentation/Wiki' featuring soft, painted textures and artistic elements with a candy/sweet color scheme (bubblegum pink, mint green). Includes dark mode support and interactive elements for a documentation or knowledge base site.