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

Shopping Cart 구성 요소

Glassmorphism 효과로 설계된 Shopping Cart Component는 보색 구성표를 활용하고 다크 모드에 최적화되어 있습니다. 포트폴리오 사용, 작업 또는 제품 전시에 적합합니다.

미리 보기

HTML 코드 

<div class="flex flex-col items-center justify-center min-h-screen bg-gray-900 dark:bg-gray-800 p-4">
    <div class="bg-white dark:bg-gray-700 rounded-lg shadow-lg backdrop-blur-md bg-opacity-30 border border-gray-200 dark:border-gray-600 p-6 w-full max-w-md">
        <h2 class="text-lg font-semibold text-gray-800 dark:text-white text-center">Shopping Cart</h2>
        <div class="mt-4">
            <div class="flex items-center justify-between border-b pb-2 mb-2">
                <img src="https://picsum.photos/50/50" alt="Product Image" class="rounded-md" />
                <div class="flex-1 mx-2">
                    <h3 class="text-md font-medium text-gray-700 dark:text-gray-300">Product Name</h3>
                    <p class="text-sm text-gray-500 dark:text-gray-400">$29.99</p>
                </div>
                <span class="text-gray-600 dark:text-gray-200">Quantity: 1</span>
            </div>
            <div class="flex items-center justify-between border-b pb-2 mb-2">
                <img src="https://picsum.photos/50/50?random=1" alt="Product Image" class="rounded-md" />
                <div class="flex-1 mx-2">
                    <h3 class="text-md font-medium text-gray-700 dark:text-gray-300">Another Product</h3>
                    <p class="text-sm text-gray-500 dark:text-gray-400">$19.99</p>
                </div>
                <span class="text-gray-600 dark:text-gray-200">Quantity: 2</span>
            </div>
        </div>
        <div class="flex items-center justify-between border-t pt-4">
            <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Total:</h3>
            <span class="text-lg font-bold text-gray-900 dark:text-gray-100">$69.97</span>
        </div>
        <button class="mt-4 w-full bg-blue-600 hover:bg-blue-500 text-white font-semibold py-2 px-4 rounded-lg transition duration-200">Checkout</button>
    </div>
</div>

관련 구성 요소

뉴모픽 쇼핑 카트

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

열다

Shopping Cart 구성 요소

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

열다

Shopping Cart 구성 요소

Tailwind CSS를 사용하는 단순하고 미니멀한 장바구니 구성 요소로, 흙색 색 구성표, 소셜 미디어 목적 및 어두운 테마 지원을 제공합니다. 반응형이며 샘플 항목을 포함합니다. 이 구성 요소는 최소한의 요소와 JavaScript 없이 기본 표시를 위해 설계되었습니다.

열다