<div class="min-h-screen bg-gray-100 dark:bg-gray-900 p-8 flex flex-col items-center justify-center font-sans">
<!-- Skeuomorphic Container -->
<div class="w-full max-w-4xl bg-gradient-to-br from-gray-200 to-gray-300 dark:from-gray-700 dark:to-gray-800 rounded-3xl
shadow-2xl dark:shadow-none
border-t-2 border-l-2 border-gray-50 dark:border-gray-600
border-r-2 border-b-2 border-gray-400 dark:border-gray-900
p-8 space-y-8
relative
overflow-hidden">
<!-- Inner Bevel/Emboss Effect -->
<div class="absolute inset-4 rounded-2xl
bg-gradient-to-br from-gray-100 to-gray-300 dark:from-gray-800 dark:to-gray-700
shadow-inner-xl dark:shadow-inner-dark
opacity-75">
</div>
<div class="relative z-10">
<h1 class="text-4xl font-extrabold text-gray-800 dark:text-gray-100 mb-8 text-center
drop-shadow-lg dark:drop-shadow-none
[text-shadow:_0_2px_0_rgb(0_0_0_/_40%)] dark:[text-shadow:_0_2px_0_rgb(0_0_0_/_60%)]">
My Wishlist
</h1>
<!-- Wishlist Items Grid -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Wishlist Item 1 -->
<div class="bg-gradient-to-br from-slate-100 to-slate-200 dark:from-slate-700 dark:to-slate-800
rounded-2xl p-6
shadow-lg dark:shadow-xl
border-t border-l border-slate-50 dark:border-slate-600
border-r border-b border-slate-300 dark:border-slate-900
flex flex-col items-center space-y-4
transform transition duration-300 hover:scale-[1.02] active:scale-[0.98]">
<img src="https://picsum.photos/seed/item1/300/200" alt="Item Image" class="rounded-xl shadow-md border border-slate-200 dark:border-slate-600 w-full h-40 object-cover">
<h3 class="text-xl font-semibold text-gray-800 dark:text-gray-100">Retro Gaming Console</h3>
<p class="text-gray-600 dark:text-gray-300 text-center text-sm">A classic console for nostalgic gaming sessions.</p>
<div class="flex items-center space-x-2">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-8 h-8 rounded-full border-2 border-blue-400 dark:border-teal-400 shadow-md">
<span class="text-sm text-gray-700 dark:text-gray-200">@john_doe</span>
</div>
<button class="w-full py-3 rounded-xl
bg-gradient-to-br from-indigo-500 to-blue-600 dark:from-indigo-600 dark:to-blue-700
text-white font-bold
shadow-md dark:shadow-lg
border-t border-l border-indigo-400 dark:border-indigo-500
border-r border-b border-blue-700 dark:border-blue-800
active:shadow-inner active:from-blue-600 active:to-indigo-500
transform transition duration-200
focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75">
<i class="fas fa-heart mr-2"></i> Add to Cart
</button>
</div>
<!-- Wishlist Item 2 -->
<div class="bg-gradient-to-br from-slate-100 to-slate-200 dark:from-slate-700 dark:to-slate-800
rounded-2xl p-6
shadow-lg dark:shadow-xl
border-t border-l border-slate-50 dark:border-slate-600
border-r border-b border-slate-300 dark:border-slate-900
flex flex-col items-center space-y-4
transform transition duration-300 hover:scale-[1.02] active:scale-[0.98]">
<img src="https://picsum.photos/seed/item2/300/200" alt="Item Image" class="rounded-xl shadow-md border border-slate-200 dark:border-slate-600 w-full h-40 object-cover">
<h3 class="text-xl font-semibold text-gray-800 dark:text-gray-100">Vintage Camera</h3>
<p class="text-gray-600 dark:text-gray-300 text-center text-sm">Capture moments with a classic aesthetic.</p>
<div class="flex items-center space-x-2">
<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar" class="w-8 h-8 rounded-full border-2 border-blue-400 dark:border-teal-400 shadow-md">
<span class="text-sm text-gray-700 dark:text-gray-200">@jane_smith</span>
</div>
<button class="w-full py-3 rounded-xl
bg-gradient-to-br from-indigo-500 to-blue-600 dark:from-indigo-600 dark:to-blue-700
text-white font-bold
shadow-md dark:shadow-lg
border-t border-l border-indigo-400 dark:border-indigo-500
border-r border-b border-blue-700 dark:border-blue-800
active:shadow-inner active:from-blue-600 active:to-indigo-500
transform transition duration-200
focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75">
<i class="fas fa-heart mr-2"></i> Add to Cart
</button>
</div>
<!-- Wishlist Item 3 -->
<div class="bg-gradient-to-br from-slate-100 to-slate-200 dark:from-slate-700 dark:to-slate-800
rounded-2xl p-6
shadow-lg dark:shadow-xl
border-t border-l border-slate-50 dark:border-slate-600
border-r border-b border-slate-300 dark:border-slate-900
flex flex-col items-center space-y-4
transform transition duration-300 hover:scale-[1.02] active:scale-[0.98]">
<img src="https://picsum.photos/seed/item3/300/200" alt="Item Image" class="rounded-xl shadow-md border border-slate-200 dark:border-slate-600 w-full h-40 object-cover">
<h3 class="text-xl font-semibold text-gray-800 dark:text-gray-100">Mechanical Keyboard</h3>
<p class="text-gray-600 dark:text-gray-300 text-center text-sm">Satisfying clicks for your typing pleasure.</p>
<div class="flex items-center space-x-2">
<img src="https://randomuser.me/api/portraits/men/19.jpg" alt="User Avatar" class="w-8 h-8 rounded-full border-2 border-blue-400 dark:border-teal-400 shadow-md">
<span class="text-sm text-gray-700 dark:text-gray-200">@mike_wong</span>
</div>
<button class="w-full py-3 rounded-xl
bg-gradient-to-br from-indigo-500 to-blue-600 dark:from-indigo-600 dark:to-blue-700
text-white font-bold
shadow-md dark:shadow-lg
border-t border-l border-indigo-400 dark:border-indigo-500
border-r border-b border-blue-700 dark:border-blue-800
active:shadow-inner active:from-blue-600 active:to-indigo-500
transform transition duration-200
focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75">
<i class="fas fa-heart mr-2"></i> Add to Cart
</button>
</div>
</div>
<!-- Call to Action / Share Wishlist Button -->
<div class="mt-10 text-center">
<button class="py-4 px-8 rounded-full
bg-gradient-to-br from-green-400 to-emerald-500 dark:from-green-600 dark:to-emerald-700
text-white font-extrabold text-lg
shadow-xl dark:shadow-none
border-t border-l border-green-200 dark:border-green-500
border-r border-b border-emerald-600 dark:border-emerald-800
active:shadow-inner active:from-emerald-500 active:to-green-400
transform transition duration-200
focus:outline-none focus:ring-2 focus:ring-emerald-400 focus:ring-opacity-75">
<i class="fas fa-share-alt mr-3"></i> Share My Wishlist
</button>
</div>
</div>
</div>
</div>
<!-- FontAwesome for icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<!-- Custom Tailwind CSS (for inner shadow) -->
<style>
.shadow-inner-xl {
box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.2), inset 0 0 30px rgba(0, 0, 0, 0.1);
}
.dark .shadow-inner-dark {
box-shadow: inset 0 0 15px rgba(255, 255, 255, 0.05), inset 0 0 30px rgba(255, 255, 255, 0.02);
}
</style>
