3D 쇼핑 카트 구성 요소
시각적으로 눈에 띄는 쇼핑 카트 구성 요소로, 깊이와 참여를 유도하는 3D 디자인 요소가 있습니다. 시각적 흥미를 위해 트라이어드 색 구성표(기본 파란색, 생생한 빨간색 및 호박색 노란색)를 사용합니다. 이 복잡한 인터페이스에는 이미지, 수량 제어, 가격 요약 및 3D 움직임을 시뮬레이션하는 호버 효과가 있는 제품 목록이 포함됩니다. 어두운 테마 지원으로 완벽하게 반응합니다. 이 구성 요소는 독자가 콘텐츠를 소비하면서 권장 제품을 구매할 수 있는 콘텐츠/블로그 환경을 위해 설계되었습니다.
HTML 코드
<!-- 3D Shopping Cart Component with Triadic Color Scheme -->
<div class="w-full max-w-4xl mx-auto bg-white dark:bg-gray-900 rounded-xl overflow-hidden shadow-2xl transform transition-all duration-300 hover:scale-[1.02] perspective-1000">
<!-- Cart Header with 3D Effect -->
<div class="relative bg-blue-600 dark:bg-blue-800 text-white p-6 transform hover:skew-x-1 transition-transform duration-200">
<div class="flex justify-between items-center">
<h2 class="text-2xl font-bold transform translate-z-4 relative z-10">Shopping Cart</h2>
<span class="bg-amber-500 dark:bg-amber-600 px-4 py-2 rounded-full font-bold shadow-lg transform hover:-translate-y-1 hover:shadow-xl transition-all duration-300">4 Items</span>
</div>
<!-- Decorative 3D Elements -->
<div class="absolute -bottom-3 left-0 w-full h-3 bg-blue-700 dark:bg-blue-900 skew-x-2 transform-gpu"></div>
</div>
<!-- Cart Items Container -->
<div class="divide-y divide-gray-200 dark:divide-gray-700">
<!-- Product 1 -->
<div class="p-4 sm:p-6 hover:bg-gray-50 dark:hover:bg-gray-800 transition-all duration-200 transform hover:-translate-y-1">
<div class="flex flex-col sm:flex-row items-start sm:items-center gap-4">
<!-- Product Image with 3D Effect -->
<div class="relative w-24 h-24 sm:w-28 sm:h-28 flex-shrink-0">
<img src="https://picsum.photos/seed/prod1/200/200" alt="Product" class="w-full h-full object-cover rounded-lg shadow-md transform transition-all duration-300 hover:rotate-2 hover:scale-110 z-10" />
<div class="absolute inset-0 bg-amber-500 dark:bg-amber-600 opacity-30 rounded-lg transform translate-x-1 translate-y-1 -z-10"></div>
</div>
<!-- Product Details -->
<div class="flex-grow space-y-2">
<div class="flex flex-col sm:flex-row sm:justify-between sm:items-start">
<h3 class="text-lg font-bold text-gray-900 dark:text-gray-100">Premium Headphones</h3>
<div class="text-lg font-bold text-red-600 dark:text-red-400">$129.99</div>
</div>
<p class="text-sm text-gray-600 dark:text-gray-300">Noise-cancelling wireless headphones with premium sound quality</p>
<!-- Interactive Elements -->
<div class="flex flex-wrap gap-4 mt-3 items-center">
<!-- Quantity Selector with 3D effect -->
<div class="flex items-center space-x-1 bg-gray-100 dark:bg-gray-800 rounded-lg overflow-hidden shadow-inner p-1">
<button class="w-8 h-8 flex items-center justify-center bg-blue-600 dark:bg-blue-700 text-white rounded-md transform transition-transform hover:scale-105 active:scale-95">-</button>
<span class="w-8 text-center font-medium text-gray-800 dark:text-gray-200">1</span>
<button class="w-8 h-8 flex items-center justify-center bg-blue-600 dark:bg-blue-700 text-white rounded-md transform transition-transform hover:scale-105 active:scale-95">+</button>
</div>
<!-- Save and Remove Buttons -->
<button class="text-amber-600 dark:text-amber-400 font-medium hover:underline transform hover:translate-y-[-2px] transition-all">Save for Later</button>
<button class="text-red-600 dark:text-red-400 font-medium hover:underline transform hover:translate-y-[-2px] transition-all">Remove</button>
</div>
</div>
</div>
</div>
<!-- Product 2 -->
<div class="p-4 sm:p-6 hover:bg-gray-50 dark:hover:bg-gray-800 transition-all duration-200 transform hover:-translate-y-1">
<div class="flex flex-col sm:flex-row items-start sm:items-center gap-4">
<!-- Product Image with 3D Effect -->
<div class="relative w-24 h-24 sm:w-28 sm:h-28 flex-shrink-0">
<img src="https://picsum.photos/seed/prod2/200/200" alt="Product" class="w-full h-full object-cover rounded-lg shadow-md transform transition-all duration-300 hover:rotate-2 hover:scale-110 z-10" />
<div class="absolute inset-0 bg-red-500 dark:bg-red-600 opacity-30 rounded-lg transform translate-x-1 translate-y-1 -z-10"></div>
</div>
<!-- Product Details -->
<div class="flex-grow space-y-2">
<div class="flex flex-col sm:flex-row sm:justify-between sm:items-start">
<h3 class="text-lg font-bold text-gray-900 dark:text-gray-100">Smart Watch Pro</h3>
<div class="text-lg font-bold text-red-600 dark:text-red-400">$249.99</div>
</div>
<p class="text-sm text-gray-600 dark:text-gray-300">Fitness tracker with heart rate monitor and GPS</p>
<!-- Interactive Elements -->
<div class="flex flex-wrap gap-4 mt-3 items-center">
<!-- Quantity Selector with 3D effect -->
<div class="flex items-center space-x-1 bg-gray-100 dark:bg-gray-800 rounded-lg overflow-hidden shadow-inner p-1">
<button class="w-8 h-8 flex items-center justify-center bg-blue-600 dark:bg-blue-700 text-white rounded-md transform transition-transform hover:scale-105 active:scale-95">-</button>
<span class="w-8 text-center font-medium text-gray-800 dark:text-gray-200">2</span>
<button class="w-8 h-8 flex items-center justify-center bg-blue-600 dark:bg-blue-700 text-white rounded-md transform transition-transform hover:scale-105 active:scale-95">+</button>
</div>
<!-- Save and Remove Buttons -->
<button class="text-amber-600 dark:text-amber-400 font-medium hover:underline transform hover:translate-y-[-2px] transition-all">Save for Later</button>
<button class="text-red-600 dark:text-red-400 font-medium hover:underline transform hover:translate-y-[-2px] transition-all">Remove</button>
</div>
</div>
</div>
</div>
<!-- Product 3 -->
<div class="p-4 sm:p-6 hover:bg-gray-50 dark:hover:bg-gray-800 transition-all duration-200 transform hover:-translate-y-1">
<div class="flex flex-col sm:flex-row items-start sm:items-center gap-4">
<!-- Product Image with 3D Effect -->
<div class="relative w-24 h-24 sm:w-28 sm:h-28 flex-shrink-0">
<img src="https://picsum.photos/seed/prod3/200/200" alt="Product" class="w-full h-full object-cover rounded-lg shadow-md transform transition-all duration-300 hover:rotate-2 hover:scale-110 z-10" />
<div class="absolute inset-0 bg-blue-500 dark:bg-blue-600 opacity-30 rounded-lg transform translate-x-1 translate-y-1 -z-10"></div>
</div>
<!-- Product Details -->
<div class="flex-grow space-y-2">
<div class="flex flex-col sm:flex-row sm:justify-between sm:items-start">
<h3 class="text-lg font-bold text-gray-900 dark:text-gray-100">Digital Camera</h3>
<div class="text-lg font-bold text-red-600 dark:text-red-400">$349.99</div>
</div>
<p class="text-sm text-gray-600 dark:text-gray-300">20MP digital camera with 4K video recording and image stabilization</p>
<!-- Interactive Elements -->
<div class="flex flex-wrap gap-4 mt-3 items-center">
<!-- Quantity Selector with 3D effect -->
<div class="flex items-center space-x-1 bg-gray-100 dark:bg-gray-800 rounded-lg overflow-hidden shadow-inner p-1">
<button class="w-8 h-8 flex items-center justify-center bg-blue-600 dark:bg-blue-700 text-white rounded-md transform transition-transform hover:scale-105 active:scale-95">-</button>
<span class="w-8 text-center font-medium text-gray-800 dark:text-gray-200">1</span>
<button class="w-8 h-8 flex items-center justify-center bg-blue-600 dark:bg-blue-700 text-white rounded-md transform transition-transform hover:scale-105 active:scale-95">+</button>
</div>
<!-- Save and Remove Buttons -->
<button class="text-amber-600 dark:text-amber-400 font-medium hover:underline transform hover:translate-y-[-2px] transition-all">Save for Later</button>
<button class="text-red-600 dark:text-red-400 font-medium hover:underline transform hover:translate-y-[-2px] transition-all">Remove</button>
</div>
</div>
</div>
</div>
</div>
<!-- Cart Summary with 3D Effect -->
<div class="relative bg-gray-50 dark:bg-gray-800 p-6 transform hover:skew-x-1 transition-transform duration-300">
<!-- Decorative 3D Element -->
<div class="absolute -top-3 left-0 w-full h-3 bg-gray-200 dark:bg-gray-700 skew-x-2 transform-gpu"></div>
<div class="space-y-4">
<!-- Pricing Summary -->
<div class="space-y-2">
<div class="flex justify-between text-gray-600 dark:text-gray-300">
<span>Subtotal</span>
<span>$729.97</span>
</div>
<div class="flex justify-between text-gray-600 dark:text-gray-300">
<span>Shipping</span>
<span>$9.99</span>
</div>
<div class="flex justify-between text-gray-600 dark:text-gray-300">
<span>Tax</span>
<span>$58.40</span>
</div>
<div class="h-px bg-gray-200 dark:bg-gray-700 my-2"></div>
<div class="flex justify-between font-bold text-lg text-gray-900 dark:text-white">
<span>Total</span>
<span>$798.36</span>
</div>
</div>
<!-- Promo Code Input -->
<div class="flex flex-wrap gap-2">
<input type="text" placeholder="Promo code" class="flex-grow px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 focus:border-transparent shadow-sm transform transition-all duration-200 focus:scale-[1.02]" />
<button class="px-4 py-2 bg-amber-500 dark:bg-amber-600 text-white font-medium rounded-lg shadow-md transform transition-all duration-200 hover:scale-105 hover:shadow-lg active:scale-95">Apply</button>
</div>
<!-- Checkout Button with 3D Effect -->
<button class="relative w-full py-3 bg-red-600 dark:bg-red-700 text-white text-lg font-bold rounded-lg shadow-lg transform transition-all duration-300 hover:translate-y-[-2px] hover:shadow-xl active:translate-y-0 active:shadow-md overflow-hidden">
<div class="absolute inset-0 flex items-center justify-center">
<span class="transform transition-transform group-hover:translate-z-4">Checkout</span>
</div>
<div class="absolute bottom-0 left-0 w-full h-1 bg-red-800 dark:bg-red-900"></div>
</button>
<!-- Continue Shopping Link -->
<div class="text-center">
<a href="#" class="inline-flex items-center text-blue-600 dark:text-blue-400 font-medium hover:underline transform transition-all duration-200 hover:translate-y-[-2px]">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18" />
</svg>
Continue Reading
</a>
</div>
</div>
</div>
<!-- Recently Viewed Section -->
<div class="p-6 bg-white dark:bg-gray-900 border-t border-gray-200 dark:border-gray-700">
<h3 class="text-lg font-bold text-gray-900 dark:text-gray-100 mb-4">Recently Viewed</h3>
<div class="grid grid-cols-2 sm:grid-cols-4 gap-4">
<!-- Item 1 -->
<div class="group relative overflow-hidden rounded-lg shadow-md transform transition-all duration-300 hover:scale-105 hover:rotate-1 hover:shadow-xl">
<img src="https://picsum.photos/seed/recent1/200/200" alt="Recent item" class="w-full h-24 object-cover" />
<div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent opacity-0 group-hover:opacity-100 transition-opacity">
<div class="absolute bottom-2 left-2 text-white text-sm font-medium">Wireless Earbuds</div>
</div>
</div>
<!-- Item 2 -->
<div class="group relative overflow-hidden rounded-lg shadow-md transform transition-all duration-300 hover:scale-105 hover:rotate-1 hover:shadow-xl">
<img src="https://picsum.photos/seed/recent2/200/200" alt="Recent item" class="w-full h-24 object-cover" />
<div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent opacity-0 group-hover:opacity-100 transition-opacity">
<div class="absolute bottom-2 left-2 text-white text-sm font-medium">Portable Speaker</div>
</div>
</div>
<!-- Item 3 -->
<div class="group relative overflow-hidden rounded-lg shadow-md transform transition-all duration-300 hover:scale-105 hover:rotate-1 hover:shadow-xl">
<img src="https://picsum.photos/seed/recent3/200/200" alt="Recent item" class="w-full h-24 object-cover" />
<div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent opacity-0 group-hover:opacity-100 transition-opacity">
<div class="absolute bottom-2 left-2 text-white text-sm font-medium">Smart Light Bulb</div>
</div>
</div>
<!-- Item 4 -->
<div class="group relative overflow-hidden rounded-lg shadow-md transform transition-all duration-300 hover:scale-105 hover:rotate-1 hover:shadow-xl">
<img src="https://picsum.photos/seed/recent4/200/200" alt="Recent item" class="w-full h-24 object-cover" />
<div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent opacity-0 group-hover:opacity-100 transition-opacity">
<div class="absolute bottom-2 left-2 text-white text-sm font-medium">Tablet Stand</div>
</div>
</div>
</div>
</div>
</div>