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 de liste de souhaits réactif conçu en mode sombre à l’aide de Tailwind CSS. Il dispose d’une disposition de carte pour les éléments avec des images, des descriptions et des avatars d’utilisateur, prenant en charge le thème sombre et les effets réactifs.
Composant de la liste de souhaits
Un composant de liste de souhaits réactif conçu avec des éléments 3D, des tons de terre et la prise en charge du mode sombre pour présenter des travaux ou des produits.
Composant de la liste de souhaits
Un composant de liste de souhaits de style 3D pour les interfaces de médias sociaux, avec des éléments interactifs et la prise en charge du mode sombre.