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

Shopping Cart 구성 요소

반응형 디자인의 간단한 다크 모드 장바구니 구성 요소로, 제품 목록, 수량 및 총계를 표시합니다. 어두운 배경의 트라이어드 색 구성표를 사용합니다. 콘텐츠 소비를 위해 설계되었습니다.

미리 보기

HTML 코드 

<div class="dark:bg-gray-900 dark:text-white min-h-screen p-4">
  <h1 class="text-2xl font-bold mb-6 text-center text-blue-400">Your Shopping Cart</h1>

  <div class="max-w-md mx-auto bg-gray-800 rounded-lg shadow-lg p-5">

    <!-- Product Item 1 -->
    <div class="flex items-center mb-5">
      <img src="https://picsum.photos/id/237/80/80" alt="Product Image" class="w-20 h-20 object-cover rounded-md mr-4">
      <div class="flex-grow">
        <h3 class="text-lg font-semibold text-green-400">Awesome Gadget</h3>
        <p class="text-gray-400">Quantity: 1</p>
      </div>
      <span class="text-lg font-bold text-red-400">$29.99</span>
    </div>

    <!-- Product Item 2 -->
    <div class="flex items-center mb-5">
      <img src="https://picsum.photos/id/238/80/80" alt="Product Image" class="w-20 h-20 object-cover rounded-md mr-4">
      <div class="flex-grow">
        <h3 class="text-lg font-semibold text-green-400">Super Item</h3>
        <p class="text-gray-400">Quantity: 2</p>
      </div>
      <span class="text-lg font-bold text-red-400">$19.50</span>
    </div>

    <!-- Product Item 3 -->
    <div class="flex items-center mb-5">
      <img src="https://picsum.photos/id/239/80/80" alt="Product Image" class="w-20 h-20 object-cover rounded-md mr-4">
      <div class="flex-grow">
        <h3 class="text-lg font-semibold text-green-400">Mega Product</h3>
        <p class="text-gray-400">Quantity: 1</p>
      </div>
      <span class="text-lg font-bold text-red-400">$49.00</span>
    </div>

    <!-- Total -->
    <div class="border-t border-gray-700 pt-4 flex justify-between items-center">
      <span class="text-xl font-bold text-blue-400">Total:</span>
      <span class="text-xl font-bold text-red-400">$98.49</span>
    </div>

    <button class="mt-6 w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-4 rounded-lg focus:outline-none focus:shadow-outline transition duration-300">
      Proceed to Checkout
    </button>
  </div>

  <!-- Responsive adjustments -->
  <style>
    @media (max-width: 640px) {
      .max-w-md {
        margin-left: 1rem;
        margin-right: 1rem;
      }
    }
  </style>
</div>

관련 구성 요소

Industrial_Travel_Shopping_Cart

산업 디자인 미학과 포레스트 그린 색상 구성표를 갖춘 복잡하고 반응이 빠른 쇼핑 카트 구성 요소로 여행 및 관광 예약 웹사이트에 적합합니다. 다크 모드 지원, 풍부한 인터페이스 요소 및 시맨틱 HTML이 포함됩니다.

열다

Shopping Cart 구성 요소

Neumorphism 디자인과 어두운 테마 지원을 위한 보색 구성표가 있는 간단한 반응형 장바구니 구성 요소입니다.

열다

레트로/빈티지 쇼핑 카트

레트로/빈티지 스타일, 파스텔 색 구성표 및 단순한 복잡성을 가진 장바구니 구성 요소. Tailwind CSS를 사용하여 어두운 테마를 지원하는 반응형 디자인.

열다