Controles del reproductor de música Glassmorphic
Un componente de control de reproductor de música glassmorphic con tonos sepia/marrón, con elementos translúcidos similares al vidrio esmerilado y efectos de desenfoque. Es responsivo, admite el modo oscuro y es adecuado para plataformas de audio y transmisión de música.
Código HTML
<div class="flex items-center justify-center min-h-screen p-4 bg-gradient-to-br from-amber-100 to-amber-300 dark:from-stone-900 dark:to-stone-700 font-sans">
<div class="w-full max-w-md p-6 rounded-3xl backdrop-filter backdrop-blur-xl bg-white/20 dark:bg-stone-800/30 border border-t-white/30 border-l-white/30 border-b-white/10 border-r-white/10 dark:border-t-stone-700/30 dark:border-l-stone-700/30 dark:border-b-stone-900/40 dark:border-r-stone-900/40 shadow-xl overflow-hidden transition-all duration-300 ease-in-out sm:p-8">
<div class="flex items-center space-x-4 mb-6">
<img src="https://picsum.photos/seed/music_album/100/100" alt="Album Art" class="w-20 h-20 rounded-xl shadow-lg ring-2 ring-white/30 dark:ring-stone-600/50 object-cover">
<div class="flex-1">
<h3 class="text-xl font-bold text-stone-900 dark:text-stone-100 mb-1 leading-tight sm:text-2xl">Lost in the Echoes</h3>
<p class="text-sm text-stone-700 dark:text-stone-300 sm:text-base">The Echoes of Light</p>
</div>
</div>
<div class="w-full bg-stone-300/50 dark:bg-stone-700/50 rounded-full h-2 mb-4 relative overflow-hidden">
<div class="bg-amber-700 dark:bg-amber-500 h-full rounded-full" style="width: 65%;"></div>
<div class="w-3 h-3 rounded-full bg-stone-900 dark:bg-stone-50 absolute top-1/2 -translate-y-1/2" style="left: 65%; transform: translateX(-50%) translateY(-50%);"></div>
</div>
<div class="flex justify-between text-xs text-stone-700 dark:text-stone-300 mb-6">
<span>2:45</span>
<span>-1:15</span>
</div>
<div class="flex items-center justify-around space-x-6 mb-6">
<button class="flex items-center justify-center w-12 h-12 rounded-full backdrop-filter backdrop-blur-sm bg-white/30 dark:bg-stone-700/50 text-stone-800 dark:text-stone-200 shadow-md transition-all duration-200 ease-in-out hover:scale-105 hover:bg-white/50 dark:hover:bg-stone-600/70 focus:outline-none focus:ring-2 focus:ring-amber-600/50 focus:ring-offset-2 focus:ring-offset-white/20 dark:focus:ring-offset-stone-800/30">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6">
<path fill-rule="evenodd" d="M20.25 12a.75.75 0 01-.75.75H6.31l5.47 5.47a.75.75 0 11-1.06 1.06l-6.75-6.75a.75.75 0 010-1.06l6.75-6.75a.75.75 0 111.06 1.06l-5.47 5.47H19.5a.75.75 0 01.75.75z" clip-rule="evenodd" />
</svg>
</button>
<button class="flex items-center justify-center w-16 h-16 rounded-full backdrop-filter backdrop-blur-md bg-amber-600/70 dark:bg-amber-700 text-white shadow-lg transition-all duration-200 ease-in-out hover:scale-105 hover:bg-amber-700/80 dark:hover:bg-amber-800 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-offset-2 focus:ring-offset-white/30 dark:focus:ring-offset-stone-800/40">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-8 h-8">
<path fill-rule="evenodd" d="M6.75 5.25a.75.75 0 01.75-.75H9a.75.75 0 01.75.75v13.5a.75.75 0 01-.75.75H7.5a.75.75 0 01-.75-.75V5.25zm7.5 0a.75.75 0 01.75-.75H16.5a.75.75 0 01.75.75v13.5a.75.75 0 01-.75.75h-1.5a.75.75 0 01-.75-.75V5.25z" clip-rule="evenodd" />
</svg>
<!-- Play icon (uncomment to show instead of pause) -->
<!-- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-8 h-8">
<path fill-rule="evenodd" d="M4.5 5.653c0-1.426 1.529-2.38 2.724-1.638L18.897 12l-11.673 7.985c-1.196.812-2.724-.136-2.724-1.638V5.653z" clip-rule="evenodd" />
</svg> -->
</button>
<button class="flex items-center justify-center w-12 h-12 rounded-full backdrop-filter backdrop-blur-sm bg-white/30 dark:bg-stone-700/50 text-stone-800 dark:text-stone-200 shadow-md transition-all duration-200 ease-in-out hover:scale-105 hover:bg-white/50 dark:hover:bg-stone-600/70 focus:outline-none focus:ring-2 focus:ring-amber-600/50 focus:ring-offset-2 focus:ring-offset-white/20 dark:focus:ring-offset-stone-800/30">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6">
<path fill-rule="evenodd" d="M3.75 12a.75.75 0 01.75-.75h13.19l-5.47-5.47a.75.75 0 011.06-1.06l6.75 6.75a.75.75 0 010 1.06l-6.75 6.75a.75.75 0 11-1.06-1.06l5.47-5.47H4.5a.75.75 0 01-.75-.75z" clip-rule="evenodd" />
</svg>
</button>
</div>
<div class="flex items-center justify-between mt-8 pt-4 border-t border-t-white/30 dark:border-t-stone-700/30">
<button class="flex items-center justify-center w-10 h-10 rounded-full backdrop-filter backdrop-blur-sm bg-white/30 dark:bg-stone-700/50 text-stone-800 dark:text-stone-200 shadow-sm transition-all text-sm hover:bg-white/50 dark:hover:bg-stone-600/70 focus:outline-none focus:ring-2 focus:ring-amber-600/50 focus:ring-offset-2 focus:ring-offset-white/20 dark:focus:ring-offset-stone-800/30">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-5 h-5">
<path d="M18 5.25a2.25 2.25 0 00-2.25-2.25H13.5V6a.75.75 0 01-.75.75H10.5a.75.75 0 01-.75-.75V3H6.75A2.25 2.25 0 004.5 5.25v9.75A2.25 2.25 0 006.75 17.25h11.25A2.25 2.25 0 0020.25 15V5.25z" />
<path fill-rule="evenodd" d="M5.841 20.352a.75.75 0 01.11.919l-1.396 2.41a.75.75 0 01-1.072.247 5.25 5.25 0 01-2.73-4.226c-.705-2.365 1.01-4.784 3.003-5.264a.75.75 0 01.378.143l1.395 2.41a.75.75 0 01-.069.813 2.998 2.998 0 00-1.029 2.012 2.998 2.998 0 002.585 2.934c.333.035.653.073.955.11z" clip-rule="evenodd" />
</svg>
</button>
<button class="flex items-center justify-center w-10 h-10 rounded-full backdrop-filter backdrop-blur-sm bg-white/30 dark:bg-stone-700/50 text-stone-800 dark:text-stone-200 shadow-sm transition-all text-sm hover:bg-white/50 dark:hover:bg-stone-600/70 focus:outline-none focus:ring-2 focus:ring-amber-600/50 focus:ring-offset-2 focus:ring-offset-white/20 dark:focus:ring-offset-stone-800/30">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-5 h-5">
<path d="M13.5 4.5a4.5 4.5 0 11-9 0 4.5 4.5 0 019 0zM12 18.75h9v-1.5h-9v1.5zM12 13.5h9v-1.5h-9v1.5zM12 8.25h9V6.75h-9v1.5z" />
<path d="M9 12a2.25 2.25 0 00-2.25 2.25V17.5L7.5 18H5.25A2.25 2.25 0 013 15.75v-1.5A2.25 2.25 0 015.25 12H9z" />
</svg>
</button>
<button class="flex items-center justify-center w-10 h-10 rounded-full backdrop-filter backdrop-blur-sm bg-white/30 dark:bg-stone-700/50 text-stone-800 dark:text-stone-200 shadow-sm transition-all text-sm hover:bg-white/50 dark:hover:bg-stone-600/70 focus:outline-none focus:ring-2 focus:ring-amber-600/50 focus:ring-offset-2 focus:ring-offset-white/20 dark:focus:ring-offset-stone-800/30">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-5 h-5">
<path fill-rule="evenodd" d="M9.401 3.003L9.401 3.003c.88-1.523 2.65-1.926 4.172-1.045l1.474.851a9.966 9.966 0 013.255.474c1.196.356 2.052 1.517 1.906 2.709a1.597 1.597 0 00.26 1.056c.408.54.912 1.037 1.463 1.49l1.4.966c1.1.758 1.45 2.201.838 3.419C20.334 16.146 17.518 19 12 19c-3.149 0-5.91-.904-8.082-2.397-1.121-.795-1.874-2.234-1.637-3.666 4.792-.783 7.039-4.717 7.039-4.717z" clip-rule="evenodd" />
<path d="M11.94 9.141a.75.75 0 10-1.39-.72l.432.842 1.39-.72-.432-.843z" />
</svg>
</button>
<button class="flex items-center justify-center w-10 h-10 rounded-full backdrop-filter backdrop-blur-sm bg-white/30 dark:bg-stone-700/50 text-stone-800 dark:text-stone-200 shadow-sm transition-all text-sm hover:bg-white/50 dark:hover:bg-stone-600/70 focus:outline-none focus:ring-2 focus:ring-amber-600/50 focus:ring-offset-2 focus:ring-offset-white/20 dark:focus:ring-offset-stone-800/30">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-5 h-5">
<path d="M19.006 3.705a.75.75 0 00-.512-1.113L4.625 1.25A4.5 4.5 0 002.25 5.5V16.5a3 3 0 003 3h.75v3.375c0 .621.504 1.125 1.125 1.125h2.25a.75.75 0 00.75-.75v-3.75H12a.75.75 0 00.75-.75V14.25h.375c2.213 0 4.309-.655 6.004-1.764a.75.75 0 00.186-.135l3.42-3.037a.75.75 0 00.112-.868V4.5a.75.75 0 00-.91-.795zM16.793 9.782l-3.674 3.261a1.5 1.5 0 01-.587.232l-.23.03A.75.75 0 0012 13.5H9.75V5.5c0-.103.003-.205.009-.306C9.916 4.965 10.12 4.5 10.5 4.5h3C4.625 1.25 15.375 1.25 18.04 2.802a.75.75 0 00.41-.013c.962-.438 2.407-.942 3.605-1.124A.75.75 0 0022.5 1.5h.023a.75.75 0 00.046-1.498 7.502 7.502 0 00-6.191 1.026v1.312c0 2.226-1.501 4.25-3.765 4.25h-.548A9.75 9.75 0 014.5 8.25V5.5c0-.853.64-1.564 1.47-.788l11.751 2.35L19.006 3.705z" />
</svg>
</button>
</div>
</div>
</div>Componentes relacionados
Microinteractions_Triadic_Dashboard_Component
Un componente de panel de control receptivo con esquema de color triádico, que incorpora microinteracciones para la participación del usuario. Cuenta con elementos y controles de visualización de datos, con soporte completo para el modo oscuro.
Componentes funcionales Componente
Un componente de tablero con componentes funcionales que utilizan los principios de Material Design, un esquema de color análogo y una complejidad moderada. El componente incluye diseño responsivo y soporte de temas oscuros usando Tailwind CSS. No se incluye JavaScript.
Componentes funcionales Componente
Un componente de tablero complejo y receptivo con una estética monoespaciada/de desarrollador, que utiliza neutros fríos. Cuenta con elementos de visualización de datos, secciones tipo terminal y compatibilidad con el modo oscuro.