레트로 기업 장바구니 구성 요소
80년대/90년대 미학과 기업 블루 톤에 중점을 둔 레트로/빈티지 디자인 스타일의 복잡하고 반응이 빠른 쇼핑 카트 구성 요소로 제조/산업 응용 분야에 적합합니다. 다크 모드 지원 및 대화형 요소가 포함됩니다.
HTML 코드
<div class="min-h-screen bg-gray-100 flex items-center justify-center p-4 dark:bg-gray-900 font-mono">
<div class="w-full max-w-6xl bg-white border-4 border-blue-800 shadow-lg p-6 rounded-lg relative overflow-hidden dark:bg-gray-800 dark:border-blue-500">
<!-- Retro Header Bar -->
<div class="absolute top-0 left-0 right-0 h-8 bg-blue-700 flex items-center justify-between px-4 text-white text-sm font-bold border-b-2 border-blue-900 dark:bg-blue-600 dark:border-blue-800">
<span class="tracking-wider">SYSTEM CART V1.9.89Beta</span>
<div class="flex space-x-2">
<span>[FILE]</span>
<span>[EDIT]</span>
<span>[VIEW]</span>
<span>[HELP]</span>
</div>
</div>
<div class="pt-10 pb-4">
<!-- Main Content Area -->
<div class="flex flex-col lg:flex-row gap-6">
<!-- Cart Items Section -->
<div class="lg:w-2/3 bg-gray-50 border-2 border-blue-600 p-4 rounded-md shadow-inner dark:bg-gray-700 dark:border-blue-400">
<h2 class="text-2xl font-bold text-blue-800 mb-6 border-b-2 border-blue-400 pb-2 dark:text-blue-300 dark:border-blue-600">\> INVENTORY SELECTION: ACTIVE</h2>
<!-- Cart Item 1 -->
<div class="flex flex-col sm:flex-row items-center bg-white p-4 mb-4 rounded-md shadow-sm border border-blue-200 dark:bg-gray-800 dark:border-blue-700">
<img src="https://picsum.photos/seed/tool1/120/120" alt="Industrial Robot Arm" class="w-24 h-24 sm:w-32 sm:h-32 object-cover rounded-sm mr-4 mb-4 sm:mb-0 border border-blue-300 dark:border-blue-600">
<div class="flex-grow">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Z-900 Automated Assembly Arm</h3>
<p class="text-gray-600 text-sm mb-2 dark:text-gray-400">SKU: IND-RA9001 | Lot: 01-2023</p>
<div class="flex items-center space-x-4">
<div class="flex items-center border border-gray-300 rounded overflow-hidden dark:border-gray-600">
<button class="px-3 py-1 bg-gray-200 text-gray-700 dark:bg-gray-600 dark:text-gray-300">-</button>
<input type="text" value="2" class="w-12 text-center border-l border-r border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100" readonly>
<button class="px-3 py-1 bg-gray-200 text-gray-700 dark:bg-gray-600 dark:text-gray-300">+</button>
</div>
<p class="text-lg font-bold text-green-700 dark:text-green-400">$49,999.00</p>
</div>
</div>
<button class="ml-0 sm:ml-4 mt-4 sm:mt-0 px-4 py-2 bg-red-600 text-white rounded-md hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 dark:bg-red-700 dark:hover:bg-red-800">REMOVE</button>
</div>
<!-- Cart Item 2 -->
<div class="flex flex-col sm:flex-row items-center bg-white p-4 mb-4 rounded-md shadow-sm border border-blue-200 dark:bg-gray-800 dark:border-blue-700">
<img src="https://picsum.photos/seed/gearbox/120/120" alt="Precision Gearbox" class="w-24 h-24 sm:w-32 sm:h-32 object-cover rounded-sm mr-4 mb-4 sm:mb-0 border border-blue-300 dark:border-blue-600">
<div class="flex-grow">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">HD Precision Gearbox (Model M8)</h3>
<p class="text-gray-600 text-sm mb-2 dark:text-gray-400">SKU: PART-GBM800 | Lot: 03-2024</p>
<div class="flex items-center space-x-4">
<div class="flex items-center border border-gray-300 rounded overflow-hidden dark:border-gray-600">
<button class="px-3 py-1 bg-gray-200 text-gray-700 dark:bg-gray-600 dark:text-gray-300">-</button>
<input type="text" value="5" class="w-12 text-center border-l border-r border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100" readonly>
<button class="px-3 py-1 bg-gray-200 text-gray-700 dark:bg-gray-600 dark:text-gray-300">+</button>
</div>
<p class="text-lg font-bold text-green-700 dark:text-green-400">$1,250.00</p>
</div>
</div>
<button class="ml-0 sm:ml-4 mt-4 sm:mt-0 px-4 py-2 bg-red-600 text-white rounded-md hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 dark:bg-red-700 dark:hover:bg-red-800">REMOVE</button>
</div>
<div class="flex justify-between items-center text-gray-700 dark:text-gray-300">
<button class="px-6 py-2 bg-blue-200 border-2 border-blue-400 text-blue-800 hover:bg-blue-300 rounded-md shadow-md dark:bg-blue-800 dark:border-blue-600 dark:text-blue-200 dark:hover:bg-blue-700">
\u003c\u003c ADD MORE ITEMS
</button>
<button class="text-red-600 hover:underline">
CLEAR ALL ITEMS
</button>
</div>
</div>
<!-- Order Summary Section -->
<div class="lg:w-1/3 bg-gray-50 border-2 border-blue-600 p-4 rounded-md shadow-inner dark:bg-gray-700 dark:border-blue-400">
<h2 class="text-2xl font-bold text-blue-800 mb-6 border-b-2 border-blue-400 pb-2 dark:text-blue-300 dark:border-blue-600">\> ORDER LOG: SUMMARY</h2>
<div class="mb-4">
<div class="flex justify-between py-2 border-b border-gray-300 dark:border-gray-600">
<span class="text-gray-700 dark:text-gray-300">Item Subtotal:</span>
<span class="font-bold text-gray-900 dark:text-gray-100">$101,248.00</span>
</div>
<div class="flex justify-between py-2 border-b border-gray-300 dark:border-gray-600">
<span class="text-gray-700 dark:text-gray-300">Shipping (Freight):</span>
<span class="font-bold text-gray-900 dark:text-gray-100">$750.00</span>
</div>
<div class="flex justify-between py-2 border-b border-gray-300 dark:border-gray-600">
<span class="text-gray-700 dark:text-gray-300">Estimated Tax (7.5%):</span>
<span class="font-bold text-gray-900 dark:text-gray-100">$7,650.00</span>
</div>
<div class="flex justify-between py-2">
<span class="text-lg font-bold text-blue-800 dark:text-blue-300">TOTAL DUE:</span>
<span class="text-2xl font-extrabold text-blue-900 dark:text-blue-100">$109,648.00</span>
</div>
</div>
<div class="mb-6">
<label for="promo" class="block text-gray-700 text-sm font-bold mb-2 dark:text-gray-300">PROMO CODE / ACCOUNT ID:</label>
<div class="flex">
<input type="text" id="promo" class="flex-grow px-3 py-2 border rounded-l-md focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 border-gray-300 dark:border-gray-600" placeholder="Enter code">
<button class="bg-blue-600 text-white px-4 py-2 rounded-r-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:bg-blue-700 dark:hover:bg-blue-600">
APPLY
</button>
</div>
</div>
<p class="text-gray-600 text-xs mb-4 dark:text-gray-400">
<strong class="text-yellow-600 dark:text-yellow-400">\u003e\u003e SYSTEM MESSAGE:</strong> All orders are subject to final review and confirmation. Lead times may vary based on component availability. For bulk discounts, contact sales.
</p>
<button class="w-full bg-blue-800 text-white font-bold py-3 mt-4 rounded-md shadow-lg hover:bg-blue-900 focus:outline-none focus:ring-4 focus:ring-blue-500 focus:ring-offset-2 transition duration-300 ease-in-out dark:bg-blue-600 dark:hover:bg-blue-500">
\u003c\u003c INITIATE CHECKOUT PROTOCOL \u003e\u003e
</button>
</div>
</div>
</div>
<!-- Retro Footer Bar -->
<div class="absolute bottom-0 left-0 right-0 h-8 bg-blue-700 flex items-center justify-between px-4 text-white text-sm font-bold border-t-2 border-blue-900 dark:bg-blue-600 dark:border-blue-800">
<span class="tracking-wider">STATUS: READY | USER: JDOE89 | SESSION: ACTIVE</span>
<div class="flex space-x-4">
<span>[F1-Help]</span>
<span>[F5-Refresh]</span>
<span>[F12-Exit]</span>
</div>
</div>
</div>
</div>관련 구성 요소
Shopping Cart 구성 요소
반응형 디자인과 다크 모드를 지원하는 레트로 빈티지 스타일의 장바구니 구성 요소로, Tailwind CSS를 활용하고 자리 표시자 이미지와 아바타를 제공합니다.
Shopping Cart 구성 요소
전자 상거래 플랫폼을 위해 설계된 반응형 쇼핑 카트 구성 요소로, 3D 디자인 스타일과 파스텔 색상 구성표를 특징으로 합니다. 제품 목록, 수량 및 결제 버튼과 같은 여러 대화형 요소가 장착되어 있어 어두운 테마를 지원합니다.
Shopping Cart 구성 요소
회색조 색 구성표가 있는 복잡하고 반응이 빠른 쇼핑 카트 구성 요소로, 블로그/콘텐츠 용도로 설계되었습니다. Tailwind CSS를 사용하는 마이크로 인터랙션이 특징이며, 다크 모드를 지원하고 JavaScript가 없습니다.