Componente Lista dei desideri
Un componente Wishlist reattivo progettato per la modalità oscura, adatto per siti Web aziendali/aziendali. Presenta elementi interattivi e una combinazione di colori complementari, costruita utilizzando Tailwind CSS.
Codice HTML
<div class="min-h-screen bg-gray-900 text-white p-5">
<h1 class="text-2xl font-bold mb-5">Wishlist</h1>
<div class="overflow-x-auto">
<table class="min-w-full bg-gray-800 rounded-lg shadow-lg">
<thead>
<tr class="bg-gray-700 text-gray-200">
<th class="py-2 px-4">Item</th>
<th class="py-2 px-4">Description</th>
<th class="py-2 px-4">Price</th>
<th class="py-2 px-4">Actions</th>
</tr>
</thead>
<tbody>
<tr class="border-b border-gray-600">
<td class="py-4 px-4 flex items-center">
<img src="https://picsum.photos/50/50" alt="Item 1" class="rounded mr-3">
Item 1
</td>
<td class="py-4 px-4">This is a description of item 1.</td>
<td class="py-4 px-4">$19.99</td>
<td class="py-4 px-4">
<button class="bg-blue-600 text-white py-1 px-3 rounded hover:bg-blue-500">Add to Cart</button>
<button class="bg-red-600 text-white py-1 px-3 rounded hover:bg-red-500">Remove</button>
</td>
</tr>
<tr class="border-b border-gray-600">
<td class="py-4 px-4 flex items-center">
<img src="https://picsum.photos/50/51" alt="Item 2" class="rounded mr-3">
Item 2
</td>
<td class="py-4 px-4">This is a description of item 2.</td>
<td class="py-4 px-4">$29.99</td>
<td class="py-4 px-4">
<button class="bg-blue-600 text-white py-1 px-3 rounded hover:bg-blue-500">Add to Cart</button>
<button class="bg-red-600 text-white py-1 px-3 rounded hover:bg-red-500">Remove</button>
</td>
</tr>
<tr class="border-b border-gray-600">
<td class="py-4 px-4 flex items-center">
<img src="https://picsum.photos/50/52" alt="Item 3" class="rounded mr-3">
Item 3
</td>
<td class="py-4 px-4">This is a description of item 3.</td>
<td class="py-4 px-4">$39.99</td>
<td class="py-4 px-4">
<button class="bg-blue-600 text-white py-1 px-3 rounded hover:bg-blue-500">Add to Cart</button>
<button class="bg-red-600 text-white py-1 px-3 rounded hover:bg-red-500">Remove</button>
</td>
</tr>
</tbody>
</table>
</div>
<div class="mt-5 flex justify-between">
<button class="bg-green-600 text-white py-2 px-5 rounded hover:bg-green-500">Move All to Cart</button>
<button class="bg-gray-600 text-white py-2 px-5 rounded hover:bg-gray-500">Clear Wishlist</button>
</div>
</div>Componenti correlati
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 semplice componente per la lista dei desideri per l'e-commerce con microinterazioni e una combinazione di colori in scala di grigi, ottimizzato per il design reattivo e il supporto della modalità scura.
Componente Lista dei desideri
Un semplice componente della lista dei desideri in stile brutalista per un portfolio, caratterizzato da una combinazione di colori analoga e ad alto contrasto. Reattivo con supporto per la modalità oscura utilizzando Tailwind CSS.