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.
HTML Code
<div class="max-w-md mx-auto my-10 p-5 bg-white dark:bg-gray-800 rounded-lg shadow-lg transition-all duration-300 ease-in-out transform hover:scale-105">
<h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-4">Wishlist</h2>
<ul class="space-y-4">
<li class="border border-gray-300 dark:border-gray-700 rounded-lg p-4 flex items-center justify-between transition-shadow duration-300 ease-in-out hover:shadow-lg">
<img src="https://picsum.photos/100/100" alt="Product Image" class="w-20 h-20 object-cover rounded bg-gray-200" />
<div class="flex-1 mx-4">
<h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Product Name</h3>
<p class="text-gray-500 dark:text-gray-400">$19.99</p>
</div>
<button class="text-red-600 dark:text-red-400 hover:underline focus:outline-none">Remove</button>
</li>
<li class="border border-gray-300 dark:border-gray-700 rounded-lg p-4 flex items-center justify-between transition-shadow duration-300 ease-in-out hover:shadow-lg">
<img src="https://picsum.photos/100/101" alt="Product Image" class="w-20 h-20 object-cover rounded bg-gray-200" />
<div class="flex-1 mx-4">
<h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Another Product</h3>
<p class="text-gray-500 dark:text-gray-400">$29.99</p>
</div>
<button class="text-red-600 dark:text-red-400 hover:underline focus:outline-none">Remove</button>
</li>
</ul>
<button class="mt-6 w-full bg-gray-800 dark:bg-gray-200 text-white dark:text-gray-800 font-bold py-2 px-4 rounded hover:bg-gray-900 dark:hover:bg-gray-300 transition duration-300">Move to Cart</button>
</div>Composants associés
Composant de la liste de souhaits
Un composant de liste de souhaits propre et fiable conçu pour les organisations à but non lucratif/caritatives, doté d’une palette de couleurs triadique et d’une réactivité totale avec prise en charge du mode sombre.
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.
Wishlist Composante immobilière
Un composant de liste de souhaits réactif et à contraste élevé pour les propriétés immobilières, inspiré des principes de conception matérielle, avec prise en charge du mode sombre.