검색 구성 요소

카테고리

쇼핑 카트

구매할 상품을 수집하기 위한 E-commerce 기능

뉴모픽 쇼핑 카트

트라이어딕 색 구성표를 사용하는 Neumorphic 장바구니 구성 요소입니다. 비즈니스/기업 웹사이트용으로 설계된 중간 정도의 복잡성을 가지고 있습니다. 이 구성 요소는 반응형이며 Tailwind의 dark: 접두사를 사용하는 다크 모드 지원을 포함합니다. 수량과 가격이 있는 항목에 대한 자리 표시자, 소계 및 체크 아웃 버튼을 포함합니다. 제품 이미지에 picsum.photos를 사용합니다.

열다 미리 보기

                <div class="container mx-auto p-4 dark:bg-gray-800 dark:text-white">
    <div class="neumorphic-card p-6 rounded-xl shadow-xl dark:shadow-2xl">
        <h2 class="text-2xl font-semibold mb-6 text-center dark:text-white">Shopping Cart</h2>

        <div class="space-y-4">
            <!-- Cart Item 1 -->
            <div class="neumorphic-item p-4 rounded-lg shadow-md flex items-center dark:shadow-lg">
                <img src="https://picsum.photos/seed/item1/100/100" alt="Product Image" class="w-16 h-16 object-cover rounded-md mr-4 shadow-inner dark:shadow-sm">
                <div class="flex-grow">
                    <h3 class="text-lg font-medium dark:text-white">Product Name 1</h3>
                    <p class="text-gray-600 dark:text-gray-400">Quantity: 2</p>
                    <p class="text-lg font-semibold text-blue-600 dark:text-blue-400">$49.98</p>
                </div>
                <button class="ml-4 text-red-500 hover:text-red-700 dark:text-red-400 dark:hover:text-red-600">Remove</button>
            </div>

            <!-- Cart Item 2 -->
            <div class="neumorphic-item p-4 rounded-lg shadow-md flex items-center dark:shadow-lg">
                <img src="https://picsum.photos/seed/item2/100/100" alt="Product Image" class="w-16 h-16 object-cover rounded-md mr-4 shadow-inner dark:shadow-sm">
                <div class="flex-grow">
                    <h3 class="text-lg font-medium dark:text-white">Product Name 2</h3>
                    <p class="text-gray-600 dark:text-gray-400">Quantity: 1</p>
                    <p class="text-lg font-semibold text-green-600 dark:text-green-400">$24.50</p>
                </div>
                <button class="ml-4 text-red-500 hover:text-red-700 dark:text-red-400 dark:hover:text-red-600">Remove</button>
            </div>
        </div>

        <div class="mt-6 pt-4 border-t border-gray-200 dark:border-gray-700">
            <div class="flex justify-between items-center">
                <span class="text-xl font-semibold dark:text-white">Subtotal:</span>
                <span class="text-xl font-bold text-purple-600 dark:text-purple-400">$74.48</span>
            </div>
        </div>

        <div class="mt-6">
            <button class="w-full py-3 rounded-lg bg-blue-600 text-white text-lg font-semibold shadow-lg hover:bg-blue-700 dark:bg-blue-700 dark:hover:bg-blue-800 transition duration-200 ease-in-out dark:shadow-xl">Proceed to Checkout</button>
        </div>
    </div>
</div>

<style>
.neumorphic-card {
    background: #e0e0e0;
    box-shadow: 9px 9px 16px #a3a3a3, -9px -9px 16px #ffffff;
}

.dark .neumorphic-card {
    background: #374151;
    box-shadow: 9px 9px 16px #252c38, -9px -9px 16px #49566a;
}

.neumorphic-item {
     background: #e0e0e0;
     box-shadow: inset 5px 5px 10px #a3a3a3, inset -5px -5px 10px #ffffff;
}

.dark .neumorphic-item {
    background: #374151;
    box-shadow: inset 5px 5px 10px #252c38, inset -5px -5px 10px #49566a;
}
</style>

Shopping Cart 구성 요소

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

열다 미리 보기

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

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

열다 미리 보기

                <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg max-w-md mx-auto mt-10 p-5">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-5">Shopping Cart</h2>
    <div class="mb-4">
        <div class="flex items-center justify-between p-3 bg-gray-100 dark:bg-gray-700 rounded">
            <img src="https://picsum.photos/50?random=1" alt="Product Image" class="w-16 h-16 rounded shadow-md">
            <div class="flex-1 ml-3">
                <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Product Name</h3>
                <p class="text-gray-600 dark:text-gray-400">$29.99</p>
            </div>
            <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Remove</button>
        </div>
    </div>
    <div class="mb-4">
        <div class="flex items-center justify-between p-3 bg-gray-100 dark:bg-gray-700 rounded">
            <img src="https://picsum.photos/50?random=2" alt="Product Image" class="w-16 h-16 rounded shadow-md">
            <div class="flex-1 ml-3">
                <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Another Product</h3>
                <p class="text-gray-600 dark:text-gray-400">$19.99</p>
            </div>
            <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Remove</button>
        </div>
    </div>
    <div class="flex justify-between font-bold text-lg mt-5">
        <span class="text-gray-800 dark:text-white">Total:</span>
        <span class="text-gray-800 dark:text-white">$49.98</span>
    </div>
    <button class="mt-5 bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded w-full">Checkout</button>
</div>

Shopping Cart 구성 요소

Skeuomorphism 디자인, 반응형 효과 및 어두운 테마 지원이 있는 장바구니 구성 요소입니다.

열다 미리 보기

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

  <div class="space-y-4">

    <!-- Cart Item -->
    <div class="flex items-center bg-white dark:bg-gray-700 p-4 rounded-lg shadow-md">
      <img class="w-16 h-16 object-cover rounded-md mr-4 border border-gray-300 dark:border-gray-600" src="https://picsum.photos/80" alt="Product Image">
      <div class="flex-grow">
        <h2 class="text-lg font-semibold text-gray-900 dark:text-white">Product Name</h2>
        <p class="text-gray-600 dark:text-gray-300">Quantity: 1</p>
        <p class="text-gray-800 dark:text-white">$19.99</p>
      </div>
      <button class="bg-red-500 hover:bg-red-600 text-white py-2 px-4 rounded-full shadow-lg">Remove</button>
    </div>

    <!-- Cart Item -->
    <div class="flex items-center bg-white dark:bg-gray-700 p-4 rounded-lg shadow-md">
      <img class="w-16 h-16 object-cover rounded-md mr-4 border border-gray-300 dark:border-gray-600" src="https://picsum.photos/81" alt="Product Image">
      <div class="flex-grow">
        <h2 class="text-lg font-semibold text-gray-900 dark:text-white">Another Product</h2>
        <p class="text-gray-600 dark:text-gray-300">Quantity: 2</p>
        <p class="text-gray-800 dark:text-white">$29.50</p>
      </div>
      <button class="bg-red-500 hover:bg-red-600 text-white py-2 px-4 rounded-full shadow-lg">Remove</button>
    </div>

  </div>

  <div class="mt-6 flex justify-end items-center">
    <div class="text-xl font-bold text-gray-900 dark:text-white mr-4">Total: $69.00</div>
    <button class="bg-blue-600 hover:bg-blue-700 text-white py-3 px-6 rounded-lg shadow-xl">Checkout</button>
  </div>
</div>

Shopping Cart 구성 요소

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

열다 미리 보기

                <div class="bg-gray-100 dark:bg-gray-800 min-h-screen p-8">
  <div class="max-w-md mx-auto bg-white dark:bg-gray-700 rounded-lg shadow-lg overflow-hidden md:max-w-lg">
    <div class="md:flex">
      <div class="w-full p-4">
        <div class="flex justify-between items-center">
          <span class="text-gray-700 dark:text-gray-200 text-lg font-semibold">Shopping Cart</span>
          <span class="text-gray-600 dark:text-gray-300">3 items</span>
        </div>
        <hr class="mt-4">
        <div class="mt-8">
          <div class="flex items-center mb-5">
            <div class="w-20 h-20 overflow-hidden rounded-lg">
              <img src="https://picsum.photos/id/1018/80/80" alt="product image" class="object-cover w-full h-full">
            </div>
            <div class="flex-grow ml-4">
              <h2 class="text-gray-900 dark:text-gray-100 text-lg font-semibold">Product Name 1</h2>
              <p class="text-gray-600 dark:text-gray-300 text-sm">Size: M, Color: Red</p>
              <p class="text-gray-800 dark:text-gray-200 mt-1">$25.99</p>
            </div>
            <div class="flex flex-col items-center">
              <button class="text-gray-600 dark:text-gray-300 focus:outline-none focus:text-gray-500 transition ease-in-out duration-150 transform hover:scale-110">
                <svg class="h-5 w-5" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" stroke="currentColor"><path d="M12 9v3m0 0v3m0-3h3m-3 0H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
              </button>
              <span class="text-gray-700 dark:text-gray-200 mx-2">1</span>
              <button class="text-gray-600 dark:text-gray-300 focus:outline-none focus:text-gray-500 transition ease-in-out duration-150 transform hover:scale-110">
                <svg class="h-5 w-5" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" stroke="currentColor"><path d="M15 12H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
              </button>
            </div>
          </div>
          <div class="flex items-center mb-5">
            <div class="w-20 h-20 overflow-hidden rounded-lg">
              <img src="https://picsum.photos/id/1015/80/80" alt="product image" class="object-cover w-full h-full">
            </div>
            <div class="flex-grow ml-4">
              <h2 class="text-gray-900 dark:text-gray-100 text-lg font-semibold">Product Name 2</h2>
              <p class="text-gray-600 dark:text-gray-300 text-sm">Size: S, Color: Blue</p>
              <p class="text-gray-800 dark:text-gray-200 mt-1">$15.50</p>
            </div>
            <div class="flex flex-col items-center">
              <button class="text-gray-600 dark:text-gray-300 focus:outline-none focus:text-gray-500 transition ease-in-out duration-150 transform hover:scale-110">
                <svg class="h-5 w-5" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" stroke="currentColor"><path d="M12 9v3m0 0v3m0-3h3m-3 0H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
              </button>
              <span class="text-gray-700 dark:text-gray-200 mx-2">1</span>
              <button class="text-gray-600 dark:text-gray-300 focus:outline-none focus:text-gray-500 transition ease-in-out duration-150 transform hover:scale-110">
                <svg class="h-5 w-5" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" stroke="currentColor"><path d="M15 12H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
              </button>
            </div>
          </div>
           <div class="flex items-center">
            <div class="w-20 h-20 overflow-hidden rounded-lg">
              <img src="https://picsum.photos/id/1019/80/80" alt="product image" class="object-cover w-full h-full">
            </div>
            <div class="flex-grow ml-4">
              <h2 class="text-gray-900 dark:text-gray-100 text-lg font-semibold">Product Name 3</h2>
              <p class="text-gray-600 dark:text-gray-300 text-sm">One Size, Color: Green</p>
              <p class="text-gray-800 dark:text-gray-200 mt-1">$30.00</p>
            </div>
            <div class="flex flex-col items-center">
              <button class="text-gray-600 dark:text-gray-300 focus:outline-none focus:text-gray-500 transition ease-in-out duration-150 transform hover:scale-110">
                <svg class="h-5 w-5" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" stroke="currentColor"><path d="M12 9v3m0 0v3m0-3h3m-3 0H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
              </button>
              <span class="text-gray-700 dark:text-gray-200 mx-2">1</span>
              <button class="text-gray-600 dark:text-gray-300 focus:outline-none focus:text-gray-500 transition ease-in-out duration-150 transform hover:scale-110">
                <svg class="h-5 w-5" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" stroke="currentColor"><path d="M15 12H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
              </button>
            </div>
          </div>
        </div>
        <hr class="mt-8">
        <div class="mt-4 flex justify-between items-center">
          <span class="text-gray-700 dark:text-gray-200 text-lg font-semibold">Total:</span>
          <span class="text-gray-900 dark:text-gray-100 text-lg font-semibold">$71.49</span>
        </div>
        <button class="mt-6 w-full bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600 focus:outline-none focus:bg-blue-600 transition ease-in-out duration-150">
          Checkout
        </button>
      </div>
    </div>
  </div>
</div>

Shopping Cart 구성 요소

다크 모드 지원과 반응형 디자인을 갖춘 브루탈리즘 장바구니 구성 요소입니다.

열다 미리 보기

                <div class="container mx-auto p-4 bg-gray-100 dark:bg-gray-900 border-4 border-black dark:border-white">
  <h1 class="text-2xl font-bold mb-4 text-black dark:text-white">Shopping Cart</h1>
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
    <div class="border-2 border-black dark:border-white p-4 relative">
      <img src="https://picsum.photos/seed/item1/300/200" alt="Item 1" class="w-full h-48 object-cover mb-4 border-4 border-black dark:border-white">
      <h2 class="text-xl font-bold mb-2 text-black dark:text-white">Item 1</h2>
      <p class="text-gray-700 dark:text-gray-300 mb-2">Description of item 1.</p>
      <p class="text-black dark:text-white font-bold">$19.99</p>
      <button class="mt-4 p-2 bg-black text-white dark:bg-white dark:text-black border-2 border-black dark:border-white absolute bottom-4 right-4">Remove</button>
    </div>
    <div class="border-2 border-black dark:border-white p-4 relative">
      <img src="https://picsum.photos/seed/item2/300/200" alt="Item 2" class="w-full h-48 object-cover mb-4 border-4 border-black dark:border-white">
      <h2 class="text-xl font-bold mb-2 text-black dark:text-white">Item 2</h2>
      <p class="text-gray-700 dark:text-gray-300 mb-2">Description of item 2.</p>
      <p class="text-black dark:text-white font-bold">$29.99</p>
      <button class="mt-4 p-2 bg-black text-white dark:bg-white dark:text-black border-2 border-black dark:border-white absolute bottom-4 right-4">Remove</button>
    </div>
    <div class="border-2 border-black dark:border-white p-4 relative">
      <img src="https://picsum.photos/seed/item3/300/200" alt="Item 3" class="w-full h-48 object-cover mb-4 border-4 border-black dark:border-white">
      <h2 class="text-xl font-bold mb-2 text-black dark:text-white">Item 3</h2>
      <p class="text-gray-700 dark:text-gray-300 mb-2">Description of item 3.</p>
      <p class="text-black dark:text-white font-bold">$39.99</p>
      <button class="mt-4 p-2 bg-black text-white dark:bg-white dark:text-black border-2 border-black dark:border-white absolute bottom-4 right-4">Remove</button>
    </div>
  </div>
  <div class="mt-8 border-t-4 border-black dark:border-white pt-4 flex justify-between items-center">
    <h2 class="text-xl font-bold text-black dark:text-white">Total:</h2>
    <p class="text-xl font-bold text-black dark:text-white">$89.97</p>
  </div>
  <div class="mt-4 flex justify-end">
    <button class="p-4 bg-black text-white dark:bg-white dark:text-black border-4 border-black dark:border-white text-xl font-bold">Checkout</button>
  </div>
</div>

Shopping Cart 구성 요소

Brutalism 디자인, 반응형 효과 및 어두운 테마를 지원하는 장바구니 구성 요소.

열다 미리 보기

                <div class="container mx-auto p-8 bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-gray-100 font-mono">
  <h1 class="text-5xl font-bold mb-8 border-b-4 border-gray-900 dark:border-gray-100 pb-2">Your Cart</h1>
  <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
    <div class="bg-white dark:bg-gray-800 p-6 border-4 border-gray-900 dark:border-gray-100">
      <div class="flex justify-between items-center mb-4">
        <h2 class="text-2xl font-bold">Item Name</h2>
        <span class="text-xl font-bold">$99.99</span>
      </div>
      <p class="mb-4">Brief description of the item goes here. Brutalist aesthetic with high contrast and strong lines.</p>
      <div class="flex justify-between items-center">
        <div class="flex items-center">
          <button class="bg-gray-900 dark:bg-gray-100 text-white dark:text-gray-900 px-3 py-1 font-bold text-xl border-4 border-gray-900 dark:border-gray-100 border-r-0">-</button>
          <span class="px-4 py-1 border-y-4 border-gray-900 dark:border-gray-100 text-xl">1</span>
          <button class="bg-gray-900 dark:bg-gray-100 text-white dark:text-gray-900 px-3 py-1 font-bold text-xl border-4 border-gray-900 dark:border-gray-100 border-l-0">+</button>
        </div>
        <button class="text-red-600 font-bold border-4 border-red-600 px-4 py-2">Remove</button>
      </div>
    </div>
        <div class="bg-white dark:bg-gray-800 p-6 border-4 border-gray-900 dark:border-gray-100">
      <div class="flex justify-between items-center mb-4">
        <h2 class="text-2xl font-bold">Another Item</h2>
        <span class="text-xl font-bold">$199.99</span>
      </div>
      <p class="mb-4">Another description for another item. Keeping with the raw and bold design principles.</p>
      <div class="flex justify-between items-center">
        <div class="flex items-center">
          <button class="bg-gray-900 dark:bg-gray-100 text-white dark:text-gray-900 px-3 py-1 font-bold text-xl border-4 border-gray-900 dark:border-gray-100 border-r-0">-</button>
          <span class="px-4 py-1 border-y-4 border-gray-900 dark:border-gray-100 text-xl">2</span>
          <button class="bg-gray-900 dark:bg-gray-100 text-white dark:text-gray-900 px-3 py-1 font-bold text-xl border-4 border-gray-900 dark:border-gray-100 border-l-0">+</button>
        </div>
        <button class="text-red-600 font-bold border-4 border-red-600 px-4 py-2">Remove</button>
      </div>
    </div>
  </div>
  <div class="mt-8 border-t-4 border-gray-900 dark:border-gray-100 pt-8 flex justify-between items-center">
    <h2 class="text-3xl font-bold">Total</h2>
    <span class="text-3xl font-bold">$299.98</span>
  </div>
  <div class="mt-8 text-right">
    <button class="bg-gray-900 dark:bg-gray-100 text-white dark:text-gray-900 text-2xl font-bold px-8 py-4 border-4 border-gray-900 dark:border-gray-100">Checkout</button>
  </div>
</div>

Shopping Cart 구성 요소

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

열다 미리 보기

                <div class="bg-gray-100 dark:bg-gray-800 p-4 rounded-lg shadow-lg max-w-md mx-auto">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Shopping Cart</h2>
    <div class="bg-white dark:bg-gray-700 rounded-lg shadow-md p-4">
        <div class="flex items-center justify-between border-b border-gray-300 dark:border-gray-600 pb-2 mb-2">
            <img src="https://picsum.photos/60" alt="Product Image" class="w-16 h-16 object-cover rounded-lg">
            <div class="flex-1 px-4">
                <h3 class="font-semibold text-gray-800 dark:text-white">Product Title</h3>
                <p class="text-gray-600 dark:text-gray-300">$49.99</p>
            </div>
            <button class="bg-red-500 text-white p-2 rounded-lg hover:bg-red-600 transition duration-200">Remove</button>
        </div>
        <div class="flex items-center justify-between border-b border-gray-300 dark:border-gray-600 pb-2 mb-2">
            <img src="https://picsum.photos/60" alt="Product Image" class="w-16 h-16 object-cover rounded-lg">
            <div class="flex-1 px-4">
                <h3 class="font-semibold text-gray-800 dark:text-white">Another Product</h3>
                <p class="text-gray-600 dark:text-gray-300">$29.99</p>
            </div>
            <button class="bg-red-500 text-white p-2 rounded-lg hover:bg-red-600 transition duration-200">Remove</button>
        </div>
        <div class="flex justify-between items-center mt-4">
            <h4 class="text-xl font-bold text-gray-800 dark:text-white">Total:</h4>
            <p class="text-xl font-bold text-gray-800 dark:text-white">$79.98</p>
        </div>
        <button class="w-full mt-4 bg-blue-500 text-white p-2 rounded-lg hover:bg-blue-600 transition duration-200">Checkout</button>
    </div>
    <div class="flex items-center justify-center mt-4">
        <p class="text-gray-600 dark:text-gray-300 text-sm">Need help? <a href="#" class="text-blue-500 hover:underline">Contact us</a></p>
    </div>
</div>

Shopping Cart 구성 요소

반응형 디자인과 다크 모드를 지원하는 레트로 빈티지 스타일의 장바구니 구성 요소로, Tailwind CSS를 활용하고 자리 표시자 이미지와 아바타를 제공합니다.

열다 미리 보기

                <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 max-w-md mx-auto mt-10">
    <h2 class="text-2xl font-bold text-center text-black dark:text-white">Shopping Cart</h2>
    <ul class="mt-4">
        <li class="flex items-center justify-between py-2 border-b border-gray-300">
            <img src="https://picsum.photos/50/50" alt="Product Image" class="rounded-md">
            <div class="ml-3">
                <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">$29.99</p>
            </div>
            <input type="number" value="1" class="border rounded-md w-16 text-center" />
            <button class="ml-2 text-red-500 font-bold">Remove</button>
        </li>
        <li class="flex items-center justify-between py-2 border-b border-gray-300">
            <img src="https://picsum.photos/50/50?random=1" alt="Product Image" class="rounded-md">
            <div class="ml-3">
                <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">$49.99</p>
            </div>
            <input type="number" value="1" class="border rounded-md w-16 text-center" />
            <button class="ml-2 text-red-500 font-bold">Remove</button>
        </li>
        <li class="flex items-center justify-between py-2 border-b border-gray-300">
            <img src="https://picsum.photos/50/50?random=2" alt="Product Image" class="rounded-md">
            <div class="ml-3">
                <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product Name 3</h3>
                <p class="text-gray-600 dark:text-gray-400">$19.99</p>
            </div>
            <input type="number" value="1" class="border rounded-md w-16 text-center" />
            <button class="ml-2 text-red-500 font-bold">Remove</button>
        </li>
    </ul>
    <div class="mt-4 flex justify-between">
        <p class="text-lg font-semibold text-gray-800 dark:text-gray-200">Total:</p>
        <p class="text-lg font-bold text-gray-800 dark:text-gray-200">$99.97</p>
    </div>
    <button class="mt-6 w-full bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 rounded-md transition duration-300 ease-in-out">Checkout</button>
</div>

Shopping Cart 구성 요소

Tailwind CSS를 사용하여 반응형 효과와 어두운 테마를 지원하는 3D 디자인 장바구니 구성 요소입니다.

열다 미리 보기

                <div class='bg-white dark:bg-gray-800 shadow-lg rounded-lg p-6 max-w-md mx-auto transform transition-all duration-300 hover:scale-105'>
    <h2 class='text-xl font-semibold text-gray-800 dark:text-white'>Shopping Cart</h2>
    <ul class='mt-4 space-y-4'>
        <li class='flex items-center justify-between p-4 bg-gray-100 dark:bg-gray-700 rounded-md shadow-md'>
            <img src='https://picsum.photos/50/50' alt='Product Image' class='rounded-lg'>
            <div class='flex-grow pl-4'>
                <h3 class='text-gray-800 dark:text-white font-medium'>Product Name</h3>
                <p class='text-gray-600 dark:text-gray-300'>$19.99</p>
            </div>
            <button class='bg-red-500 text-white px-3 py-1 rounded-md hover:bg-red-600 transition'>Remove</button>
        </li>
        <li class='flex items-center justify-between p-4 bg-gray-100 dark:bg-gray-700 rounded-md shadow-md'>
            <img src='https://picsum.photos/50/50' alt='Product Image' class='rounded-lg'>
            <div class='flex-grow pl-4'>
                <h3 class='text-gray-800 dark:text-white font-medium'>Another Product</h3>
                <p class='text-gray-600 dark:text-gray-300'>$29.99</p>
            </div>
            <button class='bg-red-500 text-white px-3 py-1 rounded-md hover:bg-red-600 transition'>Remove</button>
        </li>
    </ul>
    <div class='mt-6 flex justify-between items-center'>
        <span class='text-gray-800 dark:text-white text-lg'>Total:</span>
        <span class='text-gray-800 dark:text-white text-lg font-semibold'>$49.98</span>
    </div>
    <button class='mt-5 w-full bg-blue-500 text-white py-2 rounded-md hover:bg-blue-600 transition'>Proceed to Checkout</button>
</div>