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

Shopping Cart 구성 요소

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

미리 보기

HTML 코드 

<div class="container mx-auto p-4 bg-gray-lightest dark:bg-gray-dark">
  <h1 class="text-2xl font-bold mb-4 text-gray-darkest dark:text-gray-lightest">Shopping Cart</h1>

  <div class="shadow-md rounded-lg overflow-hidden">
    <!-- Cart Item -->
    <div class="flex items-center p-4 bg-white dark:bg-gray-darker border-b border-gray-200 dark:border-gray-700">
      <img src="https://picsum.photos/seed/item1/100/100" alt="Product Image" class="w-16 h-16 object-cover rounded-md">
      <div class="ml-4 flex-grow">
        <h2 class="text-lg font-semibold text-gray-darkest dark:text-gray-lightest">Product Name 1</h2>
        <p class="text-gray-dark dark:text-gray-light">Price: $19.99</p>
        <div class="flex items-center mt-2">
          <label for="quantity1" class="mr-2 text-gray-dark dark:text-gray-light">Quantity:</label>
          <input type="number" id="quantity1" name="quantity1" value="1" min="1" class="w-16 px-2 py-1 border rounded dark:bg-gray-darkest dark:text-gray-lightest">
        </div>
      </div>
      <button class="text-red-600 hover:text-red-800 dark:text-red-400 dark:hover:text-red-600">Remove</button>
    </div>

    <!-- Cart Item -->
    <div class="flex items-center p-4 bg-white dark:bg-gray-darker border-b border-gray-200 dark:border-gray-700">
      <img src="https://picsum.photos/seed/item2/100/100" alt="Product Image" class="w-16 h-16 object-cover rounded-md">
      <div class="ml-4 flex-grow">
        <h2 class="text-lg font-semibold text-gray-darkest dark:text-gray-lightest">Product Name 2</h2>
        <p class="text-gray-dark dark:text-gray-light">Price: $29.99</p>
        <div class="flex items-center mt-2">
          <label for="quantity2" class="mr-2 text-gray-dark dark:text-gray-light">Quantity:</label>
          <input type="number" id="quantity2" name="quantity2" value="2" min="1" class="w-16 px-2 py-1 border rounded dark:bg-gray-darkest dark:text-gray-lightest">
        </div>
      </div>
      <button class="text-red-600 hover:text-red-800 dark:text-red-400 dark:hover:text-red-600">Remove</button>
    </div>

    <!-- Total -->
    <div class="flex justify-between items-center p-4 bg-white dark:bg-gray-darker">
      <span class="text-lg font-semibold text-gray-darkest dark:text-gray-lightest">Total:</span>
      <span class="text-lg font-bold text-gray-darkest dark:text-gray-lightest">$79.97</span>
    </div>
  </div>

  <!-- Checkout Button -->
  <div class="mt-4 text-right">
    <button class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded dark:bg-blue-800 dark:hover:bg-blue-900">
      Checkout
    </button>
  </div>
</div>

관련 구성 요소

Shopping Cart 구성 요소

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

열다

Memphis_Industrial_Shopping_Cart_Component

산업/제조 상황에 맞게 조정된 Memphis Design 영향의 단순하고 반응이 빠른 쇼핑 카트 구성 요소로, 단일 밝은 강조 색상과 다크 모드를 지원하는 단색 팔레트를 특징으로 합니다.

열다

Shopping Cart 구성 요소

3D 디자인, 흙색 및 복잡한 대화형 요소가 있는 쇼핑 카트 구성 요소. Tailwind CSS를 사용하여 반응형 디자인과 어두운 테마를 지원하는 블로그/콘텐츠 웹사이트용으로 설계되었습니다.

열다