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

Shopping Cart 구성 요소

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

미리 보기

HTML 코드 

<div class="container mx-auto p-4">
  <div class="max-w-md mx-auto rounded-lg shadow-lg bg-white dark:bg-gray-800 overflow-hidden">
    <div class="px-6 py-4">
      <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Shopping Cart</h2>
      <div class="flex items-center mb-4">
        <img src="https://picsum.photos/seed/retro1/80/80" alt="Product Image" class="w-16 h-16 object-cover rounded-lg dark:brightness-75">
        <div class="ml-4">
          <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200">Product Name 1</h3>
          <p class="text-gray-600 dark:text-gray-400">$19.99</p>
        </div>
        <div class="ml-auto">
          <span class="text-gray-700 dark:text-gray-200">Qty: 1</span>
        </div>
      </div>
      <div class="flex items-center mb-4">
        <img src="https://picsum.photos/seed/retro2/80/80" alt="Product Image" class="w-16 h-16 object-cover rounded-lg dark:brightness-75">
        <div class="ml-4">
          <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200">Product Name 2</h3>
          <p class="text-gray-600 dark:text-gray-400">$29.99</p>
        </div>
        <div class="ml-auto">
          <span class="text-gray-700 dark:text-gray-200">Qty: 2</span>
        </div>
      </div>
      <div class="border-t border-gray-200 dark:border-gray-600 pt-4">
        <div class="flex justify-between">
          <span class="text-lg font-semibold text-gray-800 dark:text-white">Total:</span>
          <span class="text-lg font-semibold text-gray-800 dark:text-white">$79.97</span>
        </div>
      </div>
    </div>
    <div class="bg-gray-50 dark:bg-gray-700 px-6 py-4">
      <button class="w-full bg-blue-500 dark:bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">Checkout</button>
    </div>
  </div>
</div>

관련 구성 요소

Shopping Cart 구성 요소

네온/글로우 효과와 기업 파란색 색 구성표가 있는 반응형 장바구니 구성 요소로, 다크 모드를 지원합니다. 제품 목록, 수량 조정 및 전체 요약을 제공합니다.

열다

Shopping Cart 구성 요소

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

열다

Shopping Cart 구성 요소

Material Design, Monochromatic 색 구성표 및 전자 상거래를 위한 중간 수준의 복잡성을 갖춘 Shopping Cart 구성 요소. Tailwind CSS를 사용하여 어두운 테마를 지원하는 반응형 디자인.

열다