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 구성 요소

레트로/빈티지 스타일의 장바구니 구성 요소로, 그레이스케일 색 구성표, 적당한 복잡성, 어두운 테마를 지원하는 반응형 디자인을 제공합니다. Tailwind CSS를 사용하는 비즈니스/기업 웹사이트용으로 설계되었습니다. JavaScript는 없으며 Tailwind 클래스가있는 HTML 만 있습니다. 이미지에는 picsum.photos를 사용하고 아바타에는 randomuser.me 를 사용합니다.

열다

Shopping Cart 구성 요소

브루탈리즘 스타일로 디자인된 반응형 장바구니 구성 요소로, 높은 대비와 특이한 레이아웃을 특징으로 합니다. Tailwind CSS로 어두운 테마를 지원합니다.

열다

Shopping Cart 구성 요소

스큐어모피즘으로 설계된 장바구니 구성 요소입니다. 실제 세계를 모방한 디지털 요소, 완전한 반응형 지원 및 어두운 테마 호환성을 갖추고 있습니다.

열다