위시리스트 컴포넌트
마이크로 인터랙션이 있는 비즈니스/기업 웹사이트를 위한 간단하고 반응이 빠른 위시리스트 구성 요소입니다. 유사한 색 구성표(청록색-청록색), 어두운 테마 지원 및 미묘한 호버 애니메이션이 특징입니다. 구성 요소는 제품 이미지, 이름, 가격 및 작업 버튼과 함께 위시리스트 항목을 표시합니다.
HTML 코드
<div class="max-w-md mx-auto bg-gradient-to-br from-blue-50 to-teal-50 dark:from-slate-800 dark:to-slate-900 rounded-lg shadow-md p-6 transition-all duration-300 ease-in-out hover:shadow-lg">
<div class="flex items-center justify-between mb-6">
<h2 class="text-xl font-semibold text-blue-700 dark:text-teal-400 transition-colors duration-300">Your Wishlist</h2>
<span class="bg-teal-100 dark:bg-teal-900 text-teal-600 dark:text-teal-300 text-sm px-3 py-1 rounded-full transition-all duration-300 hover:scale-105">3 items</span>
</div>
<ul class="space-y-4">
<!-- Wishlist Item 1 -->
<li class="flex items-center border-b border-blue-100 dark:border-slate-700 pb-4 group">
<div class="relative w-16 h-16 overflow-hidden rounded-md mr-4 transition-transform duration-300 group-hover:scale-105">
<img src="https://picsum.photos/200/200?random=1" alt="Product" class="object-cover w-full h-full">
<div class="absolute inset-0 bg-gradient-to-t from-teal-500/30 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
</div>
<div class="flex-grow">
<h3 class="text-blue-800 dark:text-blue-300 font-medium transition-colors duration-300">Business Analytics Tool</h3>
<p class="text-teal-600 dark:text-teal-400 text-sm">$199.99</p>
</div>
<div class="flex space-x-2">
<button class="text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-200 transition-all duration-300 hover:scale-110">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<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" />
</svg>
</button>
<button class="text-teal-600 dark:text-teal-400 hover:text-teal-800 dark:hover:text-teal-200 transition-all duration-300 hover:scale-110">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
</svg>
</button>
</div>
</li>
<!-- Wishlist Item 2 -->
<li class="flex items-center border-b border-blue-100 dark:border-slate-700 pb-4 group">
<div class="relative w-16 h-16 overflow-hidden rounded-md mr-4 transition-transform duration-300 group-hover:scale-105">
<img src="https://picsum.photos/200/200?random=2" alt="Product" class="object-cover w-full h-full">
<div class="absolute inset-0 bg-gradient-to-t from-teal-500/30 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
</div>
<div class="flex-grow">
<h3 class="text-blue-800 dark:text-blue-300 font-medium transition-colors duration-300">CRM Software Premium</h3>
<p class="text-teal-600 dark:text-teal-400 text-sm">$299.99</p>
</div>
<div class="flex space-x-2">
<button class="text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-200 transition-all duration-300 hover:scale-110">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<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" />
</svg>
</button>
<button class="text-teal-600 dark:text-teal-400 hover:text-teal-800 dark:hover:text-teal-200 transition-all duration-300 hover:scale-110">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
</svg>
</button>
</div>
</li>
<!-- Wishlist Item 3 -->
<li class="flex items-center pb-2 group">
<div class="relative w-16 h-16 overflow-hidden rounded-md mr-4 transition-transform duration-300 group-hover:scale-105">
<img src="https://picsum.photos/200/200?random=3" alt="Product" class="object-cover w-full h-full">
<div class="absolute inset-0 bg-gradient-to-t from-teal-500/30 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
</div>
<div class="flex-grow">
<h3 class="text-blue-800 dark:text-blue-300 font-medium transition-colors duration-300">Dashboard Template Bundle</h3>
<p class="text-teal-600 dark:text-teal-400 text-sm">$149.99</p>
</div>
<div class="flex space-x-2">
<button class="text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-200 transition-all duration-300 hover:scale-110">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<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" />
</svg>
</button>
<button class="text-teal-600 dark:text-teal-400 hover:text-teal-800 dark:hover:text-teal-200 transition-all duration-300 hover:scale-110">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
</svg>
</button>
</div>
</li>
</ul>
<div class="mt-6 flex justify-between items-center">
<button class="px-4 py-2 bg-gradient-to-r from-blue-500 to-teal-500 text-white rounded-lg shadow-sm hover:shadow-md transition-all duration-300 hover:translate-y-[-2px] focus:outline-none focus:ring-2 focus:ring-teal-400 focus:ring-offset-2 dark:focus:ring-offset-slate-900">
Add All to Cart
</button>
<p class="text-blue-700 dark:text-blue-300 font-medium">Total: <span class="text-teal-600 dark:text-teal-400">$649.97</span></p>
</div>
</div>