Componente Lista dei desideri
Un componente minimalista della lista dei desideri con immagini segnaposto e un tema scuro.
Codice HTML
<div class="max-w-md mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
<div class="p-4">
<h2 class="text-lg font-bold text-gray-900 dark:text-white">My Wishlist</h2>
<ul class="mt-4 space-y-4">
<li class="flex items-center justify-between bg-gray-100 dark:bg-gray-700 p-4 rounded-lg">
<div class="flex items-center">
<img src="https://picsum.photos/50/50" alt="Product Image" class="w-12 h-12 rounded-full mr-4">
<div>
<h3 class="text-md font-semibold text-gray-800 dark:text-gray-200">Product Title 1</h3>
<p class="text-sm text-gray-600 dark:text-gray-400">Short description of the product.</p>
</div>
</div>
<button class="bg-blue-500 text-white rounded-md px-2 py-1 hover:bg-blue-600 transition duration-200">Add to Cart</button>
</li>
<li class="flex items-center justify-between bg-gray-100 dark:bg-gray-700 p-4 rounded-lg">
<div class="flex items-center">
<img src="https://picsum.photos/50/50?random=1" alt="Product Image" class="w-12 h-12 rounded-full mr-4">
<div>
<h3 class="text-md font-semibold text-gray-800 dark:text-gray-200">Product Title 2</h3>
<p class="text-sm text-gray-600 dark:text-gray-400">Short description of the product.</p>
</div>
</div>
<button class="bg-blue-500 text-white rounded-md px-2 py-1 hover:bg-blue-600 transition duration-200">Add to Cart</button>
</li>
<li class="flex items-center justify-between bg-gray-100 dark:bg-gray-700 p-4 rounded-lg">
<div class="flex items-center">
<img src="https://picsum.photos/50/50?random=2" alt="Product Image" class="w-12 h-12 rounded-full mr-4">
<div>
<h3 class="text-md font-semibold text-gray-800 dark:text-gray-200">Product Title 3</h3>
<p class="text-sm text-gray-600 dark:text-gray-400">Short description of the product.</p>
</div>
</div>
<button class="bg-blue-500 text-white rounded-md px-2 py-1 hover:bg-blue-600 transition duration-200">Add to Cart</button>
</li>
</ul>
</div>
</div>Componenti correlati
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.
Componente Lista dei desideri
Un componente Wishlist reattivo progettato per una dashboard, caratterizzato da una combinazione di colori monocromatica e uno stile di design 3D.
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.