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.
Código HTML
<div class="max-w-md mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
<div class="bg-gray-100 dark:bg-gray-700 px-6 py-4">
<h2 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-2">My Wishlist</h2>
<p class="text-gray-600 dark:text-gray-400">Items I'd love to get someday!</p>
</div>
<div class="divide-y divide-gray-300 dark:divide-gray-600">
<!-- Item 1 -->
<div class="flex items-center justify-between p-4">
<img src="https://picsum.photos/100/100" alt="Item 1" class="rounded-full">
<div class="ml-4">
<h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Vintage Camera</h3>
<span class="text-gray-500 dark:text-gray-400">Price: $120</span>
</div>
<button class="ml-auto bg-gray-300 dark:bg-gray-700 hover:bg-gray-400 dark:hover:bg-gray-600 text-gray-900 dark:text-gray-100 font-bold py-2 px-4 rounded">
Add to Cart
</button>
</div>
<!-- Item 2 -->
<div class="flex items-center justify-between p-4">
<img src="https://picsum.photos/100/100" alt="Item 2" class="rounded-full">
<div class="ml-4">
<h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Retro Turntable</h3>
<span class="text-gray-500 dark:text-gray-400">Price: $250</span>
</div>
<button class="ml-auto bg-gray-300 dark:bg-gray-700 hover:bg-gray-400 dark:hover:bg-gray-600 text-gray-900 dark:text-gray-100 font-bold py-2 px-4 rounded">
Add to Cart
</button>
</div>
<!-- Item 3 -->
<div class="flex items-center justify-between p-4">
<img src="https://picsum.photos/100/100" alt="Item 3" class="rounded-full">
<div class="ml-4">
<h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Classic Sneakers</h3>
<span class="text-gray-500 dark:text-gray-400">Price: $80</span>
</div>
<button class="ml-auto bg-gray-300 dark:bg-gray-700 hover:bg-gray-400 dark:hover:bg-gray-600 text-gray-900 dark:text-gray-100 font-bold py-2 px-4 rounded">
Add to Cart
</button>
</div>
</div>
<div class="px-6 py-4">
<h4 class="text-lg font-semibold text-gray-900 dark:text-gray-100">Account Information</h4>
<div class="mt-2 flex items-center">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="rounded-full h-10 w-10">
<div class="ml-2">
<p class="text-gray-900 dark:text-gray-100">John Doe</p>
<p class="text-gray-600 dark:text-gray-400">[email protected]</p>
</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 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.
Componente de lista de deseos
Un componente de lista de deseos responsivo diseñado con elementos skeuomórficos y colores complementarios para un panel de control de tema oscuro.