Componente Lista dei desideri
Componente Wishlist reattivo con supporto per la modalità oscura utilizzando Tailwind CSS. Visualizzazione di un elenco di articoli con immagini, titoli, prezzi e pulsanti di rimozione. Progettato per un cruscotto dai colori vivaci.
Codice HTML
<div class="bg-gray-900 text-gray-200 min-h-screen p-8">
<div class="max-w-4xl mx-auto">
<h2 class="text-2xl font-bold mb-6 text-purple-400">My Wishlist</h2>
<div class="space-y-6">
<!-- Wishlist Item 1 -->
<div class="flex flex-col md:flex-row items-center bg-gray-800 p-4 rounded-lg shadow-lg">
<img src="https://picsum.photos/seed/item1/150/100" alt="Product Image" class="w-full md:w-32 h-auto md:h-24 object-cover rounded-md mb-4 md:mb-0 md:mr-6">
<div class="flex-grow">
<h3 class="text-xl font-semibold text-teal-400">Vibrant Product Title 1</h3>
<p class="text-gray-400">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p class="text-lg font-bold mt-2 text-orange-400">$199.99</p>
</div>
<button class="mt-4 md:mt-0 bg-red-600 hover:bg-red-700 text-white font-bold py-2 px-4 rounded">Remove</button>
</div>
<!-- Wishlist Item 2 -->
<div class="flex flex-col md:flex-row items-center bg-gray-800 p-4 rounded-lg shadow-lg">
<img src="https://picsum.photos/seed/item2/150/100" alt="Product Image" class="w-full md:w-32 h-auto md:h-24 object-cover rounded-md mb-4 md:mb-0 md:mr-6">
<div class="flex-grow">
<h3 class="text-xl font-semibold text-cyan-400">Exciting Product Title 2</h3>
<p class="text-gray-400">Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p class="text-lg font-bold mt-2 text-lime-400">$249.50</p>
</div>
<button class="mt-4 md:mt-0 bg-red-600 hover:bg-red-700 text-white font-bold py-2 px-4 rounded">Remove</button>
</div>
<!-- Wishlist Item 3 -->
<div class="flex flex-col md:flex-row items-center bg-gray-800 p-4 rounded-lg shadow-lg">
<img src="https://picsum.photos/seed/item3/150/100" alt="Product Image" class="w-full md:w-32 h-auto md:h-24 object-cover rounded-md mb-4 md:mb-0 md:mr-6">
<div class="flex-grow">
<h3 class="text-xl font-semibold text-pink-400">Dynamic Product Title 3</h3>
<p class="text-gray-400">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
<p class="text-lg font-bold mt-2 text-yellow-400">$99.00</p>
</div>
<button class="mt-4 md:mt-0 bg-red-600 hover:bg-red-700 text-white font-bold py-2 px-4 rounded">Remove</button>
</div>
</div>
</div>
</div>Componenti correlati
Componente Lista dei desideri
Un componente della lista dei desideri in stile brutalista per siti Web aziendali, caratterizzato da una combinazione di colori in scala di grigi e una complessità moderata. Design reattivo con supporto per la modalità oscura utilizzando le classi CSS di Tailwind.
Componente Lista dei desideri
Un componente della lista dei desideri reattivo progettato con elementi scheumorfici e colori complementari per una dashboard a tema scuro.
Componente Lista dei desideri
Un componente della lista dei desideri semplice e reattivo adatto a piattaforme di appuntamenti o di connessione sociale, caratterizzato da un'estetica di design 3D con toni blu aziendali e supporto per la modalità scura.