マテリアルデザイン Eコマースコンテナ
製品グリッド、ショッピングカートの概要、ダークテーマのサポートを備えたレスポンシブな e コマースコンテナコンポーネントで、マテリアルデザインの原則とアーストーンの配色を使用して設計されています。画像、タイトル、価格、[カートに追加]ボタンを含む製品カードや、アイテムが追加されると更新されるスティッキーショッピングカートの概要など、複数のインタラクティブな要素を備えています。レイアウトはさまざまな画面サイズに合わせて調整され、すべての要素には Tailwind CSS dark: プレフィックスで定義されたダーク モード スタイルがあります。
HTMLコード
<div class="min-h-screen bg-gray-100 dark:bg-gray-900 p-4 md:p-8 font-sans">
<!-- Sticky Shopping Cart Summary -->
<div class="sticky top-4 lg:top-8 bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4 mb-8 z-10 border border-gray-200 dark:border-gray-700">
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-100 mb-4">Your Cart</h2>
<div class="flex justify-between items-center text-gray-700 dark:text-gray-300">
<p class="text-sm">Items: <span class="font-medium">3</span></p>
<p class="text-sm">Total: <span class="font-medium">$250.00</span></p>
</div>
<button class="mt-4 w-full bg-orange-700 hover:bg-orange-800 text-white font-bold py-2 px-4 rounded-md shadow-md transition duration-300 ease-in-out">Checkout</button>
</div>
<!-- Product Grid -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
<!-- Product Card 1 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transform transition duration-300 hover:scale-105 border border-gray-200 dark:border-gray-700">
<img class="w-full h-48 object-cover" src="https://picsum.photos/seed/product1/600/400" alt="Product Image">
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-100 mb-2">Earthen Vase</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm mb-3">Handcrafted ceramic vase with a rustic finish, perfect for any home decor.</p>
<div class="flex justify-between items-center mb-4">
<span class="text-xl font-bold text-gray-900 dark:text-gray-50">$45.00</span>
<span class="text-sm text-gray-500 dark:text-gray-400 line-through">$60.00</span>
</div>
<button class="w-full bg-green-700 hover:bg-green-800 text-white font-bold py-2 px-4 rounded-md shadow-md transition duration-300 ease-in-out">Add to Cart</button>
</div>
</div>
<!-- Product Card 2 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transform transition duration-300 hover:scale-105 border border-gray-200 dark:border-gray-700">
<img class="w-full h-48 object-cover" src="https://picsum.photos/seed/product2/600/400" alt="Product Image">
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-100 mb-2">Terracotta Planter</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm mb-3">Classic terracotta planter, ideal for indoor and outdoor plants.</p>
<div class="flex justify-between items-center mb-4">
<span class="text-xl font-bold text-gray-900 dark:text-gray-50">$25.00</span>
</div>
<button class="w-full bg-green-700 hover:bg-green-800 text-white font-bold py-2 px-4 rounded-md shadow-md transition duration-300 ease-in-out">Add to Cart</button>
</div>
</div>
<!-- Product Card 3 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transform transition duration-300 hover:scale-105 border border-gray-200 dark:border-gray-700">
<img class="w-full h-48 object-cover" src="https://picsum.photos/seed/product3/600/400" alt="Product Image">
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-100 mb-2">Woodland Sculpture</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm mb-3">Artisan-crafted wooden sculpture, bringing nature indoors.</p>
<div class="flex justify-between items-center mb-4">
<span class="text-xl font-bold text-gray-900 dark:text-gray-50">$120.00</span>
<span class="text-sm text-gray-500 dark:text-gray-400 line-through">$150.00</span>
</div>
<button class="w-full bg-green-700 hover:bg-green-800 text-white font-bold py-2 px-4 rounded-md shadow-md transition duration-300 ease-in-out">Add to Cart</button>
</div>
</div>
<!-- Product Card 4 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transform transition duration-300 hover:scale-105 border border-gray-200 dark:border-gray-700">
<img class="w-full h-48 object-cover" src="https://picsum.photos/seed/product4/600/400" alt="Product Image">
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-100 mb-2">Organic Cotton Towel</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm mb-3">Soft and absorbent towel made from sustainably sourced organic cotton.</p>
<div class="flex justify-between items-center mb-4">
<span class="text-xl font-bold text-gray-900 dark:text-gray-50">$30.00</span>
</div>
<button class="w-full bg-green-700 hover:bg-green-800 text-white font-bold py-2 px-4 rounded-md shadow-md transition duration-300 ease-in-out">Add to Cart</button>
</div>
</div>
<!-- Product Card 5 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transform transition duration-300 hover:scale-105 border border-gray-200 dark:border-gray-700">
<img class="w-full h-48 object-cover" src="https://picsum.photos/seed/product5/600/400" alt="Product Image">
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-100 mb-2">Amber Glass Bottle Set</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm mb-3">Set of three reusable amber glass bottles with sleek dispensers.</p>
<div class="flex justify-between items-center mb-4">
<span class="text-xl font-bold text-gray-900 dark:text-gray-50">$35.00</span>
</div>
<button class="w-full bg-green-700 hover:bg-green-800 text-white font-bold py-2 px-4 rounded-md shadow-md transition duration-300 ease-in-out">Add to Cart</button>
</div>
</div>
<!-- Product Card 6 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transform transition duration-300 hover:scale-105 border border-gray-200 dark:border-gray-700">
<img class="w-full h-48 object-cover" src="https://picsum.photos/seed/product6/600/400" alt="Product Image">
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-100 mb-2">Hemp Fabric Basket</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm mb-3">Eco-friendly storage basket made from durable hemp fabric.</p>
<div class="flex justify-between items-center mb-4">
<span class="text-xl font-bold text-gray-900 dark:text-gray-50">$50.00</span>
<span class="text-sm text-gray-500 dark:text-gray-400 line-through">$70.00</span>
</div>
<button class="w-full bg-green-700 hover:bg-green-800 text-white font-bold py-2 px-4 rounded-md shadow-md transition duration-300 ease-in-out">Add to Cart</button>
</div>
</div>
</div>
</div>