Componente de lista de deseos
Componente de lista de deseos responsivo con soporte para modo oscuro usando Tailwind CSS. Mostrar una lista de artículos con imágenes, títulos, precios y botones de eliminación. Diseñado para un salpicadero con colores vibrantes.
Código 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>Componentes relacionados
Componente de lista de deseos
Un componente de lista de deseos simple y receptivo para sitios web comerciales / corporativos con microinteracciones. Cuenta con un esquema de color análogo (azul-verde-verde azulado), soporte de tema oscuro y sutiles animaciones de desplazamiento. El componente muestra los elementos de la lista de deseos con imágenes de productos, nombres, precios y botones de acción.
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.
Componente de lista de deseos
Un componente responsivo de la lista de deseos con una estética de diseño retro/vintage, que utiliza una combinación de colores monocromática para fines de comercio electrónico.