Componente de lista de deseos de Glassmorphism
Un componente de lista de deseos simple y receptivo de estilo glassmorphism para plataformas de música/audio, con elementos translúcidos similares al vidrio esmerilado con efectos de desenfoque y un esquema de color azul corporativo, con soporte para modo oscuro.
Código HTML
<div class="flex items-center justify-center min-h-screen p-4 bg-gray-100 dark:bg-gray-900 transition-colors duration-300">
<div class="max-w-md w-full mx-auto p-6 md:p-8 rounded-xl shadow-2xl backdrop-blur-md bg-white/30 dark:bg-blue-900/30 border border-white/40 dark:border-blue-700/40 transform scale-100 transition-all duration-300 hover:scale-[1.01]">
<h2 class="text-2xl md:text-3xl font-extrabold text-blue-900 dark:text-blue-100 mb-6 text-center tracking-tight drop-shadow-sm">Your Wishlist</h2>
<div class="space-y-4">
<!-- Item 1 -->
<div class="flex items-center p-3 rounded-lg bg-white/40 dark:bg-blue-800/40 backdrop-blur-sm border border-white/50 dark:border-blue-700/50 shadow-md transform hover:scale-[1.02] transition-transform duration-200">
<img src="https://picsum.photos/id/1043/80/80" alt="Album Cover" class="w-16 h-16 md:w-20 md:h-20 rounded-lg object-cover shadow-sm flex-shrink-0">
<div class="ml-4 flex-grow">
<p class="text-lg font-semibold text-blue-800 dark:text-blue-100 line-clamp-1">Ocean Dreams</p>
<p class="text-sm text-blue-700 dark:text-blue-200 mt-0.5 line-clamp-1">Artist Name Here</p>
</div>
<button class="ml-4 p-2 rounded-full text-blue-600 dark:text-blue-200 hover:bg-blue-200/50 dark:hover:bg-blue-700/50 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-75 transition-colors duration-200">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
<!-- Item 2 -->
<div class="flex items-center p-3 rounded-lg bg-white/40 dark:bg-blue-800/40 backdrop-blur-sm border border-white/50 dark:border-blue-700/50 shadow-md transform hover:scale-[1.02] transition-transform duration-200">
<img src="https://picsum.photos/id/10/80/80" alt="Album Cover" class="w-16 h-16 md:w-20 md:h-20 rounded-lg object-cover shadow-sm flex-shrink-0">
<div class="ml-4 flex-grow">
<p class="text-lg font-semibold text-blue-800 dark:text-blue-100 line-clamp-1">City Lights</p>
<p class="text-sm text-blue-700 dark:text-blue-200 mt-0.5 line-clamp-1">Another Band Project</p>
</div>
<button class="ml-4 p-2 rounded-full text-blue-600 dark:text-blue-200 hover:bg-blue-200/50 dark:hover:bg-blue-700/50 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-75 transition-colors duration-200">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
<!-- Item 3 -->
<div class="flex items-center p-3 rounded-lg bg-white/40 dark:bg-blue-800/40 backdrop-blur-sm border border-white/50 dark:border-blue-700/50 shadow-md transform hover:scale-[1.02] transition-transform duration-200">
<img src="https://picsum.photos/id/1018/80/80" alt="Album Cover" class="w-16 h-16 md:w-20 md:h-20 rounded-lg object-cover shadow-sm flex-shrink-0">
<div class="ml-4 flex-grow">
<p class="text-lg font-semibold text-blue-800 dark:text-blue-100 line-clamp-1">Whispering Woods</p>
<p class="text-sm text-blue-700 dark:text-blue-200 mt-0.5 line-clamp-1">The Soloist</p>
</div>
<button class="ml-4 p-2 rounded-full text-blue-600 dark:text-blue-200 hover:bg-blue-200/50 dark:hover:bg-blue-700/50 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-75 transition-colors duration-200">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
</div>
<p class="text-center text-sm text-blue-800 dark:text-blue-200 mt-8 opacity-70">Saved your favorite tracks.</p>
</div>
</div>Componentes relacionados
Componente de lista de deseos
Un componente de lista de deseos receptivo para consultoría/servicios, con principios de diseño de materiales, un esquema de color neón/eléctrico y compatibilidad con el modo oscuro. Muestra servicios con imágenes, títulos, descripciones y un botón 'Solicitar cotización', junto con un botón 'Eliminar' para artículos.
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 la lista de deseos de Glassmorphism - Agricultura/Ganadería
Un componente de lista de deseos receptivo con un estilo de diseño de glassmorphism, combinación de colores pastel y adaptado para sitios web de agricultura / ganadería. Cuenta con elementos translúcidos similares al vidrio esmerilado con efectos de desenfoque, HTML semántico y compatibilidad total con el modo oscuro.