CCHub Logo CCHub Tailwind Collection
구성 요소 쇼핑 카트 Shopping Cart 구성 요소

Shopping Cart 구성 요소

전자 상거래를 위한 간단한 장바구니 구성 요소로, 반응형 머티리얼 디자인 모양, 보색 구성표 및 어두운 테마 지원을 제공합니다.

미리 보기

HTML 코드 

<div class="container mx-auto p-4 dark:bg-gray-900">
  <div class="bg-white dark:bg-gray-800 shadow-md rounded-lg p-6">
    <h2 class="text-2xl font-bold mb-6 text-gray-800 dark:text-gray-200">Shopping Cart</h2>

    <!-- Cart Item 1 -->
    <div class="flex items-center border-b border-gray-200 dark:border-gray-700 pb-4 mb-4">
      <img class="w-20 h-20 object-cover rounded-md mr-4" src="https://picsum.photos/seed/item1/200/200" alt="Product Image">
      <div class="flex-grow">
        <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product Name 1</h3>
        <p class="text-gray-600 dark:text-gray-400">Category</p>
        <div class="flex items-center mt-2">
          <span class="text-xl font-bold text-gray-800 dark:text-gray-200">$29.99</span>
          <span class="ml-4 text-gray-500 dark:text-gray-400">Qty: 1</span>
        </div>
      </div>
      <button class="text-red-500 hover:text-red-700 dark:text-red-400 dark:hover:text-red-600">Remove</button>
    </div>

    <!-- Cart Item 2 -->
    <div class="flex items-center border-b border-gray-200 dark:border-gray-700 pb-4 mb-4">
      <img class="w-20 h-20 object-cover rounded-md mr-4" src="https://picsum.photos/seed/item2/200/200" alt="Product Image">
      <div class="flex-grow">
        <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product Name 2</h3>
        <p class="text-gray-600 dark:text-gray-400">Category</p>
        <div class="flex items-center mt-2">
          <span class="text-xl font-bold text-gray-800 dark:text-gray-200">$49.99</span>
          <span class="ml-4 text-gray-500 dark:text-gray-400">Qty: 1</span>
        </div>
      </div>
      <button class="text-red-500 hover:text-red-700 dark:text-red-400 dark:hover:text-red-600">Remove</button>
    </div>

    <!-- Cart Summary -->
    <div class="flex justify-between items-center mt-6">
      <span class="text-xl font-bold text-gray-800 dark:text-gray-200">Total:</span>
      <span class="text-2xl font-bold text-blue-600 dark:text-blue-400">$79.98</span>
    </div>

    <button class="mt-8 w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-4 rounded-md shadow-md dark:bg-blue-500 dark:hover:bg-blue-600">
      Proceed to Checkout
    </button>
  </div>
</div>

관련 구성 요소

Shopping Cart 구성 요소

레트로/빈티지 테마의 쇼핑 카트 구성 요소로, 단색 색 구성표, 적당한 복잡성, 반응형 디자인 및 다크 모드 지원을 제공합니다. 비즈니스/기업 웹사이트에 적합합니다.

열다

Shopping Cart 구성 요소

Microinteractions 스타일, 반응형 효과 및 어두운 테마 지원이 있는 Shopping Cart 구성 요소.

열다

3D 쇼핑 카트 구성 요소

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

열다