Glassmorphism_Wishlist_Component
데이트/소셜 플랫폼에 최적화된 오션/블루 톤의 Glassmorphism 디자인을 특징으로 하는 복잡하고 반응형 위시리스트 구성 요소입니다. 다크 모드 지원 및 대화형 요소가 포함됩니다.
HTML 코드
<div class="min-h-screen p-4 sm:p-6 lg:p-8 bg-gradient-to-br from-blue-100 to-indigo-200 dark:from-gray-900 dark:to-gray-800 text-gray-800 dark:text-gray-200 flex items-center justify-center font-sans">
<div class="w-full max-w-6xl rounded-3xl backdrop-blur-xl bg-white/30 dark:bg-gray-800/30 p-6 sm:p-8 lg:p-10 shadow-2xl border border-white/50 dark:border-gray-700/50 overflow-hidden relative">
<!-- Glassmorphism Overlay Elements -->
<div class="absolute inset-0 -z-10 overflow-hidden">
<div class="absolute top-1/4 left-1/3 w-96 h-96 bg-blue-400 opacity-20 rounded-full mix-blend-multiply filter blur-3xl animate-blob"></div>
<div class="absolute bottom-1/4 right-1/3 w-96 h-96 bg-indigo-400 opacity-20 rounded-full mix-blend-multiply filter blur-3xl animate-blob animation-delay-2000"></div>
<div class="absolute top-1/2 left-1/4 w-80 h-80 bg-sky-400 opacity-20 rounded-full mix-blend-multiply filter blur-3xl animate-blob animation-delay-4000"></div>
</div>
<h1 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold mb-8 text-center bg-clip-text text-transparent bg-gradient-to-r from-blue-600 to-indigo-700 dark:from-blue-400 dark:to-sky-500 drop-shadow-lg">
Your Wishlist ❤️
</h1>
<p class="text-center text-lg sm:text-xl mb-12 text-gray-700 dark:text-gray-300">
People you've liked who resonated with you. Send a message to connect!
</p>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8 lg:gap-10">
<!-- Wishlist Item 1 -->
<div class="rounded-2xl backdrop-blur-xl bg-white/40 dark:bg-gray-800/40 p-5 border border-white/60 dark:border-gray-700/60 shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 relative group overflow-hidden">
<div class="absolute inset-0 bg-gradient-to-br from-blue-300/20 to-indigo-400/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
<div class="relative z-10 flex flex-col items-center text-center">
<div class="w-28 h-28 sm:w-32 sm:h-32 rounded-full overflow-hidden border-4 border-blue-400 dark:border-sky-500 shadow-md mb-4 bg-gray-200 dark:bg-gray-700 flex-shrink-0">
<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Profile Picture" class="w-full h-full object-cover">
</div>
<h3 class="text-xl sm:text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-700 to-indigo-800 dark:from-blue-300 dark:to-sky-400 mb-2 drop-shadow-sm">Eleanor R.</h3>
<p class="text-gray-700 dark:text-gray-300 text-sm sm:text-base">28, New York</p>
<p class="text-gray-600 dark:text-gray-400 text-xs sm:text-sm mt-2 line-clamp-2">Loves hiking, indie music, and cozy coffee shops.</p>
<div class="mt-4 flex space-x-3">
<button class="flex items-center px-4 py-2 rounded-full bg-blue-600 hover:bg-blue-700 dark:bg-sky-600 dark:hover:bg-sky-700 text-white text-sm font-medium transition-colors duration-200 shadow-md">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M18 10c0 3.866-3.582 7-8 7a8.841 8.841 0 01-4.083-.98L2 17l1.338-3.123C2.516 12.234 2 10.368 2 8c0-3.866 3.582-7 8-7s8 3.134 8 7zM7 9H5v2h2V9zm4 0H9v2h2V9zm4 0h-2v2h2V9z" clip-rule="evenodd" />
</svg>
Message
</button>
<button class="p-2 rounded-full bg-red-500/80 hover:bg-red-600 dark:bg-red-600/80 dark:hover:bg-red-700 text-white transition-colors duration-200 shadow-md">
<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="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm6 0a1 1 0 11-2 0v6a1 1 0 112 0V8z" clip-rule="evenodd" />
</svg>
</button>
</div>
</div>
</div>
<!-- Wishlist Item 2 -->
<div class="rounded-2xl backdrop-blur-xl bg-white/40 dark:bg-gray-800/40 p-5 border border-white/60 dark:border-gray-700/60 shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 relative group overflow-hidden">
<div class="absolute inset-0 bg-gradient-to-br from-blue-300/20 to-indigo-400/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
<div class="relative z-10 flex flex-col items-center text-center">
<div class="w-28 h-28 sm:w-32 sm:h-32 rounded-full overflow-hidden border-4 border-blue-400 dark:border-sky-500 shadow-md mb-4 bg-gray-200 dark:bg-gray-700 flex-shrink-0">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Profile Picture" class="w-full h-full object-cover">
</div>
<h3 class="text-xl sm:text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-700 to-indigo-800 dark:from-blue-300 dark:to-sky-400 mb-2 drop-shadow-sm">Michael B.</h3>
<p class="text-gray-700 dark:text-gray-300 text-sm sm:text-base">30, Los Angeles</p>
<p class="text-gray-600 dark:text-gray-400 text-xs sm:text-sm mt-2 line-clamp-2">Software engineer who enjoys surfing and playing guitar.</p>
<div class="mt-4 flex space-x-3">
<button class="flex items-center px-4 py-2 rounded-full bg-blue-600 hover:bg-blue-700 dark:bg-sky-600 dark:hover:bg-sky-700 text-white text-sm font-medium transition-colors duration-200 shadow-md">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M18 10c0 3.866-3.582 7-8 7a8.841 8.841 0 01-4.083-.98L2 17l1.338-3.123C2.516 12.234 2 10.368 2 8c0-3.866 3.582-7 8-7s8 3.134 8 7zM7 9H5v2h2V9zm4 0H9v2h2V9zm4 0h-2v2h2V9z" clip-rule="evenodd" />
</svg>
Message
</button>
<button class="p-2 rounded-full bg-red-500/80 hover:bg-red-600 dark:bg-red-600/80 dark:hover:bg-red-700 text-white transition-colors duration-200 shadow-md">
<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="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm6 0a1 1 0 11-2 0v6a1 1 0 112 0V8z" clip-rule="evenodd" />
</svg>
</button>
</div>
</div>
</div>
<!-- Wishlist Item 3 -->
<div class="rounded-2xl backdrop-blur-xl bg-white/40 dark:bg-gray-800/40 p-5 border border-white/60 dark:border-gray-700/60 shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 relative group overflow-hidden">
<div class="absolute inset-0 bg-gradient-to-br from-blue-300/20 to-indigo-400/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
<div class="relative z-10 flex flex-col items-center text-center">
<div class="w-28 h-28 sm:w-32 sm:h-32 rounded-full overflow-hidden border-4 border-blue-400 dark:border-sky-500 shadow-md mb-4 bg-gray-200 dark:bg-gray-700 flex-shrink-0">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Profile Picture" class="w-full h-full object-cover">
</div>
<h3 class="text-xl sm:text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-700 to-indigo-800 dark:from-blue-300 dark:to-sky-400 mb-2 drop-shadow-sm">Sophia L.</h3>
<p class="text-gray-700 dark:text-gray-300 text-sm sm:text-base">26, Chicago</p>
<p class="text-gray-600 dark:text-gray-400 text-xs sm:text-sm mt-2 line-clamp-2">Passionate chef, loves exploring new cuisines and traveling.</p>
<div class="mt-4 flex space-x-3">
<button class="flex items-center px-4 py-2 rounded-full bg-blue-600 hover:bg-blue-700 dark:bg-sky-600 dark:hover:bg-sky-700 text-white text-sm font-medium transition-colors duration-200 shadow-md">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M18 10c0 3.866-3.582 7-8 7a8.841 8.841 0 01-4.083-.98L2 17l1.338-3.123C2.516 12.234 2 10.368 2 8c0-3.866 3.582-7 8-7s8 3.134 8 7zM7 9H5v2h2V9zm4 0H9v2h2V9zm4 0h-2v2h2V9z" clip-rule="evenodd" />
</svg>
Message
</button>
<button class="p-2 rounded-full bg-red-500/80 hover:bg-red-600 dark:bg-red-600/80 dark:hover:bg-red-700 text-white transition-colors duration-200 shadow-md">
<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="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm6 0a1 1 0 11-2 0v6a1 1 0 112 0V8z" clip-rule="evenodd" />
</svg>
</button>
</div>
</div>
</div>
<!-- Add more wishlist items as needed -->
</div>
<div class="mt-12 text-center">
<button class="inline-flex items-center px-6 py-3 rounded-full bg-gradient-to-r from-blue-500 to-indigo-600 hover:from-blue-600 hover:to-indigo-700 dark:from-sky-500 dark:to-blue-600 dark:hover:from-sky-600 dark:hover:to-blue-700 text-white text-lg font-semibold transition-all duration-300 transform hover:scale-105 shadow-xl">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3m0 0v3m0-3h3m-3 0H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
Discover More People
</button>
</div>
</div>
</div>
<style>
@keyframes blob {
0% {
transform: translate(0px, 0px) scale(1);
}
33% {
transform: translate(30px, -50px) scale(1.1);
}
66% {
transform: translate(-20px, 20px) scale(0.9);
}
100% {
transform: translate(0px, 0px) scale(1);
}
}
.animate-blob {
animation: blob 7s infinite cubic-bezier(0.68, -0.55, 0.27, 1.55);
}
.animation-delay-2000 {
animation-delay: 2s;
}
.animation-delay-4000 {
animation-delay: 4s;
}
</style>