Componente de lista de deseos
Un componente de lista de deseos receptivo diseñado para el modo oscuro, adecuado para sitios web comerciales / corporativos. Cuenta con elementos interactivos y una combinación de colores complementaria, construida con Tailwind CSS.
Código 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>Componentes relacionados
Componente de lista de deseos
Componente de lista de deseos de skeuomorfismo complejo con combinación de colores complementaria, para fines de redes sociales. Responsivo, con soporte para Dark Theme.
Componente de lista de deseos
Un componente de lista de deseos complejo y receptivo para aplicaciones SaaS con efectos de neón/brillo y un esquema de color análogo, compatible con el modo oscuro.
Componente de lista de deseos
Un componente de lista de deseos complejo y receptivo con un diseño retro / vintage, combinación de colores en tono tierra y compatibilidad con modo oscuro, adecuado para un blog o sitio de contenido.