E-commerce Layout Component
A responsive e-commerce layout component with dark theme support, built with Tailwind CSS following Material Design principles. It includes a navigation bar, a main content area with product listings, and a footer. The color scheme is pastel.
HTML Code
<div class="min-h-screen bg-pastel-100 dark:bg-pastel-900">
<!-- Navigation Bar -->
<nav class="bg-pastel-200 dark:bg-pastel-800 shadow">
<div class="container mx-auto px-6 py-3">
<div class="flex items-center justify-between">
<div class="text-pastel-900 dark:text-pastel-100 font-semibold text-xl">My E-commerce</div>
<div class="flex items-center space-x-4">
<a href="#" class="text-pastel-900 dark:text-pastel-100 hover:text-pastel-700 dark:hover:text-pastel-300">Home</a>
<a href="#" class="text-pastel-900 dark:text-pastel-100 hover:text-pastel-700 dark:hover:text-pastel-300">Shop</a>
<a href="#" class="text-pastel-900 dark:text-pastel-100 hover:text-pastel-700 dark:hover:text-pastel-300">Cart</a>
</div>
</div>
</div>
</nav>
<!-- Main Content Area -->
<main class="container mx-auto mt-6 px-6 py-3">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Product Card (Repeat this block for multiple products) -->
<div class="bg-white dark:bg-pastel-800 rounded-lg shadow-lg overflow-hidden">
<img class="w-full h-48 object-cover" src="https://picsum.photos/seed/product1/300/200" alt="Product Image">
<div class="p-4">
<h3 class="text-pastel-900 dark:text-pastel-100 font-semibold text-lg mb-2">Product Name</h3>
<p class="text-pastel-700 dark:text-pastel-300 text-sm mb-4">This is a brief description of the product.</p>
<div class="flex items-center justify-between">
<span class="text-pastel-900 dark:text-pastel-100 font-bold text-xl">$19.99</span>
<button class="bg-pastel-500 hover:bg-pastel-600 text-white font-bold py-2 px-4 rounded">Add to Cart</button>
</div>
</div>
</div>
<!-- End Product Card -->
<!-- Example of another product card -->
<div class="bg-white dark:bg-pastel-800 rounded-lg shadow-lg overflow-hidden">
<img class="w-full h-48 object-cover" src="https://picsum.photos/seed/product2/300/200" alt="Product Image">
<div class="p-4">
<h3 class="text-pastel-900 dark:text-pastel-100 font-semibold text-lg mb-2">Another Product</h3>
<p class="text-pastel-700 dark:text-pastel-300 text-sm mb-4">This is a brief description of another product.</p>
<div class="flex items-center justify-between">
<span class="text-pastel-900 dark:text-pastel-100 font-bold text-xl">$25.00</span>
<button class="bg-pastel-500 hover:bg-pastel-600 text-white font-bold py-2 px-4 rounded">Add to Cart</button>
</div>
</div>
</div>
</div>
</main>
<!-- Footer -->
<footer class="bg-pastel-200 dark:bg-pastel-800 mt-6 py-6">
<div class="container mx-auto text-center text-pastel-900 dark:text-pastel-100">
<p>© 2023 My E-commerce. All rights reserved.</p>
</div>
</footer>
</div>Related Components
Dark Mode Layout Component
A responsive layout component with dark mode support using Tailwind CSS. Features a simple header, content area, and footer. Dark mode is handled by the `dark:` prefix in Tailwind classes.
E-commerce Layout with 3D Design
A responsive web component layout for e-commerce with 3D design elements, incorporating a complementary color scheme and dark theme support. It features product cards, a navigation bar, and a footer, all styled with Tailwind CSS.
Portfolio Layout
A simple responsive layout component for a portfolio focusing on microinteractions with complementary colors, dark mode support, and minimal elements.