레트로쇼핑카트구성 요소
레트로/빈티지 미학, 트라이어딕 색 구성표 및 다크 모드를 지원하는 반응형 장바구니 구성 요소로 포트폴리오에 적합합니다.
HTML 코드
<div class="font-sans antialiased text-[#222831] bg-[#FDF0D5] dark:bg-[#001D3D] dark:text-[#E0FBFC] min-h-screen p-4 sm:p-6 lg:p-8">
<div class="max-w-4xl mx-auto bg-[#F6AE2D] dark:bg-[#003566] p-6 sm:p-8 rounded-lg shadow-xl border-4 border-[#00A1AB] dark:border-[#FFC300] transform transition duration-300 hover:scale-[1.01] overflow-hidden">
<h1 class="text-3xl sm:text-4xl font-extrabold text-[#001D3D] dark:text-[#E0FBFC] mb-6 sm:mb-8 text-center uppercase tracking-wide border-b-4 border-[#001D3D] dark:border-[#FFC300] pb-2">
Your Groovy Cart
</h1>
<div class="space-y-6 mb-8">
<!-- Cart Item 1 -->
<div class="flex flex-col sm:flex-row items-center bg-[#FDF0D5] dark:bg-[#001D3D] p-4 rounded-lg shadow-md border-2 border-[#00A1AB] dark:border-[#FFC300] transition duration-200 hover:shadow-lg">
<img src="https://picsum.photos/100/100?random=1" alt="Vintage Gadget" class="w-24 h-24 object-cover rounded-md mb-4 sm:mb-0 sm:mr-6 shadow-sm border border-gray-300">
<div class="flex-1 text-center sm:text-left">
<h2 class="text-xl font-bold text-[#001D3D] dark:text-[#E0FBFC] mb-1">Retro Boombox</h2>
<p class="text-sm text-[#393E46] dark:text-gray-300">Classic sound, modern vibe.</p>
<div class="flex items-center justify-center sm:justify-start mt-2">
<p class="text-lg font-extrabold text-[#00A1AB] dark:text-[#FFC300] mr-4">$129.99</p>
<div class="flex items-center space-x-2">
<button class="bg-[#001D3D] dark:bg-[#FFC300] text-[#FDF0D5] dark:text-[#001D3D] px-3 py-1 rounded-md text-sm font-semibold transition duration-150 hover:bg-[#393E46] dark:hover:bg-[#E0FBFC]">-</button>
<span class="text-[#001D3D] dark:text-[#E0FBFC] font-semibold">1</span>
<button class="bg-[#001D3D] dark:bg-[#FFC300] text-[#FDF0D5] dark:text-[#001D3D] px-3 py-1 rounded-md text-sm font-semibold transition duration-150 hover:bg-[#393E46] dark:hover:bg-[#E0FBFC]">+</button>
</div>
</div>
</div>
<button class="mt-4 sm:mt-0 ml-0 sm:ml-6 text-red-600 dark:text-red-400 hover:text-red-800 dark:hover:text-red-500 transition duration-150">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
</svg>
</button>
</div>
<!-- Cart Item 2 -->
<div class="flex flex-col sm:flex-row items-center bg-[#FDF0D5] dark:bg-[#001D3D] p-4 rounded-lg shadow-md border-2 border-[#00A1AB] dark:border-[#FFC300] transition duration-200 hover:shadow-lg">
<img src="https://picsum.photos/100/100?random=2" alt="Vintage Toy" class="w-24 h-24 object-cover rounded-md mb-4 sm:mb-0 sm:mr-6 shadow-sm border border-gray-300">
<div class="flex-1 text-center sm:text-left">
<h2 class="text-xl font-bold text-[#001D3D] dark:text-[#E0FBFC] mb-1">Pixelated Game Cartridge</h2>
<p class="text-sm text-[#393E46] dark:text-gray-300">Unlock endless 8-bit adventures.</p>
<div class="flex items-center justify-center sm:justify-start mt-2">
<p class="text-lg font-extrabold text-[#00A1AB] dark:text-[#FFC300] mr-4">$39.50</p>
<div class="flex items-center space-x-2">
<button class="bg-[#001D3D] dark:bg-[#FFC300] text-[#FDF0D5] dark:text-[#001D3D] px-3 py-1 rounded-md text-sm font-semibold transition duration-150 hover:bg-[#393E46] dark:hover:bg-[#E0FBFC]">-</button>
<span class="text-[#001D3D] dark:text-[#E0FBFC] font-semibold">2</span>
<button class="bg-[#001D3D] dark:bg-[#FFC300] text-[#FDF0D5] dark:text-[#001D3D] px-3 py-1 rounded-md text-sm font-semibold transition duration-150 hover:bg-[#393E46] dark:hover:bg-[#E0FBFC]">+</button>
</div>
</div>
</div>
<button class="mt-4 sm:mt-0 ml-0 sm:ml-6 text-red-600 dark:text-red-400 hover:text-red-800 dark:hover:text-red-500 transition duration-150">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
</svg>
</button>
</div>
</div>
<!-- Cart Summary -->
<div class="bg-[#FDF0D5] dark:bg-[#001D3D] p-6 rounded-lg shadow-md border-2 border-[#00A1AB] dark:border-[#FFC300] mb-8">
<h2 class="text-2xl font-bold text-[#001D3D] dark:text-[#E0FBFC] mb-4 text-center border-b-2 border-[#F6AE2D] dark:border-[#FFC300] pb-2">Cart Totals</h2>
<div class="flex justify-between items-center text-lg mb-2">
<span class="text-[#393E46] dark:text-gray-300">Subtotal:</span>
<span class="font-semibold text-[#001D3D] dark:text-[#E0FBFC]" id="subtotal">$208.99</span>
</div>
<div class="flex justify-between items-center text-lg mb-4">
<span class="text-[#393E46] dark:text-gray-300">Shipping:</span>
<span class="font-semibold text-[#001D3D] dark:text-[#E0FBFC]" id="shipping">$7.50</span>
</div>
<div class="flex justify-between items-center text-xl font-extrabold border-t-2 border-[#F6AE2D] dark:border-[#FFC300] pt-4">
<span class="text-[#001D3D] dark:text-[#E0FBFC]">Total:</span>
<span class="text-[#00A1AB] dark:text-[#FFC300]" id="total">$216.49</span>
</div>
</div>
<div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4">
<button class="bg-[#001D3D] dark:bg-[#FFC300] text-[#FDF0D5] dark:text-[#001D3D] font-bold py-3 px-8 rounded-lg shadow-md uppercase tracking-wider transition duration-300 ease-in-out transform hover:scale-105 hover:bg-[#393E46] dark:hover:bg-[#E0FBFC] border-2 border-[#FDF0D5] dark:border-[#001D3D]">
Continue Shopping
</button>
<button class="bg-[#00A1AB] dark:bg-[#2A9D8F] text-[#FDF0D5] dark:text-[#001D3D] font-bold py-3 px-8 rounded-lg shadow-md uppercase tracking-wider transition duration-300 ease-in-out transform hover:scale-105 hover:bg-[#007D88] dark:hover:bg-[#3DDC84] border-2 border-[#FDF0D5] dark:border-[#001D3D]">
Proceed to Checkout
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 inline-block ml-2 -mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3" />
</svg>
</button>
</div>
<p class="text-center text-xs mt-8 text-[#393E46] dark:text-gray-400">
Embrace the past, shop the future.
</p>
</div>
</div>관련 구성 요소
Shopping Cart 구성 요소
레트로/빈티지 스타일의 장바구니 구성 요소로, 그레이스케일 색 구성표, 적당한 복잡성, 어두운 테마를 지원하는 반응형 디자인을 제공합니다. Tailwind CSS를 사용하는 비즈니스/기업 웹사이트용으로 설계되었습니다. JavaScript는 없으며 Tailwind 클래스가있는 HTML 만 있습니다. 이미지에는 picsum.photos를 사용하고 아바타에는 randomuser.me 를 사용합니다.