Componente Lista dei desideri
Componente Wishlist Modalità oscura con design monocromatico semplice per cruscotto
Codice HTML
<div class="bg-gray-900 text-gray-200 dark:bg-gray-800 dark:text-gray-100 min-h-screen p-8">
<div class="max-w-md mx-auto">
<h2 class="text-2xl font-bold mb-6 text-gray-100 dark:text-gray-50">My Wishlist</h2>
<!-- Wishlist Item 1 -->
<div class="flex items-center justify-between bg-gray-800 dark:bg-gray-700 p-4 rounded-lg shadow-md mb-4">
<div class="flex items-center">
<img src="https://picsum.photos/id/1018/60/60" alt="Product Image" class="rounded-md mr-4">
<div>
<h3 class="text-lg font-semibold text-gray-200 dark:text-gray-100">Product Name 1</h3>
<p class="text-gray-400 dark:text-gray-300">$19.99</p>
</div>
</div>
<button class="text-red-500 hover:text-red-600 dark:text-red-400 dark:hover:text-red-500">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
<!-- Wishlist Item 2 -->
<div class="flex items-center justify-between bg-gray-800 dark:bg-gray-700 p-4 rounded-lg shadow-md mb-4">
<div class="flex items-center">
<img src="https://picsum.photos/id/1015/60/60" alt="Product Image" class="rounded-md mr-4">
<div>
<h3 class="text-lg font-semibold text-gray-200 dark:text-gray-100">Product Name 2</h3>
<p class="text-gray-400 dark:text-gray-300">$29.50</p>
</div>
</div>
<button class="text-red-500 hover:text-red-600 dark:text-red-400 dark:hover:text-red-500">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
<!-- Wishlist Item 3 -->
<div class="flex items-center justify-between bg-gray-800 dark:bg-gray-700 p-4 rounded-lg shadow-md">
<div class="flex items-center">
<img src="https://picsum.photos/id/1016/60/60" alt="Product Image" class="rounded-md mr-4">
<div>
<h3 class="text-lg font-semibold text-gray-200 dark:text-gray-100">Product Name 3</h3>
<p class="text-gray-400 dark:text-gray-300">$9.00</p>
</div>
</div>
<button class="text-red-500 hover:text-red-600 dark:text-red-400 dark:hover:text-red-500">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
</div>
</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 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 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.