Wishlist_Component
Un composant complexe, de couleur triadique, de liste de souhaits d’entreprise/professionnel adapté à un tableau de bord, doté d’un design réactif et d’une prise en charge du mode sombre.
HTML Code
<div class="p-4 sm:p-6 md:p-8 bg-gray-100 dark:bg-gray-900 min-h-screen font-sans">
<div class="max-w-7xl mx-auto">
<h2 class="text-3xl sm:text-4xl font-extrabold text-blue-800 dark:text-blue-400 mb-6 sm:mb-8 text-center sm:text-left">
Your Wishlist
</h2>
<div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-6">
<!-- Filter/Sort Sidebar for larger screens -->
<aside class="md:col-span-1 hidden md:block">
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 space-y-6 border border-gray-200 dark:border-gray-700">
<h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-4">Filters & Sort</h3>
<div>
<label for="sort-by" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Sort By</label>
<select id="sort-by" class="mt-1 block w-full py-2 px-3 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 text-gray-900 dark:text-gray-100">
<option>Date Added (Newest)</option>
<option>Price (Low to High)</option>
<option>Price (High to Low)</option>
<option>Alphabetical (A-Z)</option>
</select>
</div>
<div>
<p class="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Category</p>
<div class="space-y-2">
<label class="flex items-center text-gray-900 dark:text-gray-100">
<input type="checkbox" class="h-4 w-4 text-emerald-600 dark:text-emerald-400 border-gray-300 dark:border-gray-600 rounded focus:ring-emerald-500 dark:focus:ring-emerald-400">
<span class="ml-2">Electronics</span>
</label>
<label class="flex items-center text-gray-900 dark:text-gray-100">
<input type="checkbox" class="h-4 w-4 text-emerald-600 dark:text-emerald-400 border-gray-300 dark:border-gray-600 rounded focus:ring-emerald-500 dark:focus:ring-emerald-400">
<span class="ml-2">Home Goods</span>
</label>
<label class="flex items-center text-gray-900 dark:text-gray-100">
<input type="checkbox" class="h-4 w-4 text-emerald-600 dark:text-emerald-400 border-gray-300 dark:border-gray-600 rounded focus:ring-emerald-500 dark:focus:ring-emerald-400">
<span class="ml-2">Books</span>
</label>
<label class="flex items-center text-gray-900 dark:text-gray-100">
<input type="checkbox" class="h-4 w-4 text-emerald-600 dark:text-emerald-400 border-gray-300 dark:border-gray-600 rounded focus:ring-emerald-500 dark:focus:ring-emerald-400">
<span class="ml-2">Apparel</span>
</label>
</div>
</div>
<div>
<label for="price-range" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Price Range</label>
<input type="range" id="price-range" min="0" max="1000" value="500" class="w-full h-2 bg-gray-200 dark:bg-gray-700 rounded-lg appearance-none cursor-pointer thumb-blue-500 dark:thumb-blue-400">
<div class="flex justify-between text-xs text-gray-500 dark:text-gray-400 mt-1">
<span>$0</span>
<span>$1000+</span>
</div>
</div>
<button class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
Apply Filters
</button>
</div>
</aside>
<!-- Main content area for wishlist items -->
<div class="md:col-span-2 lg:col-span-3">
<!-- Responsive Filter/Sort Bar for smaller screens -->
<div class="flex flex-col sm:flex-row justify-between items-center bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4 mb-6 md:hidden border border-gray-200 dark:border-gray-700">
<div class="w-full sm:w-1/2 mb-4 sm:mb-0">
<label for="mobile-sort-by" class="sr-only">Sort By</label>
<select id="mobile-sort-by" class="block w-full py-2 px-3 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 text-gray-900 dark:text-gray-100">
<option>Sort By: Date Added</option>
<option>Sort By: Price (Low to High)</option>
<option>Sort By: Price (High to Low)</option>
<option>Sort By: Alphabetical (A-Z)</option>
</select>
</div>
<button class="w-full sm:w-auto flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-emerald-600 hover:bg-emerald-700 dark:bg-emerald-500 dark:hover:bg-emerald-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-500">
Apply Filters
</button>
</div>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Wishlist Item 1 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-transform duration-300 hover:scale-[1.02] border border-gray-200 dark:border-gray-700">
<a href="#" class="block group">
<img src="https://picsum.photos/id/1015/400/250" alt="Modern Office Chair" class="w-full h-48 object-cover group-hover:opacity-90 transition-opacity duration-300">
</a>
<div class="p-5">
<h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-2">
<a href="#" class="hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200">Ergonomic Office Chair</a>
</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm mb-3">Ultra-comfortable design for long work hours.</p>
<div class="flex items-center justify-between mb-4">
<span class="text-2xl font-bold text-blue-700 dark:text-blue-300">$299.99</span>
<span class="text-sm text-gray-500 dark:text-gray-400">In Stock</span>
</div>
<div class="flex items-center justify-between">
<button class="flex items-center px-4 py-2 bg-emerald-600 hover:bg-emerald-700 dark:bg-emerald-500 dark:hover:bg-emerald-600 text-white text-sm rounded-md shadow-md transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-500">
<svg class="w-4 h-4 mr-2 text-white" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M3 1a1 1 0 000 2h.28a1 1 0 01.959.659l1.465 4.883A1 1 0 007.456 11H14a1 1 0 00.958-.659l2.42-8.064a1 1 0 00-.958-1.34L3.188 1.442A1 1 0 003 1zm0 15a2 2 0 100-4 2 2 0 000 4zm7 0a2 2 0 100-4 2 2 0 000 4zM9 1h7a1 1 0 000-2H9a1 1 0 000 2z"></path></svg>
Add to Cart
</button>
<button class="text-gray-400 hover:text-red-500 dark:hover:text-red-400 transition-colors duration-200" aria-label="Remove from wishlist">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><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"></path></svg>
</button>
</div>
</div>
</div>
<!-- Wishlist Item 2 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-transform duration-300 hover:scale-[1.02] border border-gray-200 dark:border-gray-700">
<a href="#" class="block group">
<img src="https://picsum.photos/id/237/400/250" alt="Noise Cancelling Headphones" class="w-full h-48 object-cover group-hover:opacity-90 transition-opacity duration-300">
</a>
<div class="p-5">
<h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-2">
<a href="#" class="hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200">Noise-Cancelling Headphones</a>
</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm mb-3">Immersive audio experience with superior comfort.</p>
<div class="flex items-center justify-between mb-4">
<span class="text-2xl font-bold text-blue-700 dark:text-blue-300">$189.00</span>
<span class="text-sm text-red-500 dark:text-red-400">Out of Stock</span>
</div>
<div class="flex items-center justify-between">
<button class="flex items-center px-4 py-2 bg-gray-400 cursor-not-allowed text-white text-sm rounded-md shadow-md focus:outline-none" disabled>
<svg class="w-4 h-4 mr-2 text-white" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M3 1a1 1 0 000 2h.28a1 1 0 01.959.659l1.465 4.883A1 1 0 007.456 11H14a1 1 0 00.958-.659l2.42-8.064a1 1 0 00-.958-1.34L3.188 1.442A1 1 0 003 1zm0 15a2 2 0 100-4 2 2 0 000 4zm7 0a2 2 0 100-4 2 2 0 000 4zM9 1h7a1 1 0 000-2H9a1 1 0 000 2z"></path></svg>
Add to Cart
</button>
<button class="text-gray-400 hover:text-red-500 dark:hover:text-red-400 transition-colors duration-200" aria-label="Remove from wishlist">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><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"></path></svg>
</button>
</div>
</div>
</div>
<!-- Wishlist Item 3 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-transform duration-300 hover:scale-[1.02] border border-gray-200 dark:border-gray-700">
<a href="#" class="block group">
<img src="https://picsum.photos/id/1020/400/250" alt="Smartwatch" class="w-full h-48 object-cover group-hover:opacity-90 transition-opacity duration-300">
</a>
<div class="p-5">
<h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-2">
<a href="#" class="hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200">Advanced Smartwatch</a>
</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm mb-3">Track your fitness and stay connected.</p>
<div class="flex items-center justify-between mb-4">
<span class="text-2xl font-bold text-blue-700 dark:text-blue-300">$349.50</span>
<span class="text-sm text-gray-500 dark:text-gray-400">In Stock</span>
</div>
<div class="flex items-center justify-between">
<button class="flex items-center px-4 py-2 bg-emerald-600 hover:bg-emerald-700 dark:bg-emerald-500 dark:hover:bg-emerald-600 text-white text-sm rounded-md shadow-md transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-500">
<svg class="w-4 h-4 mr-2 text-white" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M3 1a1 1 0 000 2h.28a1 1 0 01.959.659l1.465 4.883A1 1 0 007.456 11H14a1 1 0 00.958-.659l2.42-8.064a1 1 0 00-.958-1.34L3.188 1.442A1 1 0 003 1zm0 15a2 2 0 100-4 2 2 0 000 4zm7 0a2 2 0 100-4 2 2 0 000 4zM9 1h7a1 1 0 000-2H9a1 1 0 000 2z"></path></svg>
Add to Cart
</button>
<button class="text-gray-400 hover:text-red-500 dark:hover:text-red-400 transition-colors duration-200" aria-label="Remove from wishlist">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><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"></path></svg>
</button>
</div>
</div>
</div>
<!-- Wishlist Item 4 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-transform duration-300 hover:scale-[1.02] border border-gray-200 dark:border-gray-700">
<a href="#" class="block group">
<img src="https://picsum.photos/id/1025/400/250" alt="Professional Monitor" class="w-full h-48 object-cover group-hover:opacity-90 transition-opacity duration-300">
</a>
<div class="p-5">
<h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-2">
<a href="#" class="hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200">4K Ultra HD Monitor</a>
</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm mb-3">Crisp visuals for productivity and entertainment.</p>
<div class="flex items-center justify-between mb-4">
<span class="text-2xl font-bold text-blue-700 dark:text-blue-300">$499.00</span>
<span class="text-sm text-gray-500 dark:text-gray-400">In Stock</span>
</div>
<div class="flex items-center justify-between">
<button class="flex items-center px-4 py-2 bg-emerald-600 hover:bg-emerald-700 dark:bg-emerald-500 dark:hover:bg-emerald-600 text-white text-sm rounded-md shadow-md transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-500">
<svg class="w-4 h-4 mr-2 text-white" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M3 1a1 1 0 000 2h.28a1 1 0 01.959.659l1.465 4.883A1 1 0 007.456 11H14a1 1 0 00.958-.659l2.42-8.064a1 1 0 00-.958-1.34L3.188 1.442A1 1 0 003 1zm0 15a2 2 0 100-4 2 2 0 000 4zm7 0a2 2 0 100-4 2 2 0 000 4zM9 1h7a1 1 0 000-2H9a1 1 0 000 2z"></path></svg>
Add to Cart
</button>
<button class="text-gray-400 hover:text-red-500 dark:hover:text-red-400 transition-colors duration-200" aria-label="Remove from wishlist">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><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"></path></svg>
</button>
</div>
</div>
</div>
<!-- Wishlist Item 5 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-transform duration-300 hover:scale-[1.02] border border-gray-200 dark:border-gray-700">
<a href="#" class="block group">
<img src="https://picsum.photos/id/1018/400/250" alt="Mechanical Keyboard" class="w-full h-48 object-cover group-hover:opacity-90 transition-opacity duration-300">
</a>
<div class="p-5">
<h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-2">
<a href="#" class="hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200">Gaming Mechanical Keyboard</a>
</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm mb-3">Tactile feedback for ultimate typing and gaming.</p>
<div class="flex items-center justify-between mb-4">
<span class="text-2xl font-bold text-blue-700 dark:text-blue-300">$129.99</span>
<span class="text-sm text-gray-500 dark:text-gray-400">In Stock</span>
</div>
<div class="flex items-center justify-between">
<button class="flex items-center px-4 py-2 bg-emerald-600 hover:bg-emerald-700 dark:bg-emerald-500 dark:hover:bg-emerald-600 text-white text-sm rounded-md shadow-md transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-500">
<svg class="w-4 h-4 mr-2 text-white" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M3 1a1 1 0 000 2h.28a1 1 0 01.959.659l1.465 4.883A1 1 0 007.456 11H14a1 1 0 00.958-.659l2.42-8.064a1 1 0 00-.958-1.34L3.188 1.442A1 1 0 003 1zm0 15a2 2 0 100-4 2 2 0 000 4zm7 0a2 2 0 100-4 2 2 0 000 4zM9 1h7a1 1 0 000-2H9a1 1 0 000 2z"></path></svg>
Add to Cart
</button>
<button class="text-gray-400 hover:text-red-500 dark:hover:text-red-400 transition-colors duration-200" aria-label="Remove from wishlist">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><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"></path></svg>
</button>
</div>
</div>
</div>
<!-- Wishlist Item 6 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-transform duration-300 hover:scale-[1.02] border border-gray-200 dark:border-gray-700">
<a href="#" class="block group">
<img src="https://picsum.photos/seed/picsum/400/250" alt="Wireless Mouse" class="w-full h-48 object-cover group-hover:opacity-90 transition-opacity duration-300">
</a>
<div class="p-5">
<h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-2">
<a href="#" class="hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200">Ergonomic Wireless Mouse</a>
</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm mb-3">Precision and comfort for all-day use.</p>
<div class="flex items-center justify-between mb-4">
<span class="text-2xl font-bold text-blue-700 dark:text-blue-300">$59.99</span>
<span class="text-sm text-gray-500 dark:text-gray-400">In Stock</span>
</div>
<div class="flex items-center justify-between">
<button class="flex items-center px-4 py-2 bg-emerald-600 hover:bg-emerald-700 dark:bg-emerald-500 dark:hover:bg-emerald-600 text-white text-sm rounded-md shadow-md transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-500">
<svg class="w-4 h-4 mr-2 text-white" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M3 1a1 1 0 000 2h.28a1 1 0 01.959.659l1.465 4.883A1 1 0 007.456 11H14a1 1 0 00.958-.659l2.42-8.064a1 1 0 00-.958-1.34L3.188 1.442A1 1 0 003 1zm0 15a2 2 0 100-4 2 2 0 000 4zm7 0a2 2 0 100-4 2 2 0 000 4zM9 1h7a1 1 0 000-2H9a1 1 0 000 2z"></path></svg>
Add to Cart
</button>
<button class="text-gray-400 hover:text-red-500 dark:hover:text-red-400 transition-colors duration-200" aria-label="Remove from wishlist">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><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"></path></svg>
</button>
</div>
</div>
</div>
</div>
<!-- Pagination/Load More Button -->
<div class="mt-8 flex justify-center">
<button class="px-6 py-3 bg-blue-600 hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600 text-white font-medium rounded-md shadow-lg transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
Load More Items
</button>
</div>
</div>
</div>
</div>
</div>Composants associés
Composant de la liste de souhaits
Un composant de liste de souhaits réactif conçu avec des éléments skeuomorphes et des couleurs complémentaires pour un tableau de bord à thème sombre.
Composant de la liste de souhaits
Un composant de liste de souhaits simple et réactif adapté aux plateformes de rencontres ou de connexion sociale, doté d’une esthétique de design 3D avec des tons bleus d’entreprise et une prise en charge du mode sombre.
Composant de la liste de souhaits
Un composant de liste de souhaits avec un style de conception 3D, une palette de couleurs pastel et une conception réactive pour les sites Web d’entreprise, prenant en charge le mode sombre.