Shopping Cart 구성 요소
브루탈리즘 스타일로 디자인된 반응형 장바구니 구성 요소로, 높은 대비와 특이한 레이아웃을 특징으로 합니다. Tailwind CSS로 어두운 테마를 지원합니다.
HTML 코드
<div class="bg-gray-100 dark:bg-gray-800 p-4 rounded-lg shadow-lg max-w-md mx-auto">
<h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Shopping Cart</h2>
<div class="bg-white dark:bg-gray-700 rounded-lg shadow-md p-4">
<div class="flex items-center justify-between border-b border-gray-300 dark:border-gray-600 pb-2 mb-2">
<img src="https://picsum.photos/60" alt="Product Image" class="w-16 h-16 object-cover rounded-lg">
<div class="flex-1 px-4">
<h3 class="font-semibold text-gray-800 dark:text-white">Product Title</h3>
<p class="text-gray-600 dark:text-gray-300">$49.99</p>
</div>
<button class="bg-red-500 text-white p-2 rounded-lg hover:bg-red-600 transition duration-200">Remove</button>
</div>
<div class="flex items-center justify-between border-b border-gray-300 dark:border-gray-600 pb-2 mb-2">
<img src="https://picsum.photos/60" alt="Product Image" class="w-16 h-16 object-cover rounded-lg">
<div class="flex-1 px-4">
<h3 class="font-semibold text-gray-800 dark:text-white">Another Product</h3>
<p class="text-gray-600 dark:text-gray-300">$29.99</p>
</div>
<button class="bg-red-500 text-white p-2 rounded-lg hover:bg-red-600 transition duration-200">Remove</button>
</div>
<div class="flex justify-between items-center mt-4">
<h4 class="text-xl font-bold text-gray-800 dark:text-white">Total:</h4>
<p class="text-xl font-bold text-gray-800 dark:text-white">$79.98</p>
</div>
<button class="w-full mt-4 bg-blue-500 text-white p-2 rounded-lg hover:bg-blue-600 transition duration-200">Checkout</button>
</div>
<div class="flex items-center justify-center mt-4">
<p class="text-gray-600 dark:text-gray-300 text-sm">Need help? <a href="#" class="text-blue-500 hover:underline">Contact us</a></p>
</div>
</div>관련 구성 요소
Shopping Cart 구성 요소
반응형 디자인과 다크 모드를 지원하는 레트로 빈티지 스타일의 장바구니 구성 요소로, Tailwind CSS를 활용하고 자리 표시자 이미지와 아바타를 제공합니다.
Shopping Cart 구성 요소
Tailwind CSS를 사용하는 단순하고 미니멀한 장바구니 구성 요소로, 흙색 색 구성표, 소셜 미디어 목적 및 어두운 테마 지원을 제공합니다. 반응형이며 샘플 항목을 포함합니다. 이 구성 요소는 최소한의 요소와 JavaScript 없이 기본 표시를 위해 설계되었습니다.