유기농자연스포츠쇼핑카트구성 요소
유기적/자연에서 영감을 받은 디자인, 트라이어드 색 구성표, 스포츠 및 피트니스 애플리케이션에 적합하고 다크 모드를 지원하는 간단하고 반응이 빠른 쇼핑 카트 구성 요소입니다.
HTML 코드
<div class="font-sans antialiased text-gray-800 dark:text-gray-200 bg-gradient-to-br from-emerald-50 dark:from-gray-900 to-teal-50 dark:to-gray-800 p-4 sm:p-6 lg:p-8 min-h-screen flex items-center justify-center">
<div class="w-full max-w-2xl bg-white dark:bg-gray-800 rounded-3xl shadow-xl overflow-hidden animate-fade-in-up transition-all duration-500 ease-in-out transform hover:scale-[1.01]">
<div class="p-6 sm:p-8 lg:p-10 border-b border-rose-100 dark:border-rose-900 mx-4 sm:mx-6 lg:mx-8">
<h2 class="text-3xl sm:text-4xl lg:text-5xl font-bold mb-2 text-emerald-700 dark:text-emerald-300 text-center leading-tight tracking-tight drop-shadow-sm">Your Cart</h2>
<p class="text-lg text-center text-gray-600 dark:text-gray-400 font-light">Ready to embark on your fitness journey?</p>
</div>
<div class="p-6 sm:p-8 lg:p-10 space-y-6">
<!-- Cart Item 1 -->
<div class="flex items-start md:items-center space-x-4 bg-gradient-to-r from-emerald-50 via-teal-50 to-rose-50 dark:from-gray-700 dark:via-gray-750 dark:to-gray-800 p-4 rounded-2xl shadow-md transition-all duration-300 ease-in-out hover:shadow-lg hover:ring-2 hover:ring-rose-300 dark:hover:ring-rose-600">
<img src="https://picsum.photos/seed/sports-shoe/100/100" alt="Running Shoe" class="w-24 h-24 sm:w-28 sm:h-28 object-cover rounded-xl shadow-inner border border-emerald-200 dark:border-emerald-600 flex-shrink-0">
<div class="flex-1 min-w-0">
<h3 class="text-lg sm:text-xl font-semibold text-emerald-800 dark:text-emerald-200 mb-1 leading-snug">Elite Running Shoes</h3>
<p class="text-sm text-gray-600 dark:text-gray-400 mb-2 truncate">Unleash your speed with ultimate comfort and support.</p>
<div class="flex items-center justify-between mt-2 flex-wrap">
<p class="text-md font-bold text-rose-600 dark:text-rose-400">$129.99</p>
<div class="flex items-center space-x-2 text-gray-700 dark:text-gray-300">
<button class="p-1 rounded-full bg-rose-200 dark:bg-rose-700 text-rose-800 dark:text-rose-200 hover:bg-rose-300 dark:hover:bg-rose-600 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-rose-400"><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M4 10a1 1 0 011-1h10a1 1 0 110 2H5a1 1 0 01-1-1z" clip-rule="evenodd" /></svg></button>
<span class="font-medium text-lg">1</span>
<button class="p-1 rounded-full bg-emerald-200 dark:bg-emerald-700 text-emerald-800 dark:text-emerald-200 hover:bg-emerald-300 dark:hover:bg-emerald-600 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-emerald-400"><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10 5a1 1 0 011 1v3h3a1 1 0 110 2h-3v3a1 1 0 11-2 0v-3H6a1 1 0 110-2h3V6a1 1 0 011-1z" clip-rule="evenodd" /></svg></button>
</div>
</div>
</div>
</div>
<!-- Cart Item 2 -->
<div class="flex items-start md:items-center space-x-4 bg-gradient-to-r from-emerald-50 via-teal-50 to-rose-50 dark:from-gray-700 dark:via-gray-750 dark:to-gray-800 p-4 rounded-2xl shadow-md transition-all duration-300 ease-in-out hover:shadow-lg hover:ring-2 hover:ring-rose-300 dark:hover:ring-rose-600">
<img src="https://picsum.photos/seed/yoga-mat/100/100" alt="Yoga Mat" class="w-24 h-24 sm:w-28 sm:h-28 object-cover rounded-xl shadow-inner border border-emerald-200 dark:border-emerald-600 flex-shrink-0">
<div class="flex-1 min-w-0">
<h3 class="text-lg sm:text-xl font-semibold text-emerald-800 dark:text-emerald-200 mb-1 leading-snug">Eco-Friendly Yoga Mat</h3>
<p class="text-sm text-gray-600 dark:text-gray-400 mb-2 truncate">Connect with nature and your inner self.</p>
<div class="flex items-center justify-between mt-2 flex-wrap">
<p class="text-md font-bold text-rose-600 dark:text-rose-400">$49.99</p>
<div class="flex items-center space-x-2 text-gray-700 dark:text-gray-300">
<button class="p-1 rounded-full bg-rose-200 dark:bg-rose-700 text-rose-800 dark:text-rose-200 hover:bg-rose-300 dark:hover:bg-rose-600 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-rose-400"><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M4 10a1 1 0 011-1h10a1 1 0 110 2H5a1 1 0 01-1-1z" clip-rule="evenodd" /></svg></button>
<span class="font-medium text-lg">1</span>
<button class="p-1 rounded-full bg-emerald-200 dark:bg-emerald-700 text-emerald-800 dark:text-emerald-200 hover:bg-emerald-300 dark:hover:bg-emerald-600 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-emerald-400"><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10 5a1 1 0 011 1v3h3a1 1 0 110 2h-3v3a1 1 0 11-2 0v-3H6a1 1 0 110-2h3V6a1 1 0 011-1z" clip-rule="evenodd" /></svg></button>
</div>
</div>
</div>
</div>
</div>
<div class="p-6 sm:p-8 lg:p-10 border-t border-rose-100 dark:border-rose-900 mx-4 sm:mx-6 lg:mx-8">
<div class="flex justify-between items-center text-xl sm:text-2xl font-bold mb-4 text-gray-900 dark:text-gray-100">
<span>Total:</span>
<span class="text-rose-700 dark:text-rose-300">$179.98</span>
</div>
<button class="w-full py-4 rounded-xl text-xl font-semibold text-white bg-gradient-to-r from-emerald-500 to-teal-500 hover:from-emerald-600 hover:to-teal-600 focus:outline-none focus:ring-4 focus:ring-emerald-300 dark:focus:ring-emerald-700 transition-all duration-300 ease-in-out transform hover:-translate-y-1 hover:shadow-lg animate-bounce-once">Proceed to Checkout</button>
</div>
</div>
</div>
<style>
@keyframes fade-in-up {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.animate-fade-in-up {
animation: fade-in-up 0.6s ease-out forwards;
}
@keyframes bounce-once {
0%, 100% {
transform: translateY(0);
}
20%, 50%, 80% {
transform: translateY(-5px);
}
40%, 60% {
transform: translateY(0);
}
}
.animate-bounce-once:hover {
animation: bounce-once 0.8s ease-in-out;
}
</style>
관련 구성 요소
Shopping Cart 구성 요소
반응형 디자인의 간단한 다크 모드 장바구니 구성 요소로, 제품 목록, 수량 및 총계를 표시합니다. 어두운 배경의 트라이어드 색 구성표를 사용합니다. 콘텐츠 소비를 위해 설계되었습니다.
Shopping Cart 구성 요소
Glassmorphism 효과로 설계된 Shopping Cart Component는 보색 구성표를 활용하고 다크 모드에 최적화되어 있습니다. 포트폴리오 사용, 작업 또는 제품 전시에 적합합니다.
Shopping Cart 구성 요소
마이크로 인터랙션과 유사한 색상이 있는 복잡하고 반응이 빠른 장바구니 구성 요소로, 소셜 미디어용으로, Tailwind CSS를 사용하여 다크 모드를 지원합니다.