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

Shopping Cart 구성 요소

레트로/빈티지 디자인, 보색 구성표 및 다크 모드 지원을 갖춘 간단하고 반응이 빠른 장바구니 구성 요소로, Tailwind CSS를 사용하여 제작되었습니다.

미리 보기

HTML 코드 

<div class="container mx-auto p-4">
  <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
    <h2 class="text-xl font-bold text-gray-800 dark:text-white mb-4">Shopping Cart</h2>
    <div class="space-y-4">
      <!-- Cart Item -->
      <div class="flex justify-between items-center border-b pb-4 border-gray-200 dark:border-gray-700">
        <div class="flex items-center">
          <img class="w-16 h-16 object-cover rounded mr-4 filter sepia" src="https://picsum.photos/seed/retro1/100/100" alt="Product Image">
          <div>
            <h3 class="text-gray-800 dark:text-white font-medium">Retro T-Shirt</h3>
            <p class="text-gray-600 dark:text-gray-300 text-sm">Size: L</p>
          </div>
        </div>
        <div class="text-gray-700 dark:text-gray-200 font-semibold">$29.99</div>
      </div>
      <!-- Cart Item -->
      <div class="flex justify-between items-center border-b pb-4 border-gray-200 dark:border-gray-700">
        <div class="flex items-center">
          <img class="w-16 h-16 object-cover rounded mr-4 filter sepia" src="https://picsum.photos/seed/retro2/100/100" alt="Product Image">
          <div>
            <h3 class="text-gray-800 dark:text-white font-medium">Vintage Jeans</h3>
            <p class="text-gray-600 dark:text-gray-300 text-sm">Size: 32</p>
          </div>
        </div>
        <div class="text-gray-700 dark:text-gray-200 font-semibold">$59.99</div>
      </div>
    </div>
    <div class="flex justify-between items-center mt-6">
      <div class="text-xl font-bold text-gray-800 dark:text-white">Total:</div>
      <div class="text-xl font-bold text-gray-800 dark:text-white">$89.98</div>
    </div>
    <button class="mt-6 w-full bg-rose-500 hover:bg-rose-600 text-white font-bold py-2 px-4 rounded dark:bg-teal-500 dark:hover:bg-teal-600 filter sepia">Checkout</button>
  </div>
</div>

관련 구성 요소

Shopping Cart 구성 요소

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

열다

Shopping Cart 구성 요소

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

열다

3D 쇼핑 카트 구성 요소

시각적으로 눈에 띄는 쇼핑 카트 구성 요소로, 깊이와 참여를 유도하는 3D 디자인 요소가 있습니다. 시각적 흥미를 위해 트라이어드 색 구성표(기본 파란색, 생생한 빨간색 및 호박색 노란색)를 사용합니다. 이 복잡한 인터페이스에는 이미지, 수량 제어, 가격 요약 및 3D 움직임을 시뮬레이션하는 호버 효과가 있는 제품 목록이 포함됩니다. 어두운 테마 지원으로 완벽하게 반응합니다. 이 구성 요소는 독자가 콘텐츠를 소비하면서 권장 제품을 구매할 수 있는 콘텐츠/블로그 환경을 위해 설계되었습니다.

열다