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.
Codice HTML
<div class="bg-gray-900 dark:bg-gray-800 text-gray-100 dark:text-gray-200 p-6 rounded-lg max-w-md mx-auto shadow-lg">
<h2 class="text-3xl font-bold text-center mb-4">My Wishlist</h2>
<div class="space-y-4">
<div class="flex items-center justify-between bg-gray-700 dark:bg-gray-600 p-4 rounded-lg">
<img src="https://picsum.photos/100" alt="Product" class="w-16 h-16 rounded-lg">
<div class="flex-1 ml-4">
<h3 class="text-xl font-semibold">Product Title 1</h3>
<p class="text-gray-300 dark:text-gray-400">Description of the product goes here.</p>
</div>
<button class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded">Add to Cart</button>
</div>
<div class="flex items-center justify-between bg-gray-700 dark:bg-gray-600 p-4 rounded-lg">
<img src="https://picsum.photos/100?random=1" alt="Product" class="w-16 h-16 rounded-lg">
<div class="flex-1 ml-4">
<h3 class="text-xl font-semibold">Product Title 2</h3>
<p class="text-gray-300 dark:text-gray-400">Description of the product goes here.</p>
</div>
<button class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded">Add to Cart</button>
</div>
<div class="flex items-center justify-between bg-gray-700 dark:bg-gray-600 p-4 rounded-lg">
<img src="https://picsum.photos/100?random=2" alt="Product" class="w-16 h-16 rounded-lg">
<div class="flex-1 ml-4">
<h3 class="text-xl font-semibold">Product Title 3</h3>
<p class="text-gray-300 dark:text-gray-400">Description of the product goes here.</p>
</div>
<button class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded">Add to Cart</button>
</div>
</div>
<div class="mt-6 text-center">
<h4 class="text-2xl font-bold">User: John Doe</h4>
<img src="https://randomuser.me/api/portraits/men/10.jpg" alt="User Avatar" class="w-24 h-24 rounded-full mx-auto mt-2">
</div>
</div>Componenti correlati
Componente Lista dei desideri
Un componente minimalista della lista dei desideri con immagini segnaposto e un tema scuro.
Componente Glassmorphism Wishlist
Un componente della lista dei desideri in stile glassmorphism semplice e reattivo per piattaforme musicali/audio, con elementi traslucidi simili al vetro smerigliato con effetti di sfocatura e una combinazione di colori blu aziendale, con supporto per la modalità oscura.
Componente Lista dei desideri
Un componente della lista dei desideri in stile 3D per le interfacce dei social media, con elementi interattivi e supporto per la modalità oscura.