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

Shopping Cart 구성 요소

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

미리 보기

HTML 코드 

<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>

관련 구성 요소

뉴모픽 쇼핑 카트

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

열다

레트로 기업 장바구니 구성 요소

80년대/90년대 미학과 기업 블루 톤에 중점을 둔 레트로/빈티지 디자인 스타일의 복잡하고 반응이 빠른 쇼핑 카트 구성 요소로 제조/산업 응용 분야에 적합합니다. 다크 모드 지원 및 대화형 요소가 포함됩니다.

열다

Shopping Cart 구성 요소

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

열다