CCHub Logo CCHub Tailwind Collection
구성 요소 쇼핑 카트 뉴모픽 쇼핑 카트

뉴모픽 쇼핑 카트

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

미리 보기

HTML 코드 

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

관련 구성 요소

Memphis_Industrial_Shopping_Cart_Component

산업/제조 상황에 맞게 조정된 Memphis Design 영향의 단순하고 반응이 빠른 쇼핑 카트 구성 요소로, 단일 밝은 강조 색상과 다크 모드를 지원하는 단색 팔레트를 특징으로 합니다.

열다

3D 쇼핑 카트 구성 요소

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

열다

Shopping Cart 구성 요소

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

열다