Componente de lista de deseos
Un componente de lista de deseos receptivo diseñado con una estética retro/vintage, con una combinación de colores triádica y compatibilidad con el modo oscuro, ideal para exhibir trabajos o productos.
Código HTML
<div class="bg-gray-900 dark:bg-gray-800 text-gray-100 dark:text-gray-200 p-6 rounded-lg max-w-md mx-auto shadow-lg">
<h2 class="text-3xl font-bold text-center mb-4">My Wishlist</h2>
<div class="space-y-4">
<div class="flex items-center justify-between bg-gray-700 dark:bg-gray-600 p-4 rounded-lg">
<img src="https://picsum.photos/100" alt="Product" class="w-16 h-16 rounded-lg">
<div class="flex-1 ml-4">
<h3 class="text-xl font-semibold">Product Title 1</h3>
<p class="text-gray-300 dark:text-gray-400">Description of the product goes here.</p>
</div>
<button class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded">Add to Cart</button>
</div>
<div class="flex items-center justify-between bg-gray-700 dark:bg-gray-600 p-4 rounded-lg">
<img src="https://picsum.photos/100?random=1" alt="Product" class="w-16 h-16 rounded-lg">
<div class="flex-1 ml-4">
<h3 class="text-xl font-semibold">Product Title 2</h3>
<p class="text-gray-300 dark:text-gray-400">Description of the product goes here.</p>
</div>
<button class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded">Add to Cart</button>
</div>
<div class="flex items-center justify-between bg-gray-700 dark:bg-gray-600 p-4 rounded-lg">
<img src="https://picsum.photos/100?random=2" alt="Product" class="w-16 h-16 rounded-lg">
<div class="flex-1 ml-4">
<h3 class="text-xl font-semibold">Product Title 3</h3>
<p class="text-gray-300 dark:text-gray-400">Description of the product goes here.</p>
</div>
<button class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded">Add to Cart</button>
</div>
</div>
<div class="mt-6 text-center">
<h4 class="text-2xl font-bold">User: John Doe</h4>
<img src="https://randomuser.me/api/portraits/men/10.jpg" alt="User Avatar" class="w-24 h-24 rounded-full mx-auto mt-2">
</div>
</div>Componentes relacionados
Componente de lista de deseos
Un componente simple de lista de deseos de comercio electrónico con microinteracciones y un esquema de color en escala de grises, optimizado para un diseño receptivo y compatibilidad con el modo oscuro.
Lista de deseos Componente Inmobiliario
Un componente de lista de deseos sensible y de alto contraste para propiedades inmobiliarias, inspirado en los principios de Material Design, con soporte para modo oscuro.
Componente de lista de deseos
Un componente minimalista de la lista de deseos con imágenes de marcador de posición y un tema oscuro.