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>관련 구성 요소
3D 쇼핑 카트 구성 요소
시각적으로 눈에 띄는 쇼핑 카트 구성 요소로, 깊이와 참여를 유도하는 3D 디자인 요소가 있습니다. 시각적 흥미를 위해 트라이어드 색 구성표(기본 파란색, 생생한 빨간색 및 호박색 노란색)를 사용합니다. 이 복잡한 인터페이스에는 이미지, 수량 제어, 가격 요약 및 3D 움직임을 시뮬레이션하는 호버 효과가 있는 제품 목록이 포함됩니다. 어두운 테마 지원으로 완벽하게 반응합니다. 이 구성 요소는 독자가 콘텐츠를 소비하면서 권장 제품을 구매할 수 있는 콘텐츠/블로그 환경을 위해 설계되었습니다.
Shopping Cart 구성 요소
스큐어모피즘으로 설계된 장바구니 구성 요소입니다. 실제 세계를 모방한 디지털 요소, 완전한 반응형 지원 및 어두운 테마 호환성을 갖추고 있습니다.