Componente de la lista de deseos de la Bauhaus
Un componente de lista de deseos simple y receptivo para productos de moda / belleza diseñado con los principios de Bauhaus, con colores neutros fríos y soporte para modo oscuro.
Código HTML
<div class="p-4 sm:p-6 lg:p-8 bg-gray-100 dark:bg-gray-900 min-h-screen font-sans">
<div class="max-w-7xl mx-auto">
<h2 class="text-2xl sm:text-3xl font-bold text-gray-800 dark:text-gray-100 mb-6 sm:mb-8 text-center uppercase tracking-wider">
My Wishlist
</h2>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 sm:gap-8">
<!-- Wishlist Item 1 -->
<div class="relative bg-white dark:bg-gray-800 rounded-sm shadow-md overflow-hidden transform hover:scale-105 transition-transform duration-300 ease-in-out border border-gray-200 dark:border-gray-700">
<button class="absolute top-3 right-3 text-red-500 dark:text-red-400 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-50 transition-colors duration-200" aria-label="Remove item from wishlist">
<svg xmlns="http://www.w3.org/2000/svg" class="h-7 w-7 fill-current" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
<a href="#" class="block">
<img src="https://picsum.photos/400/300?random=1" alt="Product Image" class="w-full h-48 object-cover object-center border-b border-gray-200 dark:border-gray-700">
<div class="p-4 text-center">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-100 mb-1 line-clamp-1">Minimalist Blue Dress</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm mb-3">Fashion Apparel</p>
<p class="text-xl font-bold text-gray-900 dark:text-gray-50">$89.00</p>
</div>
</a>
</div>
<!-- Wishlist Item 2 -->
<div class="relative bg-white dark:bg-gray-800 rounded-sm shadow-md overflow-hidden transform hover:scale-105 transition-transform duration-300 ease-in-out border border-gray-200 dark:border-gray-700">
<button class="absolute top-3 right-3 text-red-500 dark:text-red-400 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-50 transition-colors duration-200" aria-label="Remove item from wishlist">
<svg xmlns="http://www.w3.org/2000/svg" class="h-7 w-7 fill-current" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
<a href="#" class="block">
<img src="https://picsum.photos/400/300?random=2" alt="Product Image" class="w-full h-48 object-cover object-center border-b border-gray-200 dark:border-gray-700">
<div class="p-4 text-center">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-100 mb-1 line-clamp-1">Geometric Earrings</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm mb-3">Jewelry</p>
<p class="text-xl font-bold text-gray-900 dark:text-gray-50">$35.00</p>
</div>
</a>
</div>
<!-- Wishlist Item 3 -->
<div class="relative bg-white dark:bg-gray-800 rounded-sm shadow-md overflow-hidden transform hover:scale-105 transition-transform duration-300 ease-in-out border border-gray-200 dark:border-gray-700">
<button class="absolute top-3 right-3 text-red-500 dark:text-red-400 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-50 transition-colors duration-200" aria-label="Remove item from wishlist">
<svg xmlns="http://www.w3.org/2000/svg" class="h-7 w-7 fill-current" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
<a href="#" class="block">
<img src="https://picsum.photos/400/300?random=3" alt="Product Image" class="w-full h-48 object-cover object-center border-b border-gray-200 dark:border-gray-700">
<div class="p-4 text-center">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-100 mb-1 line-clamp-1">Bauhaus Inspired Skirt</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm mb-3">Fashion Apparel</p>
<p class="text-xl font-bold text-gray-900 dark:text-gray-50">$75.00</p>
</div>
</a>
</div>
<!-- Wishlist Item 4 -->
<div class="relative bg-white dark:bg-gray-800 rounded-sm shadow-md overflow-hidden transform hover:scale-105 transition-transform duration-300 ease-in-out border border-gray-200 dark:border-gray-700">
<button class="absolute top-3 right-3 text-red-500 dark:text-red-400 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-50 transition-colors duration-200" aria-label="Remove item from wishlist">
<svg xmlns="http://www.w3.org/2000/svg" class="h-7 w-7 fill-current" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
<a href="#" class="block">
<img src="https://picsum.photos/400/300?random=4" alt="Product Image" class="w-full h-48 object-cover object-center border-b border-gray-200 dark:border-gray-700">
<div class="p-4 text-center">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-100 mb-1 line-clamp-1">Abstract Print Scarf</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm mb-3">Accessories</p>
<p class="text-xl font-bold text-gray-900 dark:text-gray-50">$29.00</p>
</div>
</a>
</div>
</div>
<!-- Empty State / Call to Action -->
<div class="mt-12 text-center">
<p class="text-gray-600 dark:text-gray-400 text-lg mb-4">Ready to add more beauty to your life? Explore our collections!</p>
<a href="#" class="inline-block px-8 py-3 bg-gray-800 hover:bg-gray-900 dark:bg-gray-100 dark:hover:bg-gray-200 text-white dark:text-gray-900 font-bold uppercase tracking-wide text-sm rounded-sm transition-colors duration-300 ease-in-out shadow-lg">
Shop Now
</a>
</div>
</div>
</div>Componentes relacionados
Componente de lista de deseos
Un componente de lista de deseos de estilo brutalista para sitios web comerciales, con un esquema de color en escala de grises y una complejidad moderada. Diseño responsivo con soporte para modo oscuro usando clases CSS de Tailwind.
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.
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.