Composant de la liste de souhaits
Un composant de liste de souhaits simple et réactif avec des dégradés de couleurs à contraste élevé et des transitions fluides, adapté aux sites Web d’entreprise. Inclut la prise en charge du mode sombre.
HTML Code
<div class="p-4 sm:p-6 md:p-8 bg-gradient-to-br from-blue-50 to-indigo-100 dark:from-gray-900 dark:to-blue-950 min-h-screen font-sans">
<div class="max-w-4xl mx-auto bg-white dark:bg-gray-800 shadow-xl rounded-lg overflow-hidden transition-all duration-300 ease-in-out">
<div class="p-6 sm:p-8 bg-gradient-to-r from-indigo-600 to-purple-600 dark:from-sky-700 dark:to-indigo-700 text-white">
<h2 class="text-2xl sm:text-3xl font-bold mb-2">Your Wishlist</h2>
<p class="text-indigo-100 dark:text-sky-100 text-base sm:text-lg">Keep track of items you love and might want later.</p>
</div>
<div class="divide-y divide-gray-200 dark:divide-gray-700">
<!-- Wishlist Item 1 -->
<div class="flex flex-col sm:flex-row items-center p-4 sm:p-6 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-200 ease-in-out">
<img src="https://picsum.photos/seed/wishlist1/100/100" alt="Product image" class="w-24 h-24 sm:w-28 sm:h-28 flex-shrink-0 object-cover rounded-md shadow-sm mb-4 sm:mb-0 sm:mr-6">
<div class="flex-grow text-center sm:text-left">
<h3 class="text-lg sm:text-xl font-semibold text-gray-900 dark:text-gray-100 mb-1">Premium Wireless Earbuds</h3>
<p class="text-sm text-gray-600 dark:text-gray-400 mb-2">Crystal-clear sound and ergonomic design.</p>
<span class="text-xl font-bold text-indigo-600 dark:text-teal-400">$129.99</span>
</div>
<div class="mt-4 sm:mt-0 sm:ml-4 flex-shrink-0">
<button class="px-4 py-2 sm:px-5 sm:py-2.5 bg-indigo-500 hover:bg-indigo-600 dark:bg-sky-600 dark:hover:bg-sky-700 text-white rounded-md text-sm font-medium transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 dark:focus:ring-sky-500 dark:focus:ring-offset-gray-800">
Add to Cart
</button>
</div>
</div>
<!-- Wishlist Item 2 -->
<div class="flex flex-col sm:flex-row items-center p-4 sm:p-6 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-200 ease-in-out">
<img src="https://picsum.photos/seed/wishlist2/100/100" alt="Product image" class="w-24 h-24 sm:w-28 sm:h-28 flex-shrink-0 object-cover rounded-md shadow-sm mb-4 sm:mb-0 sm:mr-6">
<div class="flex-grow text-center sm:text-left">
<h3 class="text-lg sm:text-xl font-semibold text-gray-900 dark:text-gray-100 mb-1">Ergonomic Desk Chair</h3>
<p class="text-sm text-gray-600 dark:text-gray-400 mb-2">Ultimate comfort for long working hours.</p>
<span class="text-xl font-bold text-indigo-600 dark:text-teal-400">$349.00</span>
</div>
<div class="mt-4 sm:mt-0 sm:ml-4 flex-shrink-0">
<button class="px-4 py-2 sm:px-5 sm:py-2.5 bg-indigo-500 hover:bg-indigo-600 dark:bg-sky-600 dark:hover:bg-sky-700 text-white rounded-md text-sm font-medium transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 dark:focus:ring-sky-500 dark:focus:ring-offset-gray-800">
Add to Cart
</button>
</div>
</div>
<!-- Wishlist Item 3 -->
<div class="flex flex-col sm:flex-row items-center p-4 sm:p-6 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-200 ease-in-out">
<img src="https://picsum.photos/seed/wishlist3/100/100" alt="Product image" class="w-24 h-24 sm:w-28 sm:h-28 flex-shrink-0 object-cover rounded-md shadow-sm mb-4 sm:mb-0 sm:mr-6">
<div class="flex-grow text-center sm:text-left">
<h3 class="text-lg sm:text-xl font-semibold text-gray-900 dark:text-gray-100 mb-1">Smart Home Hub</h3>
<p class="text-sm text-gray-600 dark:text-gray-400 mb-2">Connect and control all your smart devices.</p>
<span class="text-xl font-bold text-indigo-600 dark:text-teal-400">$89.50</span>
</div>
<div class="mt-4 sm:mt-0 sm:ml-4 flex-shrink-0">
<button class="px-4 py-2 sm:px-5 sm:py-2.5 bg-indigo-500 hover:bg-indigo-600 dark:bg-sky-600 dark:hover:bg-sky-700 text-white rounded-md text-sm font-medium transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 dark:focus:ring-sky-500 dark:focus:ring-offset-gray-800">
Add to Cart
</button>
</div>
</div>
</div>
<div class="p-6 sm:p-8 border-t border-gray-200 dark:border-gray-700 flex justify-end bg-gray-50 dark:bg-gray-800">
<button class="px-6 py-3 bg-gradient-to-r from-red-500 to-pink-500 hover:from-red-600 hover:to-pink-600 text-white font-semibold rounded-md shadow-lg transition-all duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-105 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 dark:focus:ring-pink-500 dark:focus:ring-offset-gray-800">
Clear Wishlist
</button>
</div>
</div>
</div>Composants associés
Composant de la liste de souhaits
Un composant simple de liste de souhaits e-commerce avec des micro-interactions et une palette de couleurs en niveaux de gris, optimisé pour le responsive design et la prise en charge du mode sombre.
Glassmorphism Wishlist Component - Agriculture/Élevage
Un composant de liste de souhaits réactif avec un style de conception glassmorphism, une palette de couleurs pastel et adapté aux sites Web agricoles. Comprend des éléments translucides givrés ressemblant à du verre avec des effets de flou, du HTML sémantique et une prise en charge complète du mode sombre.
Composant de la liste de souhaits
Un composant de liste de souhaits réactif conçu avec une esthétique rétro/vintage, avec une palette de couleurs triadique et une prise en charge du mode sombre, idéal pour présenter des travaux ou des produits.