Shopping Cart 구성 요소
3D 디자인, 흙색 및 복잡한 대화형 요소가 있는 쇼핑 카트 구성 요소. Tailwind CSS를 사용하여 반응형 디자인과 어두운 테마를 지원하는 블로그/콘텐츠 웹사이트용으로 설계되었습니다.
HTML 코드
<div class="container mx-auto p-4 font-sans antialiased text-gray-800 dark:text-gray-200">
<div class="relative min-h-screen bg-gradient-to-br from-indigo-100 to-purple-200 dark:from-gray-900 dark:to-gray-800 rounded-3xl shadow-2xl p-6 lg:p-10 transform skew-y-1 scale-95 origin-top-left">
<div class="absolute inset-0 bg-white dark:bg-gray-700 opacity-60 rounded-3xl transform -skew-y-1 scale-95 origin-bottom-right shadow-xl"></div>
<div class="absolute inset-0 bg-yellow-100 dark:bg-yellow-900 rounded-3xl transform skew-y-1 scale-95 origin-top-left shadow-xl"></div>
<div class="relative z-10 p-4 lg:p-8 bg-white dark:bg-gray-800 rounded-2xl shadow-xl border border-gray-200 dark:border-gray-700 animate-fade-in-down">
<!-- Header -->
<div class="mb-8 border-b border-gray-200 dark:border-gray-700 pb-4">
<h1 class="text-4xl lg:text-5xl font-extrabold text-gray-900 dark:text-white mb-2 transform perspective-1000 rotateY-5 scale-105">
<span class="bg-clip-text text-transparent bg-gradient-to-r from-green-600 to-indigo-600 dark:from-green-400 dark:to-indigo-400">Your Shopping Cart</span>
</h1>
<p class="text-lg lg:text-xl text-gray-600 dark:text-gray-400 italic">Review your selections</p>
</div>
<!-- Cart Items Grid -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 animate-fade-in-up">
<!-- Cart Item 1 -->
<div class="bg-white dark:bg-gray-700 shadow-lg rounded-xl overflow-hidden transform transition-all duration-300 hover:scale-102 hover:shadow-2xl border border-gray-200 dark:border-gray-600 relative perspective-800">
<div class="absolute inset-0 bg-gradient-to-br from-orange-200 to-yellow-200 dark:from-orange-800 dark:to-yellow-800 opacity-20 transform skew-y-2 origin-top-right"></div>
<div class="p-6 relative z-10">
<img class="w-full h-40 object-cover rounded-md mb-4 shadow-md border border-gray-300 dark:border-gray-600 transform translateZ-20 bg-gray-200 dark:bg-gray-600" src="https://picsum.photos/seed/item1/400/250" alt="Product Image">
<h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">Adventure Backpack</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm mb-3">Durable and spacious, perfect for hiking.</p>
<div class="flex items-center justify-between mb-4">
<span class="text-xl lg:text-2xl font-bold text-green-700 dark:text-green-400 shadow-text-sm">$79.99</span>
<div class="flex items-center">
<button class="bg-red-500 dark:bg-red-700 text-white p-2 rounded-full hover:bg-red-600 dark:hover:bg-red-800 transition transform scale-105 active:scale-95 shadow-md mr-2">-</button>
<span class="text-lg font-medium text-gray-800 dark:text-gray-200">1</span>
<button class="bg-green-500 dark:bg-green-700 text-white p-2 rounded-full hover:bg-green-600 dark:hover:bg-green-800 transition transform scale-105 active:scale-95 shadow-md ml-2">+</button>
</div>
</div>
<button class="w-full bg-red-600 dark:bg-red-800 text-white py-2 px-4 rounded-lg hover:bg-red-700 dark:hover:bg-red-900 transition duration-300 ease-in-out transform hover:scale-105 active:scale-95 shadow-lg relative perspective-600 z-20">
<span class="relative z-10">Remove</span>
<div class="absolute inset-0 bg-red-500 dark:bg-red-700 opacity-30 blur-sm"></div>
</button>
</div>
</div>
<!-- Cart Item 2 -->
<div class="bg-white dark:bg-gray-700 shadow-lg rounded-xl overflow-hidden transform transition-all duration-300 hover:scale-102 hover:shadow-2xl border border-gray-200 dark:border-gray-600 relative perspective-800">
<div class="absolute inset-0 bg-gradient-to-br from-cyan-200 to-blue-200 dark:from-cyan-800 dark:to-blue-800 opacity-20 transform skew-y-2 origin-top-right"></div>
<div class="p-6 relative z-10">
<img class="w-full h-40 object-cover rounded-md mb-4 shadow-md border border-gray-300 dark:border-gray-600 transform translateZ-20 bg-gray-200 dark:bg-gray-600" src="https://picsum.photos/seed/item2/400/250" alt="Product Image">
<h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">Wireless Noise-Cancelling Headphones</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm mb-3">Immersive sound experience with comfort.</p>
<div class="flex items-center justify-between mb-4">
<span class="text-xl lg:text-2xl font-bold text-green-700 dark:text-green-400 shadow-text-sm">$129.99</span>
<div class="flex items-center">
<button class="bg-red-500 dark:bg-red-700 text-white p-2 rounded-full hover:bg-red-600 dark:hover:bg-red-800 transition transform scale-105 active:scale-95 shadow-md mr-2">-</button>
<span class="text-lg font-medium text-gray-800 dark:text-gray-200">1</span>
<button class="bg-green-500 dark:bg-green-700 text-white p-2 rounded-full hover:bg-green-600 dark:hover:bg-green-800 transition transform scale-105 active:scale-95 shadow-md ml-2">+</button>
</div>
</div>
<button class="w-full bg-red-600 dark:bg-red-800 text-white py-2 px-4 rounded-lg hover:bg-red-700 dark:hover:bg-red-900 transition duration-300 ease-in-out transform hover:scale-105 active:scale-95 shadow-lg relative perspective-600 z-20">
<span class="relative z-10">Remove</span>
<div class="absolute inset-0 bg-red-500 dark:bg-red-700 opacity-30 blur-sm"></div>
</button>
</div>
</div>
<!-- Cart Item 3 -->
<div class="bg-white dark:bg-gray-700 shadow-lg rounded-xl overflow-hidden transform transition-all duration-300 hover:scale-102 hover:shadow-2xl border border-gray-200 dark:border-gray-600 relative perspective-800">
<div class="absolute inset-0 bg-gradient-to-br from-pink-200 to-red-200 dark:from-pink-800 dark:to-red-800 opacity-20 transform skew-y-2 origin-top-right"></div>
<div class="p-6 relative z-10">
<img class="w-full h-40 object-cover rounded-md mb-4 shadow-md border border-gray-300 dark:border-gray-600 transform translateZ-20 bg-gray-200 dark:bg-gray-600" src="https://picsum.photos/seed/item3/400/250" alt="Product Image">
<h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">Vintage Leather Journal</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm mb-3">Handcrafted for timeless writing.</p>
<div class="flex items-center justify-between mb-4">
<span class="text-xl lg:text-2xl font-bold text-green-700 dark:text-green-400 shadow-text-sm">$24.99</span>
<div class="flex items-center">
<button class="bg-red-500 dark:bg-red-700 text-white p-2 rounded-full hover:bg-red-600 dark:hover:bg-red-800 transition transform scale-105 active:scale-95 shadow-md mr-2">-</button>
<span class="text-lg font-medium text-gray-800 dark:text-gray-200">2</span>
<button class="bg-green-500 dark:bg-green-700 text-white p-2 rounded-full hover:bg-green-600 dark:hover:bg-green-800 transition transform scale-105 active:scale-95 shadow-md ml-2">+</button>
</div>
</div>
<button class="w-full bg-red-600 dark:bg-red-800 text-white py-2 px-4 rounded-lg hover:bg-red-700 dark:hover:bg-red-900 transition duration-300 ease-in-out transform hover:scale-105 active:scale-95 shadow-lg relative perspective-600 z-20">
<span class="relative z-10">Remove</span>
<div class="absolute inset-0 bg-red-500 dark:bg-red-700 opacity-30 blur-sm"></div>
</button>
</div>
</div>
</div>
<!-- Cart Summary -->
<div class="mt-8 border-t border-gray-200 dark:border-gray-700 pt-6 animate-fade-in-up">
<div class="flex flex-col md:flex-row justify-between items-center mb-6">
<div class="text-2xl font-semibold text-gray-900 dark:text-white mb-4 md:mb-0 transform perspective-1000 rotateY-5 scale-105">
Total: <span class="text-green-700 dark:text-green-400">$259.97</span>
</div>
<button class="bg-green-600 dark:bg-green-800 text-white py-3 px-8 rounded-full text-lg font-bold hover:bg-green-700 dark:hover:bg-green-900 transition duration-300 ease-in-out transform hover:scale-105 active:scale-95 shadow-xl relative perspective-600 z-20">
<span class="relative z-10">Proceed to Checkout</span>
<div class="absolute inset-0 bg-green-500 dark:bg-green-700 opacity-30 blur-sm"></div>
</button>
</div>
<!-- Shipping and Payment Info Placeholder -->
<div class="bg-gray-100 dark:bg-gray-700 p-6 rounded-lg shadow-inner border border-gray-200 dark:border-gray-600 text-gray-700 dark:text-gray-300 italic text-center transform translateZ-10 relative perspective-500">
<p class="mb-2">Shipping options and payment methods will appear here.</p>
<p>Continue shopping or apply discount codes.</p>
<div class="absolute inset-0 transform -skew-y-3 skew-x-3 bg-gradient-to-tr from-gray-300 to-gray-400 dark:from-gray-600 dark:to-gray-500 opacity-20 blur-sm"></div>
<div class="absolute inset-0 transform skew-y-2 skew-x-2 bg-gradient-to-bl from-gray-200 to-gray-300 dark:from-gray-700 dark:to-gray-600 opacity-10"></div>
</div>
</div>
</div>
</div>
</div>
<style>
/* Basic 3D transform utilities */
.perspective-1000 {
perspective: 1000px;
}
.rotateY-5 {
transform: rotateY(5deg);
}
.translateZ-20 {
transform: translateZ(20px);
}
.shadow-text-sm {
text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
}
/* Keyframe Animations */
@keyframes fade-in-down {
from {
opacity: 0;
transform: translateY(-20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fade-in-up {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.animate-fade-in-down {
animation: fade-in-down 0.6s ease-out forwards;
}
.animate-fade-in-up {
animation: fade-in-up 0.6s ease-out forwards;
}
/* Custom shadow for 3D effect on buttons */
.shadow-lg {
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05),
0 2px 4px -1px rgba(0, 0, 0, 0.03)
/* inset 0 0 0 1px rgba(255, 255, 255, 0.1) for subtle inner highlight */;
}
.dark .shadow-lg {
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.15),
0 2px 4px -1px rgba(0, 0, 0, 0.1);
}
.perspective-800 {
perspective: 800px;
}
.transform-style-preserve-3d {
transform-style: preserve-3d;
}
/* This is a common way to emulate 3d effects by creating a subtle layer behind */
.relative .absolute {
backface-visibility: hidden;
}
/* Additional subtle 3D effects for inner elements */
.inner-element-3d {
transform: translateZ(10px) rotateX(2deg);
transition: transform 0.3s ease-out;
}
.hover\:inner-element-3d\:hover:translateZ-15 {
transform: translateZ(15px) rotateX(0deg);
}
</style>관련 구성 요소
Shopping Cart 구성 요소
Glassmorphism 효과로 설계된 Shopping Cart Component는 보색 구성표를 활용하고 다크 모드에 최적화되어 있습니다. 포트폴리오 사용, 작업 또는 제품 전시에 적합합니다.
Shopping Cart 구성 요소
Tailwind CSS를 사용하는 단순하고 미니멀한 장바구니 구성 요소로, 흙색 색 구성표, 소셜 미디어 목적 및 어두운 테마 지원을 제공합니다. 반응형이며 샘플 항목을 포함합니다. 이 구성 요소는 최소한의 요소와 JavaScript 없이 기본 표시를 위해 설계되었습니다.
Memphis_Industrial_Shopping_Cart_Component
산업/제조 상황에 맞게 조정된 Memphis Design 영향의 단순하고 반응이 빠른 쇼핑 카트 구성 요소로, 단일 밝은 강조 색상과 다크 모드를 지원하는 단색 팔레트를 특징으로 합니다.