Componente Lista dei desideri
Un semplice componente per la lista dei desideri per l'e-commerce con microinterazioni e una combinazione di colori in scala di grigi, ottimizzato per il design reattivo e il supporto della modalità scura.
Codice HTML
<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>Componenti correlati
Componente Lista dei desideri
Un componente Wishlist reattivo progettato con un'estetica retrò/vintage, con combinazione di colori triadica e supporto per la modalità scura, ideale per mostrare lavori o prodotti.
Componente Lista dei desideri
Un componente per la lista dei desideri dal design minimalista/piatto con effetti reattivi e supporto per temi scuri.
Componente Lista dei desideri
Un componente reattivo per la lista dei desideri con lo stile di design Glassmorphism che utilizza Tailwind CSS, che supporta la modalità oscura con effetti simili al vetro smerigliato e immagini segnaposto casuali.