Componente de lista de deseos
Un componente de lista de deseos con estilo de diseño 3D, combinación de colores pastel y diseño receptivo para sitios web comerciales, compatible con el modo oscuro.
Código HTML
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg max-w-md mx-auto p-6">
<h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-100">My Wishlist</h2>
<ul class="divide-y divide-gray-200 dark:divide-gray-700">
<li class="py-4 flex items-center space-x-4 hover:bg-gray-100 dark:hover:bg-gray-700 transition duration-200">
<img class="w-16 h-16 rounded-lg shadow-md" src="https://picsum.photos/seed/wishlist1/100/100" alt="Wishlist Item 1" />
<div>
<h3 class="text-lg font-medium text-gray-800 dark:text-gray-100">Item 1</h3>
<p class="text-gray-500 dark:text-gray-400">Description of Item 1</p>
<span class="text-purple-600 dark:text-purple-400">$29.99</span>
</div>
</li>
<li class="py-4 flex items-center space-x-4 hover:bg-gray-100 dark:hover:bg-gray-700 transition duration-200">
<img class="w-16 h-16 rounded-lg shadow-md" src="https://picsum.photos/seed/wishlist2/100/100" alt="Wishlist Item 2" />
<div>
<h3 class="text-lg font-medium text-gray-800 dark:text-gray-100">Item 2</h3>
<p class="text-gray-500 dark:text-gray-400">Description of Item 2</p>
<span class="text-purple-600 dark:text-purple-400">$39.99</span>
</div>
</li>
<li class="py-4 flex items-center space-x-4 hover:bg-gray-100 dark:hover:bg-gray-700 transition duration-200">
<img class="w-16 h-16 rounded-lg shadow-md" src="https://picsum.photos/seed/wishlist3/100/100" alt="Wishlist Item 3" />
<div>
<h3 class="text-lg font-medium text-gray-800 dark:text-gray-100">Item 3</h3>
<p class="text-gray-500 dark:text-gray-400">Description of Item 3</p>
<span class="text-purple-600 dark:text-purple-400">$49.99</span>
</div>
</li>
</ul>
<div class="mt-4 flex justify-between items-center">
<span class="text-gray-700 dark:text-gray-300">Total:</span>
<span class="text-purple-600 dark:text-purple-400 font-bold">$119.97</span>
</div>
<button class="mt-4 w-full bg-purple-500 dark:bg-purple-600 text-white font-semibold py-2 rounded hover:bg-purple-600 dark:hover:bg-purple-700 transition duration-200">Checkout</button>
</div>Componentes relacionados
Componente de lista de deseos
Un componente de lista de deseos responsivo diseñado en modo oscuro usando Tailwind CSS. Cuenta con un diseño de tarjeta para elementos con imágenes, descripciones y avatares de usuario, que admite temas oscuros y efectos responsivos.
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 responsivo con estilo de diseño Glassmorphism usando Tailwind CSS, compatible con el modo oscuro con efectos similares al vidrio esmerilado e imágenes de marcador de posición aleatorias.