电子商务布局组件
一个响应式电子商务布局组件，支持暗黑主题，基于Tailwind CSS构建，遵循材料设计原则。它包括导航栏、带有产品列表的主要内容区域和页脚。色调为柔和。
HTML 代码
<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>