Componente Lista dei desideri
Componente Wishlist retrò/vintage per l'e-commerce con combinazione di colori triadica, complessità semplice, design reattivo e supporto per temi scuri.
Codice HTML
<div class="font-mono bg-gray-100 dark:bg-gray-900 min-h-screen p-8">
<div class="max-w-4xl mx-auto">
<h1 class="text-4xl font-bold text-purple-700 dark:text-purple-300 mb-8 text-center">My Wishlist</h1>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Wishlist Item 1 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300 transform hover:-translate-y-1">
<img src="https://picsum.photos/400/300?random=1" alt="Product Image" class="w-full h-48 object-cover rounded-t-lg">
<div class="p-6">
<h2 class="text-xl font-semibold text-green-600 dark:text-green-400 mb-2">Retro Analog Camera</h2>
<p class="text-gray-700 dark:text-gray-300 text-sm mb-4">Capture memories in true vintage style. Limited stock!</p>
<div class="flex justify-between items-center">
<span class="text-2xl font-bold text-red-500 dark:text-red-400">$129.99</span>
<button class="bg-purple-600 hover:bg-purple-700 text-white font-bold py-2 px-4 rounded-full transition-colors duration-300">Add to Cart</button>
</div>
</div>
</div>
<!-- Wishlist Item 2 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300 transform hover:-translate-y-1">
<img src="https://picsum.photos/400/300?random=2" alt="Product Image" class="w-full h-48 object-cover rounded-t-lg">
<div class="p-6">
<h2 class="text-xl font-semibold text-green-600 dark:text-green-400 mb-2">Classic Vinyl Player</h2>
<p class="text-gray-700 dark:text-gray-300 text-sm mb-4">Experience the warm, rich sound of vinyl records like never before.</p>
<div class="flex justify-between items-center">
<span class="text-2xl font-bold text-red-500 dark:text-red-400">$89.50</span>
<button class="bg-purple-600 hover:bg-purple-700 text-white font-bold py-2 px-4 rounded-full transition-colors duration-300">Add to Cart</button>
</div>
</div>
</div>
<!-- Wishlist Item 3 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300 transform hover:-translate-y-1">
<img src="https://picsum.photos/400/300?random=3" alt="Product Image" class="w-full h-48 object-cover rounded-t-lg">
<div class="p-6">
<h2 class="text-xl font-semibold text-green-600 dark:text-green-400 mb-2">Vintage Desk Lamp</h2>
<p class="text-gray-700 dark:text-gray-300 text-sm mb-4">Illuminate your workspace with a touch of timeless elegance.</p>
<div class="flex justify-between items-center">
<span class="text-2xl font-bold text-red-500 dark:text-red-400">$39.99</span>
<button class="bg-purple-600 hover:bg-purple-700 text-white font-bold py-2 px-4 rounded-full transition-colors duration-300">Add to Cart</button>
</div>
</div>
</div>
</div>
</div>
</div>Componenti correlati
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.
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.
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.