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.
Código HTML
<div class="max-w-md mx-auto my-10 p-5 bg-white dark:bg-gray-800 rounded-lg shadow-lg transition-all duration-300 ease-in-out transform hover:scale-105">
<h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-4">Wishlist</h2>
<ul class="space-y-4">
<li class="border border-gray-300 dark:border-gray-700 rounded-lg p-4 flex items-center justify-between transition-shadow duration-300 ease-in-out hover:shadow-lg">
<img src="https://picsum.photos/100/100" alt="Product Image" class="w-20 h-20 object-cover rounded bg-gray-200" />
<div class="flex-1 mx-4">
<h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Product Name</h3>
<p class="text-gray-500 dark:text-gray-400">$19.99</p>
</div>
<button class="text-red-600 dark:text-red-400 hover:underline focus:outline-none">Remove</button>
</li>
<li class="border border-gray-300 dark:border-gray-700 rounded-lg p-4 flex items-center justify-between transition-shadow duration-300 ease-in-out hover:shadow-lg">
<img src="https://picsum.photos/100/101" alt="Product Image" class="w-20 h-20 object-cover rounded bg-gray-200" />
<div class="flex-1 mx-4">
<h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Another Product</h3>
<p class="text-gray-500 dark:text-gray-400">$29.99</p>
</div>
<button class="text-red-600 dark:text-red-400 hover:underline focus:outline-none">Remove</button>
</li>
</ul>
<button class="mt-6 w-full bg-gray-800 dark:bg-gray-200 text-white dark:text-gray-800 font-bold py-2 px-4 rounded hover:bg-gray-900 dark:hover:bg-gray-300 transition duration-300">Move to Cart</button>
</div>Componentes relacionados
Componente de lista de deseos
Componente de lista de deseos de modo oscuro con diseño monocromático simple para tablero
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 al estilo Neumorphism para redes sociales, con una combinación de colores complementaria. Incluye un diseño responsivo que utiliza Tailwind CSS con soporte para modo oscuro. Solo se utilizan las clases HTML y Tailwind, sin JavaScript. Las imágenes provienen de picsum.photos y los avatares de randomuser.me.