Componente de medios Glassmorphic
Un componente de tarjeta multimedia responsivo con un diseño de morfismo de vidrio (efecto de vidrio esmerilado) construido con Tailwind CSS. Cuenta con un marcador de posición de imagen (de picsum.photos) con un icono de reproducción de revelación flotante, contenido de texto, una sección de autor con un avatar (de randomuser.me) y botones de acción. El componente es compatible con el modo oscuro utilizando las variantes 'dark:' de Tailwind CSS y responde a varios tamaños de pantalla. No se requiere JavaScript. Para obtener un efecto visual óptimo, coloque este componente sobre un fondo contrastante. La funcionalidad del modo oscuro supone una configuración CSS adecuada de Tailwind (por ejemplo, 'darkMode: "class"' en su tailwind.config.js).
Código HTML
<div class="w-full max-w-md md:max-w-lg lg:max-w-xl overflow-hidden rounded-2xl shadow-2xl bg-white/30 dark:bg-slate-800/30 backdrop-blur-xl border border-white/20 dark:border-slate-700/20 font-sans">
<!-- Image -->
<div class="relative">
<img class="w-full h-56 sm:h-64 object-cover" src="https://picsum.photos/seed/mediacomp/800/600" alt="Media placeholder image">
<div class="absolute inset-0 bg-black/20 flex items-center justify-center opacity-0 hover:opacity-100 transition-opacity duration-300 cursor-pointer">
<svg class="w-16 h-16 text-white/80" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd"></path></svg>
</div>
</div>
<!-- Content Area -->
<div class="p-5 sm:p-6">
<h2 class="text-2xl sm:text-3xl font-bold text-slate-800 dark:text-white mb-2">
Glassmorphic Media Showcase
</h2>
<p class="text-slate-600 dark:text-slate-300 text-sm sm:text-base leading-relaxed mb-4">
Discover the elegance of glassmorphism. This component blends translucent effects with content, offering a modern UI experience that is both responsive and dark-mode ready.
</p>
<!-- Author/Meta Info -->
<div class="flex items-center space-x-3 mt-4">
<img class="w-10 h-10 sm:w-12 sm:h-12 rounded-full border-2 border-white/50 dark:border-slate-700/50 shadow-md" src="https://randomuser.me/api/portraits/women/34.jpg" alt="Author Avatar">
<div>
<p class="text-sm sm:text-base font-semibold text-slate-700 dark:text-slate-200">Alexia Glass</p>
<p class="text-xs sm:text-sm text-slate-500 dark:text-slate-400">Content Creator | 3 hours ago</p>
</div>
</div>
<!-- Action Buttons -->
<div class="mt-6 flex flex-col sm:flex-row sm:space-x-3 space-y-3 sm:space-y-0">
<button class="w-full sm:flex-1 px-4 py-2.5 rounded-lg text-sm font-medium
bg-indigo-600 hover:bg-indigo-700 text-white
dark:bg-indigo-500 dark:hover:bg-indigo-600
focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:ring-offset-white/30 dark:focus:ring-offset-slate-800/30
transition-all duration-200">
View Details
</button>
<button class="w-full sm:flex-1 px-4 py-2.5 rounded-lg text-sm font-medium
bg-white/50 hover:bg-white/70 text-slate-700
dark:bg-slate-700/50 dark:hover:bg-slate-700/70 dark:text-slate-200
border border-white/60 dark:border-slate-600/60
focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:ring-offset-white/30 dark:focus:ring-offset-slate-800/30
transition-all duration-200">
Bookmark
</button>
</div>
</div>
</div>Componentes relacionados
Bauhaus_E-commerce_Media_Component
Un componente multimedia de comercio electrónico responsivo y funcional con un diseño monocromático inspirado en la Bauhaus, soporte de modo oscuro, formas geométricas que enfatizan y una jerarquía visual clara para la presentación del producto.
Skeuomorphic_Grayscale_Media_Component
Un componente multimedia complejo y receptivo diseñado en un estilo de escala de grises esqueuomórfico para sitios web comerciales/corporativos, con múltiples elementos interactivos y compatibilidad con el modo oscuro.
Componente de componentes de medios
Un componente multimedia complejo y receptivo diseñado para interfaces financieras/bancarias, con un esquema de color Océano/Azul y compatibilidad nativa con el modo oscuro.