위시리스트 컴포넌트
스포츠/피트니스 애플리케이션을 위한 반응형 위시리스트 구성 요소로, 마이크로 인터랙션, 고대비 색 구성표 및 다크 모드 지원을 특징으로 합니다. 사용자는 항목을 추가/제거하고 시각적 피드백을 볼 수 있습니다.
HTML 코드
<div class="p-4 sm:p-6 lg:p-8 bg-gray-100 dark:bg-gray-900 min-h-screen font-sans">
<div class="max-w-7xl mx-auto">
<h2 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-gray-900 dark:text-white mb-8 sm:mb-12 text-center">
Your Fitness Wishlist
</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8">
<!-- Wishlist Item 1 -->
<div class="relative bg-white dark:bg-gray-800 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 overflow-hidden group">
<img src="https://picsum.photos/400/300?random=1" alt="Sports Item 1" class="w-full h-48 sm:h-56 object-cover rounded-t-xl group-hover:scale-105 transition-transform duration-500 ease-in-out">
<div class="p-4 sm:p-5 flex flex-col justify-between h-full">
<div>
<h3 class="text-xl md:text-2xl font-bold text-gray-900 dark:text-white mb-2">Pro Training Shoes</h3>
<p class="text-gray-600 dark:text-gray-300 text-sm md:text-base mb-4 line-clamp-2">High-performance running shoes designed for speed and comfort.</p>
</div>
<div class="flex items-center justify-between mt-auto">
<span class="text-2xl md:text-3xl font-extrabold text-blue-600 dark:text-cyan-400">$120.00</span>
<button class="relative group/btn bg-gradient-to-r from-blue-500 to-indigo-600 dark:from-cyan-600 dark:to-blue-700 text-white rounded-full px-5 py-2.5 text-base font-semibold overflow-hidden shadow-md hover:shadow-lg transition-all duration-300 ease-in-out transform hover:scale-105 active:scale-95">
<span class="relative z-10">Remove</span>
<span class="absolute inset-0 bg-white opacity-0 group-hover/btn:opacity-20 transition-opacity duration-300"></span>
<div class="absolute inset-0 rounded-full bg-white dark:bg-gray-700 transform scale-0 group-active/btn:scale-105 opacity-0 transition-all duration-300 ease-out"></div>
</button>
</div>
</div>
<div class="absolute top-3 right-3 bg-red-500 text-white text-xs font-bold px-2 py-1 rounded-full animate-bounce-custom" style="animation-iteration-count: infinite;">10% OFF</div>
</div>
<!-- Wishlist Item 2 -->
<div class="relative bg-white dark:bg-gray-800 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 overflow-hidden group">
<img src="https://picsum.photos/400/300?random=2" alt="Sports Item 2" class="w-full h-48 sm:h-56 object-cover rounded-t-xl group-hover:scale-105 transition-transform duration-500 ease-in-out">
<div class="p-4 sm:p-5 flex flex-col justify-between h-full">
<div>
<h3 class="text-xl md:text-2xl font-bold text-gray-900 dark:text-white mb-2">Smart Fitness Tracker</h3>
<p class="text-gray-600 dark:text-gray-300 text-sm md:text-base mb-4 line-clamp-2">Monitor your heart rate, steps, and sleep with advanced precision.</p>
</div>
<div class="flex items-center justify-between mt-auto">
<span class="text-2xl md:text-3xl font-extrabold text-blue-600 dark:text-cyan-400">$85.00</span>
<button class="relative group/btn bg-gradient-to-r from-blue-500 to-indigo-600 dark:from-cyan-600 dark:to-blue-700 text-white rounded-full px-5 py-2.5 text-base font-semibold overflow-hidden shadow-md hover:shadow-lg transition-all duration-300 ease-in-out transform hover:scale-105 active:scale-95">
<span class="relative z-10">Remove</span>
<span class="absolute inset-0 bg-white opacity-0 group-hover/btn:opacity-20 transition-opacity duration-300"></span>
<div class="absolute inset-0 rounded-full bg-white dark:bg-gray-700 transform scale-0 group-active/btn:scale-105 opacity-0 transition-all duration-300 ease-out"></div>
</button>
</div>
</div>
</div>
<!-- Wishlist Item 3 -->
<div class="relative bg-white dark:bg-gray-800 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 overflow-hidden group">
<img src="https://picsum.photos/400/300?random=3" alt="Sports Item 3" class="w-full h-48 sm:h-56 object-cover rounded-t-xl group-hover:scale-105 transition-transform duration-500 ease-in-out">
<div class="p-4 sm:p-5 flex flex-col justify-between h-full">
<div>
<h3 class="text-xl md:text-2xl font-bold text-gray-900 dark:text-white mb-2">Ergonomic Yoga Mat</h3>
<p class="text-gray-600 dark:text-gray-300 text-sm md:text-base mb-4 line-clamp-2">Non-slip surface and extra cushioning for optimal yoga and pilates sessions.</p>
</div>
<div class="flex items-center justify-between mt-auto">
<span class="text-2xl md:text-3xl font-extrabold text-blue-600 dark:text-cyan-400">$45.00</span>
<button class="relative group/btn bg-gradient-to-r from-blue-500 to-indigo-600 dark:from-cyan-600 dark:to-blue-700 text-white rounded-full px-5 py-2.5 text-base font-semibold overflow-hidden shadow-md hover:shadow-lg transition-all duration-300 ease-in-out transform hover:scale-105 active:scale-95">
<span class="relative z-10">Remove</span>
<span class="absolute inset-0 bg-white opacity-0 group-hover/btn:opacity-20 transition-opacity duration-300"></span>
<div class="absolute inset-0 rounded-full bg-white dark:bg-gray-700 transform scale-0 group-active/btn:scale-105 opacity-0 transition-all duration-300 ease-out"></div>
</button>
</div>
</div>
<div class="absolute top-3 left-3 bg-green-500 text-white text-xs font-bold px-2 py-1 rounded-full">NEW</div>
</div>
<!-- Wishlist Item 4 -->
<div class="relative bg-white dark:bg-gray-800 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 overflow-hidden group">
<img src="https://picsum.photos/400/300?random=4" alt="Sports Item 4" class="w-full h-48 sm:h-56 object-cover rounded-t-xl group-hover:scale-105 transition-transform duration-500 ease-in-out">
<div class="p-4 sm:p-5 flex flex-col justify-between h-full">
<div>
<h3 class="text-xl md:text-2xl font-bold text-gray-900 dark:text-white mb-2">Durable Dumbbell Set</h3>
<p class="text-gray-600 dark:text-gray-300 text-sm md:text-base mb-4 line-clamp-2">Adjustable weights for versatile strength training workouts at home.</p>
</div>
<div class="flex items-center justify-between mt-auto">
<span class="text-2xl md:text-3xl font-extrabold text-blue-600 dark:text-cyan-400">$150.00</span>
<button class="relative group/btn bg-gradient-to-r from-blue-500 to-indigo-600 dark:from-cyan-600 dark:to-blue-700 text-white rounded-full px-5 py-2.5 text-base font-semibold overflow-hidden shadow-md hover:shadow-lg transition-all duration-300 ease-in-out transform hover:scale-105 active:scale-95">
<span class="relative z-10">Remove</span>
<span class="absolute inset-0 bg-white opacity-0 group-hover/btn:opacity-20 transition-opacity duration-300"></span>
<div class="absolute inset-0 rounded-full bg-white dark:bg-gray-700 transform scale-0 group-active/btn:scale-105 opacity-0 transition-all duration-300 ease-out"></div>
</button>
</div>
</div>
</div>
<!-- Wishlist Item 5 -->
<div class="relative bg-white dark:bg-gray-800 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 overflow-hidden group">
<img src="https://picsum.photos/400/300?random=5" alt="Sports Item 5" class="w-full h-48 sm:h-56 object-cover rounded-t-xl group-hover:scale-105 transition-transform duration-500 ease-in-out">
<div class="p-4 sm:p-5 flex flex-col justify-between h-full">
<div>
<h3 class="text-xl md:text-2xl font-bold text-gray-900 dark:text-white mb-2">Hydration Backpack</h3>
<p class="text-gray-600 dark:text-gray-300 text-sm md:text-base mb-4 line-clamp-2">Lightweight and spacious backpack for long runs or hikes.</p>
</div>
<div class="flex items-center justify-between mt-auto">
<span class="text-2xl md:text-3xl font-extrabold text-blue-600 dark:text-cyan-400">$60.00</span>
<button class="relative group/btn bg-gradient-to-r from-blue-500 to-indigo-600 dark:from-cyan-600 dark:to-blue-700 text-white rounded-full px-5 py-2.5 text-base font-semibold overflow-hidden shadow-md hover:shadow-lg transition-all duration-300 ease-in-out transform hover:scale-105 active:scale-95">
<span class="relative z-10">Remove</span>
<span class="absolute inset-0 bg-white opacity-0 group-hover/btn:opacity-20 transition-opacity duration-300"></span>
<div class="absolute inset-0 rounded-full bg-white dark:bg-gray-700 transform scale-0 group-active/btn:scale-105 opacity-0 transition-all duration-300 ease-out"></div>
</button>
</div>
</div>
</div>
<!-- Wishlist Item 6 -->
<div class="relative bg-white dark:bg-gray-800 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 overflow-hidden group">
<img src="https://picsum.photos/400/300?random=6" alt="Sports Item 6" class="w-full h-48 sm:h-56 object-cover rounded-t-xl group-hover:scale-105 transition-transform duration-500 ease-in-out">
<div class="p-4 sm:p-5 flex flex-col justify-between h-full">
<div>
<h3 class="text-xl md:text-2xl font-bold text-gray-900 dark:text-white mb-2">Resistance Band Set</h3>
<p class="text-gray-600 dark:text-gray-300 text-sm md:text-base mb-4 line-clamp-2">Versatile bands for strength, flexibility, and rehabilitation exercises.</p>
</div>
<div class="flex items-center justify-between mt-auto">
<span class="text-2xl md:text-3xl font-extrabold text-blue-600 dark:text-cyan-400">$30.00</span>
<button class="relative group/btn bg-gradient-to-r from-blue-500 to-indigo-600 dark:from-cyan-600 dark:to-blue-700 text-white rounded-full px-5 py-2.5 text-base font-semibold overflow-hidden shadow-md hover:shadow-lg transition-all duration-300 ease-in-out transform hover:scale-105 active:scale-95">
<span class="relative z-10">Remove</span>
<span class="absolute inset-0 bg-white opacity-0 group-hover/btn:opacity-20 transition-opacity duration-300"></span>
<div class="absolute inset-0 rounded-full bg-white dark:bg-gray-700 transform scale-0 group-active/btn:scale-105 opacity-0 transition-all duration-300 ease-out"></div>
</button>
</div>
</div>
</div>
</div>
<div class="mt-12 text-center">
<button class="inline-flex items-center px-8 py-4 bg-lime-600 hover:bg-lime-700 dark:bg-lime-500 dark:hover:bg-lime-600 text-white text-lg sm:text-xl font-bold rounded-full shadow-lg hover:shadow-xl transition-all duration-300 ease-in-out transform hover:scale-105 active:scale-95 group">
<svg class="w-6 h-6 mr-3 group-hover:rotate-6 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"></path>
</svg>
Proceed to Checkout
</button>
</div>
</div>
</div>
<style>
/* Custom keyframes for bounce-custom animation */
@keyframes bounce-custom {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-5px); }
}
.animate-bounce-custom {
animation-name: bounce-custom;
animation-duration: 1s;
animation-timing-function: ease-in-out;
}
</style>관련 구성 요소
위시리스트 컴포넌트
마이크로 인터랙션이 있는 비즈니스/기업 웹사이트를 위한 간단하고 반응이 빠른 위시리스트 구성 요소입니다. 유사한 색 구성표(청록색-청록색), 어두운 테마 지원 및 미묘한 호버 애니메이션이 특징입니다. 구성 요소는 제품 이미지, 이름, 가격 및 작업 버튼과 함께 위시리스트 항목을 표시합니다.
위시리스트 컴포넌트
데이트 또는 소셜 연결 플랫폼에 적합한 간단하고 반응이 빠른 위시리스트 구성 요소로, 기업용 블루 톤과 다크 모드를 지원하는 3D 디자인 미학을 특징으로 합니다.
위시리스트 컴포넌트
뉴모피즘(Neumorphism) 스타일의 소셜 미디어를 위한 위시리스트 컴포넌트로, 보색이 돋보입니다. 여기에는 다크 모드를 지원하는 Tailwind CSS를 사용하는 반응형 디자인이 포함되어 있습니다. HTML 및 Tailwind 클래스만 사용되며 JavaScript는 사용되지 않습니다. 이미지는 picsum.photos에서, 아바타는 randomuser.me 에서 가져옵니다.