Shopping Cart 구성 요소
레트로/빈티지 스타일의 장바구니 구성 요소로, 그레이스케일 색 구성표, 적당한 복잡성, 어두운 테마를 지원하는 반응형 디자인을 제공합니다. Tailwind CSS를 사용하는 비즈니스/기업 웹사이트용으로 설계되었습니다. JavaScript는 없으며 Tailwind 클래스가있는 HTML 만 있습니다. 이미지에는 picsum.photos를 사용하고 아바타에는 randomuser.me 를 사용합니다.
HTML 코드
<div class="antialiased dark:bg-gray-900 dark:text-gray-200">
<div class="h-full bg-gray-100 dark:bg-gray-800 p-8">
<div class="mx-auto max-w-3xl">
<header class="flex items-center justify-between">
<h1 class="text-2xl font-bold text-gray-800 dark:text-white">Your Cart</h1>
<a href="#" class="text-sm font-medium text-blue-600 hover:text-blue-500 dark:text-blue-400 dark:hover:text-blue-300">Continue Shopping</a>
</header>
<div class="mt-8">
<ul class="space-y-4">
<li class="flex items-center rounded-lg border border-gray-200 bg-white p-4 shadow-sm dark:border-gray-700 dark:bg-gray-700">
<img src="https://picsum.photos/seed/product1/80/80" alt="Nike Air Force 1" class="h-20 w-20 rounded-lg object-cover mr-4">
<div class="flex-grow">
<h3 class="text-base font-semibold text-gray-900 dark:text-white">Nike Air Force 1</h3>
<p class="text-sm text-gray-500 dark:text-gray-300">Size: 10</p>
<p class="text-sm text-gray-500 dark:text-gray-300">Color: White</p>
<div class="mt-2 flex items-center justify-between">
<span class="text-base font-bold text-gray-900 dark:text-white">$120.00</span>
<div class="flex items-center">
<button type="button" class="inline-flex h-7 w-7 items-center justify-center rounded-full border border-gray-200 bg-white text-sm font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">-</button>
<input type="text" class="w-10 border-0 bg-transparent text-center text-sm font-medium text-gray-900 dark:text-white" value="1" readonly>
<button type="button" class="inline-flex h-7 w-7 items-center justify-center rounded-full border border-gray-200 bg-white text-sm font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">+</button>
</div>
</div>
</div>
<button class="ml-4 text-red-600 hover:text-red-500 dark:text-red-400 dark:hover:text-red-300">
<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path></svg>
</button>
</li>
<li class="flex items-center rounded-lg border border-gray-200 bg-white p-4 shadow-sm dark:border-gray-700 dark:bg-gray-700">
<img src="https://picsum.photos/seed/product2/80/80" alt="Apple Watch Series 7" class="h-20 w-20 rounded-lg object-cover mr-4">
<div class="flex-grow">
<h3 class="text-base font-semibold text-gray-900 dark:text-white">Apple Watch Series 7</h3>
<p class="text-sm text-gray-500 dark:text-gray-300">Color: Space Gray</p>
<p class="text-sm text-gray-500 dark:text-gray-300">Band: Solo Loop</p>
<div class="mt-2 flex items-center justify-between">
<span class="text-base font-bold text-gray-900 dark:text-white">$399.00</span>
<div class="flex items-center">
<button type="button" class="inline-flex h-7 w-7 items-center justify-center rounded-full border border-gray-200 bg-white text-sm font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">-</button>
<input type="text" class="w-10 border-0 bg-transparent text-center text-sm font-medium text-gray-900 dark:text-white" value="1" readonly>
<button type="button" class="inline-flex h-7 w-7 items-center justify-center rounded-full border border-gray-200 bg-white text-sm font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">+</button>
</div>
</div>
</div>
<button class="ml-4 text-red-600 hover:text-red-500 dark:text-red-400 dark:hover:text-red-300">
<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path></svg>
</button>
</li>
</ul>
</div>
<div class="mt-8 rounded-lg border border-gray-200 bg-white p-4 shadow-sm dark:border-gray-700 dark:bg-gray-700">
<div class="flex items-center justify-between">
<p class="text-base font-semibold text-gray-900 dark:text-white">Subtotal</p>
<p class="text-base font-semibold text-gray-900 dark:text-white">$519.00</p>
</div>
<div class="mt-2 flex items-center justify-between">
<p class="text-base font-semibold text-gray-900 dark:text-white">Shipping</p>
<p class="text-base font-semibold text-gray-900 dark:text-white">Free</p>
</div>
<div class="mt-4 flex items-center justify-between border-t border-gray-200 pt-4 dark:border-gray-600">
<p class="text-xl font-bold text-gray-900 dark:text-white">Total</p>
<p class="text-xl font-bold text-gray-900 dark:text-white">$519.00</p>
</div>
</div>
<div class="mt-8 flex justify-end">
<button type="button" class="rounded-lg bg-gray-900 px-5 py-2.5 text-sm font-medium text-white hover:bg-gray-800 focus:outline-none focus:ring-4 focus:ring-gray-300 dark:bg-gray-600 dark:hover:bg-gray-700 dark:focus:ring-gray-800">Proceed to Checkout</button>
</div>
</div>
</div>
</div>