Shopping Cart 구성 요소
스큐어모피즘으로 설계된 장바구니 구성 요소입니다. 실제 세계를 모방한 디지털 요소, 완전한 반응형 지원 및 어두운 테마 호환성을 갖추고 있습니다.
HTML 코드
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg max-w-md mx-auto mt-10 p-5">
<h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-5">Shopping Cart</h2>
<div class="mb-4">
<div class="flex items-center justify-between p-3 bg-gray-100 dark:bg-gray-700 rounded">
<img src="https://picsum.photos/50?random=1" alt="Product Image" class="w-16 h-16 rounded shadow-md">
<div class="flex-1 ml-3">
<h3 class="text-lg font-semibold text-gray-800 dark:text-white">Product Name</h3>
<p class="text-gray-600 dark:text-gray-400">$29.99</p>
</div>
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Remove</button>
</div>
</div>
<div class="mb-4">
<div class="flex items-center justify-between p-3 bg-gray-100 dark:bg-gray-700 rounded">
<img src="https://picsum.photos/50?random=2" alt="Product Image" class="w-16 h-16 rounded shadow-md">
<div class="flex-1 ml-3">
<h3 class="text-lg font-semibold text-gray-800 dark:text-white">Another Product</h3>
<p class="text-gray-600 dark:text-gray-400">$19.99</p>
</div>
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Remove</button>
</div>
</div>
<div class="flex justify-between font-bold text-lg mt-5">
<span class="text-gray-800 dark:text-white">Total:</span>
<span class="text-gray-800 dark:text-white">$49.98</span>
</div>
<button class="mt-5 bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded w-full">Checkout</button>
</div>