Shopping Cart 구성 요소
어두운 테마를 지원하는 간단하고 반응형인 장바구니 구성 요소로, 그레이스케일 색 구성표와 함께 머티리얼 디자인 원칙에 따라 Tailwind CSS를 사용하여 스타일이 지정되었습니다. 제품 이미지에 picsum.photos를 사용합니다.
HTML 코드
<div class="container mx-auto p-4">
<div class="dark:bg-gray-800 bg-white shadow-md rounded-lg p-6">
<h1 class="text-2xl font-semibold text-gray-800 dark:text-white mb-6">Your Shopping Cart</h1>
<!-- Cart Item 1 -->
<div class="flex items-center border-b border-gray-200 dark:border-gray-700 pb-4 mb-4">
<img class="w-24 h-24 object-cover rounded-lg mr-4" src="https://picsum.photos/seed/product1/200/200" alt="Product Image">
<div class="flex-grow">
<h2 class="text-lg font-semibold text-gray-800 dark:text-white">Product Name 1</h2>
<p class="text-gray-600 dark:text-gray-400">Category: Electronics</p>
<p class="text-gray-800 dark:text-white font-bold">$299.99</p>
</div>
<div class="text-gray-600 dark:text-gray-400">
Quantity: 1
</div>
</div>
<!-- Cart Item 2 -->
<div class="flex items-center border-b border-gray-200 dark:border-gray-700 pb-4 mb-4">
<img class="w-24 h-24 object-cover rounded-lg mr-4" src="https://picsum.photos/seed/product2/200/200" alt="Product Image">
<div class="flex-grow">
<h2 class="text-lg font-semibold text-gray-800 dark:text-white">Product Name 2</h2>
<p class="text-gray-600 dark:text-gray-400">Category: Books</p>
<p class="text-gray-800 dark:text-white font-bold">$19.50</p>
</div>
<div class="text-gray-600 dark:text-gray-400">
Quantity: 2
</div>
</div>
<!-- Cart Summary -->
<div class="flex justify-between items-center mt-6">
<span class="text-xl font-semibold text-gray-800 dark:text-white">Total:</span>
<span class="text-xl font-bold text-gray-800 dark:text-white">$339.99</span>
</div>
<div class="mt-6 flex justify-end">
<button class="px-6 py-3 bg-gray-800 text-white dark:bg-gray-200 dark:text-gray-800 rounded-lg shadow-md hover:bg-gray-700 dark:hover:bg-gray-300 transition duration-300">
Checkout
</button>
</div>
</div>
</div>