Composant de la liste de souhaits Art Déco
Un composant complexe et réactif de la liste de souhaits de style Art Déco inspiré du luxe des années 1920-1930, avec des tons de bijoux adaptés aux interfaces finance/banque. Inclut la prise en charge du mode sombre.
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>Composants associés
Composant de la liste de souhaits
Un composant de liste de souhaits réactif avec le style de conception Glassmorphism utilisant Tailwind CSS, prenant en charge le mode sombre avec des effets de verre dépoli et des images de remplacement aléatoires.
Composant de la liste de souhaits - Material Design
Un composant de liste de souhaits inspiré du design matériel avec un design réactif et une prise en charge du thème sombre.
Glassmorphism_Wishlist_Component
Un composant de liste de souhaits complexe et réactif avec un design Glassmorphism avec des tons océan/bleu, optimisé pour les plateformes de rencontres/sociales. Comprend la prise en charge du mode sombre et des éléments interactifs.