Componente Lista dei desideri
Un componente della lista dei desideri semplice e reattivo per siti web aziendali/aziendali con microinterazioni. Presenta una combinazione di colori analoga (blu-verde-verde acqua), supporto per temi scuri e sottili animazioni al passaggio del mouse. Il componente visualizza gli articoli della lista dei desideri con immagini dei prodotti, nomi, prezzi e pulsanti di azione.
Codice HTML
<div class="max-w-md mx-auto bg-gradient-to-br from-blue-50 to-teal-50 dark:from-slate-800 dark:to-slate-900 rounded-lg shadow-md p-6 transition-all duration-300 ease-in-out hover:shadow-lg">
<div class="flex items-center justify-between mb-6">
<h2 class="text-xl font-semibold text-blue-700 dark:text-teal-400 transition-colors duration-300">Your Wishlist</h2>
<span class="bg-teal-100 dark:bg-teal-900 text-teal-600 dark:text-teal-300 text-sm px-3 py-1 rounded-full transition-all duration-300 hover:scale-105">3 items</span>
</div>
<ul class="space-y-4">
<!-- Wishlist Item 1 -->
<li class="flex items-center border-b border-blue-100 dark:border-slate-700 pb-4 group">
<div class="relative w-16 h-16 overflow-hidden rounded-md mr-4 transition-transform duration-300 group-hover:scale-105">
<img src="https://picsum.photos/200/200?random=1" alt="Product" class="object-cover w-full h-full">
<div class="absolute inset-0 bg-gradient-to-t from-teal-500/30 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
</div>
<div class="flex-grow">
<h3 class="text-blue-800 dark:text-blue-300 font-medium transition-colors duration-300">Business Analytics Tool</h3>
<p class="text-teal-600 dark:text-teal-400 text-sm">$199.99</p>
</div>
<div class="flex space-x-2">
<button class="text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-200 transition-all duration-300 hover:scale-110">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z" />
</svg>
</button>
<button class="text-teal-600 dark:text-teal-400 hover:text-teal-800 dark:hover:text-teal-200 transition-all duration-300 hover:scale-110">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
</svg>
</button>
</div>
</li>
<!-- Wishlist Item 2 -->
<li class="flex items-center border-b border-blue-100 dark:border-slate-700 pb-4 group">
<div class="relative w-16 h-16 overflow-hidden rounded-md mr-4 transition-transform duration-300 group-hover:scale-105">
<img src="https://picsum.photos/200/200?random=2" alt="Product" class="object-cover w-full h-full">
<div class="absolute inset-0 bg-gradient-to-t from-teal-500/30 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
</div>
<div class="flex-grow">
<h3 class="text-blue-800 dark:text-blue-300 font-medium transition-colors duration-300">CRM Software Premium</h3>
<p class="text-teal-600 dark:text-teal-400 text-sm">$299.99</p>
</div>
<div class="flex space-x-2">
<button class="text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-200 transition-all duration-300 hover:scale-110">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z" />
</svg>
</button>
<button class="text-teal-600 dark:text-teal-400 hover:text-teal-800 dark:hover:text-teal-200 transition-all duration-300 hover:scale-110">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
</svg>
</button>
</div>
</li>
<!-- Wishlist Item 3 -->
<li class="flex items-center pb-2 group">
<div class="relative w-16 h-16 overflow-hidden rounded-md mr-4 transition-transform duration-300 group-hover:scale-105">
<img src="https://picsum.photos/200/200?random=3" alt="Product" class="object-cover w-full h-full">
<div class="absolute inset-0 bg-gradient-to-t from-teal-500/30 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
</div>
<div class="flex-grow">
<h3 class="text-blue-800 dark:text-blue-300 font-medium transition-colors duration-300">Dashboard Template Bundle</h3>
<p class="text-teal-600 dark:text-teal-400 text-sm">$149.99</p>
</div>
<div class="flex space-x-2">
<button class="text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-200 transition-all duration-300 hover:scale-110">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z" />
</svg>
</button>
<button class="text-teal-600 dark:text-teal-400 hover:text-teal-800 dark:hover:text-teal-200 transition-all duration-300 hover:scale-110">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
</svg>
</button>
</div>
</li>
</ul>
<div class="mt-6 flex justify-between items-center">
<button class="px-4 py-2 bg-gradient-to-r from-blue-500 to-teal-500 text-white rounded-lg shadow-sm hover:shadow-md transition-all duration-300 hover:translate-y-[-2px] focus:outline-none focus:ring-2 focus:ring-teal-400 focus:ring-offset-2 dark:focus:ring-offset-slate-900">
Add All to Cart
</button>
<p class="text-blue-700 dark:text-blue-300 font-medium">Total: <span class="text-teal-600 dark:text-teal-400">$649.97</span></p>
</div>
</div>Componenti correlati
Componente Lista dei desideri
Un componente Wishlist reattivo con un'estetica di design retrò/vintage, utilizzando una combinazione di colori monocromatica per l'e-commerce.
Componente Lista dei desideri
Componente Wishlist reattivo con supporto per la modalità oscura utilizzando Tailwind CSS. Visualizzazione di un elenco di articoli con immagini, titoli, prezzi e pulsanti di rimozione. Progettato per un cruscotto dai colori vivaci.
Componente Lista dei desideri
Un componente reattivo della lista dei desideri progettato in modalità oscura utilizzando Tailwind CSS. Presenta un layout di carta per gli oggetti con immagini, descrizioni e avatar utente, che supporta il tema scuro e gli effetti reattivi.