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

Shopping Cart 구성 요소

전자 상거래를 위한 Neumorphic 스타일의 장바구니 구성 요소로, 단색 색 구성표, 풍부한 대화형 요소 및 Tailwind CSS를 사용하는 어두운 테마 지원을 특징으로 합니다.

미리 보기

HTML 코드 

<div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex items-center justify-center p-6">
  <div class="bg-white dark:bg-gray-800 shadow-inner rounded-xl p-8 max-w-md w-full">
    <h2 class="text-gray-800 dark:text-white text-2xl font-semibold mb-6 text-center">Shopping Cart</h2>
    <div class="space-y-4">
      <div class="flex items-center justify-between bg-gray-200 dark:bg-gray-700 rounded-lg p-4">
        <img src="https://picsum.photos/60/60" alt="Product" class="rounded-md shadow-md">
        <div class="flex-1 ml-4">
          <h3 class="text-gray-800 dark:text-white font-medium">Product Title</h3>
          <p class="text-gray-600 dark:text-gray-400">$29.99</p>
        </div>
        <div class="flex items-center">
          <button class="text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-white font-bold">-</button>
          <span class="mx-2">1</span>
          <button class="text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-white font-bold">+</button>
        </div>
      </div>
      <div class="flex items-center justify-between bg-gray-200 dark:bg-gray-700 rounded-lg p-4">
        <img src="https://picsum.photos/60/60" alt="Product" class="rounded-md shadow-md">
        <div class="flex-1 ml-4">
          <h3 class="text-gray-800 dark:text-white font-medium">Another Product</h3>
          <p class="text-gray-600 dark:text-gray-400">$19.99</p>
        </div>
        <div class="flex items-center">
          <button class="text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-white font-bold">-</button>
          <span class="mx-2">2</span>
          <button class="text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-white font-bold">+</button>
        </div>
      </div>
    </div>
    <div class="mt-6 bg-gray-300 dark:bg-gray-600 rounded-lg p-4 flex justify-between items-center">
      <span class="text-gray-800 dark:text-white font-bold">Total:</span>
      <span class="text-lg text-gray-800 dark:text-white font-semibold">$69.97</span>
    </div>
    <div class="mt-4 flex justify-center">
      <button class="bg-blue-500 dark:bg-blue-700 text-white font-semibold py-2 px-4 rounded-lg shadow">
        Checkout
      </button>
    </div>
  </div>
</div>

관련 구성 요소

Shopping Cart 구성 요소

소셜 미디어 인터페이스에 최적화된 장바구니 구성 요소로, 마이크로 인터랙션, 생생한 색상 및 단순한 레이아웃을 특징으로 합니다. 반응형 디자인과 다크 모드 지원이 포함됩니다.

열다

Shopping Cart 구성 요소

전자 상거래 플랫폼을 위해 설계된 반응형 쇼핑 카트 구성 요소로, 3D 디자인 스타일과 파스텔 색상 구성표를 특징으로 합니다. 제품 목록, 수량 및 결제 버튼과 같은 여러 대화형 요소가 장착되어 있어 어두운 테마를 지원합니다.

열다

Shopping Cart 구성 요소

패션 및 뷰티 제품을 위해 설계된 복잡하고 깨끗하며 신뢰할 수 있는 장바구니 구성 요소로, 풍부한 가을 색상, 완전한 응답성 및 다크 모드 지원을 특징으로 합니다.

열다