ショッピングカートコンポーネント
レスポンシブデザインのシンプルなダークモードショッピングカートコンポーネントで、商品リスト、数量、合計が特徴です。暗い背景のトライアドカラースキームを使用しています。コンテンツ消費のために設計されています。
HTMLコード
<div class="dark:bg-gray-900 dark:text-white min-h-screen p-4">
<h1 class="text-2xl font-bold mb-6 text-center text-blue-400">Your Shopping Cart</h1>
<div class="max-w-md mx-auto bg-gray-800 rounded-lg shadow-lg p-5">
<!-- Product Item 1 -->
<div class="flex items-center mb-5">
<img src="https://picsum.photos/id/237/80/80" alt="Product Image" class="w-20 h-20 object-cover rounded-md mr-4">
<div class="flex-grow">
<h3 class="text-lg font-semibold text-green-400">Awesome Gadget</h3>
<p class="text-gray-400">Quantity: 1</p>
</div>
<span class="text-lg font-bold text-red-400">$29.99</span>
</div>
<!-- Product Item 2 -->
<div class="flex items-center mb-5">
<img src="https://picsum.photos/id/238/80/80" alt="Product Image" class="w-20 h-20 object-cover rounded-md mr-4">
<div class="flex-grow">
<h3 class="text-lg font-semibold text-green-400">Super Item</h3>
<p class="text-gray-400">Quantity: 2</p>
</div>
<span class="text-lg font-bold text-red-400">$19.50</span>
</div>
<!-- Product Item 3 -->
<div class="flex items-center mb-5">
<img src="https://picsum.photos/id/239/80/80" alt="Product Image" class="w-20 h-20 object-cover rounded-md mr-4">
<div class="flex-grow">
<h3 class="text-lg font-semibold text-green-400">Mega Product</h3>
<p class="text-gray-400">Quantity: 1</p>
</div>
<span class="text-lg font-bold text-red-400">$49.00</span>
</div>
<!-- Total -->
<div class="border-t border-gray-700 pt-4 flex justify-between items-center">
<span class="text-xl font-bold text-blue-400">Total:</span>
<span class="text-xl font-bold text-red-400">$98.49</span>
</div>
<button class="mt-6 w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-4 rounded-lg focus:outline-none focus:shadow-outline transition duration-300">
Proceed to Checkout
</button>
</div>
<!-- Responsive adjustments -->
<style>
@media (max-width: 640px) {
.max-w-md {
margin-left: 1rem;
margin-right: 1rem;
}
}
</style>
</div>