Art Deco Wishlist Component
A complex, responsive Art Deco style wishlist component inspired by 1920s-1930s luxury, featuring jewel tones suitable for finance/banking interfaces. Includes dark mode support.
HTML Code
<div class="min-h-screen bg-gradient-to-br from-emerald-400 to-teal-600 dark:from-gray-900 dark:to-teal-900 p-4 sm:p-6 md:p-8 font-serif text-white">
<div class="max-w-7xl mx-auto bg-gradient-to-br from-teal-700 to-emerald-800 dark:from-gray-800 dark:to-teal-950 shadow-2xl rounded-xl border border-teal-500 dark:border-teal-700 overflow-hidden relative">
<!-- Geometric Overlay - Top Left -->
<div class="absolute top-0 left-0 w-32 h-32 bg-teal-600 opacity-20 dark:bg-teal-900 transform -translate-x-1/2 -translate-y-1/2 rotate-45 rounded-lg"></div>
<div class="absolute top-2 left-2 w-24 h-24 bg-teal-500 opacity-30 dark:bg-teal-800 transform -translate-x-1/2 -translate-y-1/2 rotate-45 rounded-lg"></div>
<!-- Geometric Overlay - Bottom Right -->
<div class="absolute bottom-0 right-0 w-32 h-32 bg-emerald-600 opacity-20 dark:bg-emerald-900 transform translate-x-1/2 translate-y-1/2 rotate-45 rounded-lg"></div>
<div class="absolute bottom-2 right-2 w-24 h-24 bg-emerald-500 opacity-30 dark:bg-emerald-800 transform translate-x-1/2 translate-y-1/2 rotate-45 rounded-lg"></div>
<div class="relative z-10 p-4 sm:p-6 md:p-10">
<header class="flex flex-col sm:flex-row items-center justify-between pb-6 mb-8 border-b border-gold-400 dark:border-gold-700">
<h1 class="text-3xl sm:text-4xl md:text-5xl font-bold text-gold-200 dark:text-gold-300 drop-shadow-lg p mb-4 sm:mb-0">
<span class="block">Imperial Accrual</span>
<span class="block text-xl sm:text-2xl mt-1">Your Refined Selections</span>
</h1>
<div class="flex space-x-4">
<button class="px-4 py-2 sm:px-6 sm:py-3 bg-gold-500 hover:bg-gold-600 text-teal-900 font-semibold rounded-lg shadow-lg transform hover:scale-105 transition-transform duration-300 ease-in-out border-2 border-gold-400 dark:border-gold-700">
<svg class="inline-block mr-2 w-5 h-5" 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="M12 6v6m0 0v6m0-6h6m-6 0H6"></path></svg>
Add Item
</button>
<button class="px-4 py-2 sm:px-6 sm:py-3 bg-red-600 hover:bg-red-700 text-white font-semibold rounded-lg shadow-lg transform hover:scale-105 transition-transform duration-300 ease-in-out border-2 border-red-500 dark:border-red-800">
<svg class="inline-block mr-2 w-5 h-5" 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="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"></path></svg>
Clear All
</button>
</div>
</header>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
<!-- Filter & Sort Panel -->
<aside class="md:col-span-1 bg-gradient-to-br from-teal-800 to-emerald-900 dark:from-gray-700 dark:to-teal-900 p-6 rounded-lg shadow-xl border border-teal-600 dark:border-teal-800">
<h3 class="text-2xl font-semibold mb-4 text-gold-300 dark:text-gold-400 border-b pb-2 border-gold-500 dark:border-gold-700">Refine Prospects</h3>
<div class="mb-6">
<label for="category" class="block text-gold-200 text-lg mb-2">Category</label>
<select id="category" class="w-full p-3 bg-teal-900 border border-teal-500 rounded-md text-white focus:ring-gold-500 focus:border-gold-500 dark:bg-gray-800 dark:border-gray-600">
<option value="all">All Assets</option>
<option value="investments">Investments</option>
<option value="property">Property</option>
<option value="luxury">Luxury Goods</option>
<option value="education">Education Funds</option>
</select>
</div>
<div class="mb-6">
<label for="status" class="block text-gold-200 text-lg mb-2">Status</label>
<select id="status" class="w-full p-3 bg-teal-900 border border-teal-500 rounded-md text-white focus:ring-gold-500 focus:border-gold-500 dark:bg-gray-800 dark:border-gray-600">
<option value="all">All Statuses</option>
<option value="pending">Pending</option>
<option value="acquired">Acquired</option>
<option value="rejected">Rejected</option>
</select>
</div>
<div class="mb-6">
<label for="sort" class="block text-gold-200 text-lg mb-2">Sort By</label>
<select id="sort" class="w-full p-3 bg-teal-900 border border-teal-500 rounded-md text-white focus:ring-gold-500 focus:border-gold-500 dark:bg-gray-800 dark:border-gray-600">
<option value="date">Date Added</option>
<option value="value-asc">Value: Low to High</option>
<option value="value-desc">Value: High to Low</option>
</select>
</div>
<button class="w-full px-4 py-3 bg-gold-600 hover:bg-gold-700 text-teal-900 font-semibold rounded-lg shadow-md transform hover:scale-105 transition-transform duration-300 ease-in-out border-2 border-gold-500 dark:border-gold-800">
Apply Filters
</button>
</aside>
<!-- Wishlist Items Grid -->
<section class="md:col-span-2 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-2 gap-6">
<!-- Wishlist Item 1 -->
<div class="bg-gradient-to-br from-teal-800 to-emerald-900 dark:from-gray-700 dark:to-teal-900 rounded-xl shadow-xl overflow-hidden transform hover:scale-[1.02] transition-transform duration-300 ease-in-out border border-teal-600 dark:border-teal-800 relative group">
<div class="relative h-48 overflow-hidden">
<img src="https://picsum.photos/id/68/400/250" alt="Luxury Apartment" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
<div class="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent opacity-60"></div>
<span class="absolute top-3 right-3 bg-emerald-500 text-white text-xs font-bold px-3 py-1 rounded-full shadow-md border border-white dark:border-gray-300">Property</span>
</div>
<div class="p-5">
<h4 class="text-xl font-bold text-gold-200 dark:text-gold-300 mb-2">Metropolis Penthouse A5</h4>
<p class="text-sm text-gold-100 dark:text-gray-300 mb-3 line-clamp-2">A stunning, high-rise luxury apartment with panoramic city views and bespoke interior design.</p>
<p class="text-lg font-semibold text-gold-300 dark:text-gold-400 mb-4">Value: $3,500,000</p>
<div class="flex items-center text-gold-100 dark:text-gold-200 text-sm mb-4">
<svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"></path></svg>
Added: <span class="ml-1">2023-10-26</span>
</div>
<div class="flex justify-between items-center">
<span class="px-3 py-1 text-xs font-semibold rounded-full bg-yellow-500 text-yellow-900 border border-yellow-400 dark:bg-yellow-700 dark:text-yellow-100">Pending</span>
<div class="flex space-x-3">
<button class="text-gold-400 hover:text-gold-300 transform hover:scale-110 transition-transform duration-200">
<svg class="w-6 h-6" 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="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"></path></svg>
</button>
<button class="text-red-400 hover:text-red-300 transform hover:scale-110 transition-transform duration-200">
<svg class="w-6 h-6" 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="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"></path></svg>
</button>
</div>
</div>
</div>
</div>
<!-- Wishlist Item 2 -->
<div class="bg-gradient-to-br from-teal-800 to-emerald-900 dark:from-gray-700 dark:to-teal-900 rounded-xl shadow-xl overflow-hidden transform hover:scale-[1.02] transition-transform duration-300 ease-in-out border border-teal-600 dark:border-teal-800 relative group">
<div class="relative h-48 overflow-hidden">
<img src="https://picsum.photos/id/1018/400/250" alt="Rare Stock Portfolio" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
<div class="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent opacity-60"></div>
<span class="absolute top-3 right-3 bg-red-500 text-white text-xs font-bold px-3 py-1 rounded-full shadow-md border border-white dark:border-gray-300">Investments</span>
</div>
<div class="p-5">
<h4 class="text-xl font-bold text-gold-200 dark:text-gold-300 mb-2">Regal Tech Portfolio Q4</h4>
<p class="text-sm text-gold-100 dark:text-gray-300 mb-3 line-clamp-2">A curated portfolio of high-growth technology stocks with promising long-term returns.</p>
<p class="text-lg font-semibold text-gold-300 dark:text-gold-400 mb-4">Value: $1,200,000</p>
<div class="flex items-center text-gold-100 dark:text-gold-200 text-sm mb-4">
<svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"></path></svg>
Added: <span class="ml-1">2023-09-15</span>
</div>
<div class="flex justify-between items-center">
<span class="px-3 py-1 text-xs font-semibold rounded-full bg-green-500 text-green-900 border border-green-400 dark:bg-green-700 dark:text-green-100">Acquired</span>
<div class="flex space-x-3">
<button class="text-gold-400 hover:text-gold-300 transform hover:scale-110 transition-transform duration-200">
<svg class="w-6 h-6" 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="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"></path></svg>
</button>
<button class="text-red-400 hover:text-red-300 transform hover:scale-110 transition-transform duration-200">
<svg class="w-6 h-6" 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="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"></path></svg>
</button>
</div>
</div>
</div>
</div>
<!-- Wishlist Item 3 -->
<div class="bg-gradient-to-br from-teal-800 to-emerald-900 dark:from-gray-700 dark:to-teal-900 rounded-xl shadow-xl overflow-hidden transform hover:scale-[1.02] transition-transform duration-300 ease-in-out border border-teal-600 dark:border-teal-800 relative group">
<div class="relative h-48 overflow-hidden">
<img src="https://picsum.photos/id/194/400/250" alt="Education Fund" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
<div class="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent opacity-60"></div>
<span class="absolute top-3 right-3 bg-blue-500 text-white text-xs font-bold px-3 py-1 rounded-full shadow-md border border-white dark:border-gray-300">Education</span>
</div>
<div class="p-5">
<h4 class="text-xl font-bold text-gold-200 dark:text-gold-300 mb-2">Oxford Endowment Plan</h4>
<p class="text-sm text-gold-100 dark:text-gray-300 mb-3 line-clamp-2">A robust education fund designed for prestigious university tuition and living expenses.</p>
<p class="text-lg font-semibold text-gold-300 dark:text-gold-400 mb-4">Value: $500,000</p>
<div class="flex items-center text-gold-100 dark:text-gold-200 text-sm mb-4">
<svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"></path></svg>
Added: <span class="ml-1">2023-08-01</span>
</div>
<div class="flex justify-between items-center">
<span class="px-3 py-1 text-xs font-semibold rounded-full bg-yellow-500 text-yellow-900 border border-yellow-400 dark:bg-yellow-700 dark:text-yellow-100">Pending</span>
<div class="flex space-x-3">
<button class="text-gold-400 hover:text-gold-300 transform hover:scale-110 transition-transform duration-200">
<svg class="w-6 h-6" 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="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"></path></svg>
</button>
<button class="text-red-400 hover:text-red-300 transform hover:scale-110 transition-transform duration-200">
<svg class="w-6 h-6" 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="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"></path></svg>
</button>
</div>
</div>
</div>
</div>
<!-- Wishlist Item 4 -->
<div class="bg-gradient-to-br from-teal-800 to-emerald-900 dark:from-gray-700 dark:to-teal-900 rounded-xl shadow-xl overflow-hidden transform hover:scale-[1.02] transition-transform duration-300 ease-in-out border border-teal-600 dark:border-teal-800 relative group">
<div class="relative h-48 overflow-hidden">
<img src="https://picsum.photos/id/188/400/250" alt="Vintage Automobile" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
<div class="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent opacity-60"></div>
<span class="absolute top-3 right-3 bg-fuchsia-500 text-white text-xs font-bold px-3 py-1 rounded-full shadow-md border border-white dark:border-gray-300">Luxury</span>
</div>
<div class="p-5">
<h4 class="text-xl font-bold text-gold-200 dark:text-gold-300 mb-2">1930s Duesenberg J</h4>
<p class="text-sm text-gold-100 dark:text-gray-300 mb-3 line-clamp-2">A meticulously restored classic automobile, a true symbol of automotive luxury and history.</p>
<p class="text-lg font-semibold text-gold-300 dark:text-gold-400 mb-4">Value: $2,800,000</p>
<div class="flex items-center text-gold-100 dark:text-gold-200 text-sm mb-4">
<svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"></path></svg>
Added: <span class="ml-1">2023-07-05</span>
</div>
<div class="flex justify-between items-center">
<span class="px-3 py-1 text-xs font-semibold rounded-full bg-green-500 text-green-900 border border-green-400 dark:bg-green-700 dark:text-green-100">Acquired</span>
<div class="flex space-x-3">
<button class="text-gold-400 hover:text-gold-300 transform hover:scale-110 transition-transform duration-200">
<svg class="w-6 h-6" 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="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"></path></svg>
</button>
<button class="text-red-400 hover:text-red-300 transform hover:scale-110 transition-transform duration-200">
<svg class="w-6 h-6" 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="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"></path></svg>
</button>
</div>
</div>
</div>
</div>
</section>
</div>
<!-- Summary Section -->
<section class="bg-gradient-to-tr from-teal-800 to-emerald-900 dark:from-gray-700 dark:to-teal-900 p-6 rounded-xl shadow-xl mt-8 border border-teal-600 dark:border-teal-800">
<h3 class="text-2xl font-semibold mb-4 text-gold-300 dark:text-gold-400 border-b pb-2 border-gold-500 dark:border-gold-700">Portfolio Overview</h3>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 text-center">
<div class="bg-teal-900 dark:bg-gray-800 p-4 rounded-lg shadow border border-teal-700 dark:border-gray-600">
<p class="text-gold-200 text-sm">Total Items</p>
<p class="text-3xl font-bold text-gold-400 dark:text-gold-300">4</p>
</div>
<div class="bg-teal-900 dark:bg-gray-800 p-4 rounded-lg shadow border border-teal-700 dark:border-gray-600">
<p class="text-gold-200 text-sm">Total Value</p>
<p class="text-xl sm:text-2xl font-bold text-gold-400 dark:text-gold-300">$8.0M</p>
</div>
<div class="bg-teal-900 dark:bg-gray-800 p-4 rounded-lg shadow border border-teal-700 dark:border-gray-600">
<p class="text-gold-200 text-sm">Acquired</p>
<p class="text-3xl font-bold text-gold-400 dark:text-gold-300">2</p>
</div>
<div class="bg-teal-900 dark:bg-gray-800 p-4 rounded-lg shadow border border-teal-700 dark:border-gray-600">
<p class="text-gold-200 text-sm">Pending</p>
<p class="text-3xl font-bold text-gold-400 dark:text-gold-300">2</p>
</div>
</div>
</section>
<!-- User Profile/Avatar -->
<div class="bg-gradient-to-tl from-emerald-800 to-teal-900 dark:from-teal-900 dark:to-gray-800 p-4 rounded-xl shadow-inner mt-8 flex items-center justify-between border border-emerald-600 dark:border-teal-700">
<div class="flex items-center space-x-4">
<img class="w-12 h-12 rounded-full border-2 border-gold-400 dark:border-gold-700 shadow-md" src="https://randomuser.me/api/portraits/women/68.jpg" alt="User Avatar">
<div>
<p class="text-lg font-semibold text-gold-300 dark:text-gold-400">Ms. Evelyn Sterling</p>
<p class="text-sm text-gold-200 dark:text-gray-300">Wealth Manager, Elite Global Bank</p>
</div>
</div>
<button class="text-gold-400 hover:text-gold-300 transform hover:scale-105 transition-transform duration-200">
<svg class="w-6 h-6" 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="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
</button>
</div>
</div>
</div>
</div>Related Components
Wishlist Component
A simple, responsive wishlist component with high-contrast color gradients and smooth transitions, suitable for business/corporate websites. Includes dark mode support.
Wishlist Component
A responsive wishlist component designed with 3D elements, earth tones, and dark mode support for showcasing work or products.
Glassmorphism_Wishlist_Component
A complex, responsive wishlist component featuring a Glassmorphism design with ocean/blue tones, optimized for dating/social platforms. Includes dark mode support and interactive elements.