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>