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.
Código HTML
<div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
<div class="bg-white dark:bg-gray-800 backdrop-blur-md bg-opacity-30 rounded-lg shadow-lg p-6 w-11/12 max-w-md">
<h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 text-center mb-4">My Wishlist</h2>
<ul class="space-y-4">
<li class="flex items-center justify-between p-4 rounded-lg bg-white dark:bg-gray-700 shadow-md">
<img src="https://picsum.photos/50/50" alt="Item Image" class="rounded-full" />
<div class="flex-grow mx-4">
<h3 class="font-semibold text-gray-800 dark:text-gray-200">Item Title</h3>
<p class="text-gray-600 dark:text-gray-400">Description of the item goes here.</p>
</div>
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Add to Cart</button>
</li>
<li class="flex items-center justify-between p-4 rounded-lg bg-white dark:bg-gray-700 shadow-md">
<img src="https://picsum.photos/50/50" alt="Item Image" class="rounded-full" />
<div class="flex-grow mx-4">
<h3 class="font-semibold text-gray-800 dark:text-gray-200">Item Title</h3>
<p class="text-gray-600 dark:text-gray-400">Description of the item goes here.</p>
</div>
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Add to Cart</button>
</li>
<li class="flex items-center justify-between p-4 rounded-lg bg-white dark:bg-gray-700 shadow-md">
<img src="https://picsum.photos/50/50" alt="Item Image" class="rounded-full" />
<div class="flex-grow mx-4">
<h3 class="font-semibold text-gray-800 dark:text-gray-200">Item Title</h3>
<p class="text-gray-600 dark:text-gray-400">Description of the item goes here.</p>
</div>
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Add to Cart</button>
</li>
</ul>
</div>
</div>Componentes relacionados
Componente de lista de deseos - Material Design
Un componente de lista de deseos inspirado en Material Design con diseño responsivo y soporte para temas oscuros.
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 de lista de deseos de estilo 3D para interfaces de redes sociales, con elementos interactivos y compatibilidad con el modo oscuro.