Shopping Cart 구성 요소
소셜 미디어 인터페이스에 최적화된 장바구니 구성 요소로, 마이크로 인터랙션, 생생한 색상 및 단순한 레이아웃을 특징으로 합니다. 반응형 디자인과 다크 모드 지원이 포함됩니다.
HTML 코드
<div class="p-4 bg-white dark:bg-gray-800 rounded-lg">
<h2 class="text-xl font-bold mb-4 text-indigo-600 dark:text-indigo-400">Shopping Cart</h2>
<div class="space-y-4">
<!-- Cart Item -->
<div class="flex items-center justify-between border-b pb-4 border-gray-200 dark:border-gray-700">
<div class="flex items-center">
<img src="https://picsum.photos/seed/item1/50/50" alt="Product Image" class="rounded mr-4">
<div>
<p class="font-semibold text-gray-800 dark:text-gray-200">Product Name 1</p>
<p class="text-gray-600 dark:text-gray-400 text-sm">$19.99</p>
</div>
</div>
<div class="text-indigo-600 dark:text-indigo-400 font-bold animate-bounce">
x1
</div>
</div>
<!-- Cart Item -->
<div class="flex items-center justify-between border-b pb-4 border-gray-200 dark:border-gray-700">
<div class="flex items-center">
<img src="https://picsum.photos/seed/item2/50/50" alt="Product Image" class="rounded mr-4">
<div>
<p class="font-semibold text-gray-800 dark:text-gray-200">Product Name 2</p>
<p class="text-gray-600 dark:text-gray-400 text-sm">$29.50</p>
</div>
</div>
<div class="text-indigo-600 dark:text-indigo-400 font-bold animate-bounce">
x2
</div>
</div>
</div>
<div class="flex justify-between items-center mt-6">
<p class="text-lg font-bold text-gray-800 dark:text-gray-200">Total:</p>
<p class="text-lg font-bold text-indigo-600 dark:text-indigo-400">$78.98</p>
</div>
<button class="mt-6 w-full bg-indigo-500 hover:bg-indigo-600 text-white py-2 rounded-md transition duration-300">
Checkout
</button>
</div>관련 구성 요소
Shopping Cart 구성 요소
회색조 색 구성표가 있는 복잡하고 반응이 빠른 쇼핑 카트 구성 요소로, 블로그/콘텐츠 용도로 설계되었습니다. Tailwind CSS를 사용하는 마이크로 인터랙션이 특징이며, 다크 모드를 지원하고 JavaScript가 없습니다.
Shopping Cart 구성 요소
레트로/빈티지 테마의 쇼핑 카트 구성 요소로, 단색 색 구성표, 적당한 복잡성, 반응형 디자인 및 다크 모드 지원을 제공합니다. 비즈니스/기업 웹사이트에 적합합니다.