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.
Codice HTML
<div class="max-w-md mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
<div class="bg-gray-100 dark:bg-gray-700 px-6 py-4">
<h2 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-2">My Wishlist</h2>
<p class="text-gray-600 dark:text-gray-400">Items I'd love to get someday!</p>
</div>
<div class="divide-y divide-gray-300 dark:divide-gray-600">
<!-- Item 1 -->
<div class="flex items-center justify-between p-4">
<img src="https://picsum.photos/100/100" alt="Item 1" class="rounded-full">
<div class="ml-4">
<h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Vintage Camera</h3>
<span class="text-gray-500 dark:text-gray-400">Price: $120</span>
</div>
<button class="ml-auto bg-gray-300 dark:bg-gray-700 hover:bg-gray-400 dark:hover:bg-gray-600 text-gray-900 dark:text-gray-100 font-bold py-2 px-4 rounded">
Add to Cart
</button>
</div>
<!-- Item 2 -->
<div class="flex items-center justify-between p-4">
<img src="https://picsum.photos/100/100" alt="Item 2" class="rounded-full">
<div class="ml-4">
<h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Retro Turntable</h3>
<span class="text-gray-500 dark:text-gray-400">Price: $250</span>
</div>
<button class="ml-auto bg-gray-300 dark:bg-gray-700 hover:bg-gray-400 dark:hover:bg-gray-600 text-gray-900 dark:text-gray-100 font-bold py-2 px-4 rounded">
Add to Cart
</button>
</div>
<!-- Item 3 -->
<div class="flex items-center justify-between p-4">
<img src="https://picsum.photos/100/100" alt="Item 3" class="rounded-full">
<div class="ml-4">
<h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Classic Sneakers</h3>
<span class="text-gray-500 dark:text-gray-400">Price: $80</span>
</div>
<button class="ml-auto bg-gray-300 dark:bg-gray-700 hover:bg-gray-400 dark:hover:bg-gray-600 text-gray-900 dark:text-gray-100 font-bold py-2 px-4 rounded">
Add to Cart
</button>
</div>
</div>
<div class="px-6 py-4">
<h4 class="text-lg font-semibold text-gray-900 dark:text-gray-100">Account Information</h4>
<div class="mt-2 flex items-center">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="rounded-full h-10 w-10">
<div class="ml-2">
<p class="text-gray-900 dark:text-gray-100">John Doe</p>
<p class="text-gray-600 dark:text-gray-400">[email protected]</p>
</div>
</div>
</div>
</div>Componenti correlati
Componente Lista dei desideri
Un componente minimalista della lista dei desideri con immagini segnaposto e un tema scuro.
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 della lista dei desideri in stile neumorfismo per i social media, con una combinazione di colori complementari. Include un design reattivo che utilizza Tailwind CSS con supporto per la modalità oscura. Vengono utilizzate solo le classi HTML e Tailwind, senza JavaScript. Le immagini provengono da picsum.photos e gli avatar da randomuser.me.