Componente de incrustación de medios
Un componente de incrustación de medios simple y receptivo con un diseño de morfismo de vidrio, combinación de colores pastel y soporte de modo oscuro, adecuado para el consumo de contenido y blogs.
Código HTML
<div class="flex items-center justify-center min-h-screen bg-gradient-to-br from-purple-100 via-pink-100 to-blue-100 dark:from-gray-900 dark:via-purple-900 dark:to-indigo-900 p-4 sm:p-6 lg:p-8">
<div class="w-full max-w-2xl bg-white/30 dark:bg-gray-800/30 backdrop-blur-md rounded-xl shadow-lg border border-white/40 dark:border-gray-700/60 overflow-hidden relative">
<div class="absolute inset-0 bg-gradient-to-br from-pink-200/50 via-purple-200/50 to-blue-200/50 dark:from-gray-700/50 dark:via-purple-700/50 dark:to-indigo-700/50 opacity-20 pointer-events-none rounded-xl"></div>
<div class="p-4 sm:p-6 lg:p-8 space-y-4 relative z-10">
<!-- Media Embed Area -->
<div class="relative w-full aspect-video rounded-lg overflow-hidden shadow-md border border-white/50 dark:border-gray-700/70">
<!-- Placeholder for actual embed, like an iframe for YouTube or Vimeo -->
<img src="https://picsum.photos/600/338?random=1" alt="Placeholder Media" class="w-full h-full object-cover">
<div class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-40 text-white text-lg font-semibold">
Video Placeholder
</div>
</div>
<!-- Content Details -->
<div class="space-y-3">
<h2 class="text-xl sm:text-2xl font-semibold text-gray-800 dark:text-gray-100">
Exploring the Serene Landscapes
</h2>
<p class="text-gray-700 dark:text-gray-300 leading-relaxed text-sm sm:text-base">
Dive into the breathtaking beauty of nature with this captivating journey through its peaceful and awe-inspiring vistas. Discover tranquility in every frame.
</p>
<div class="flex items-center space-x-3 text-gray-600 dark:text-gray-400 text-xs sm:text-sm pt-2">
<img src="https://randomuser.me/api/portraits/women/4.jpg" alt="Author Avatar" class="w-8 h-8 rounded-full object-cover border border-white/50 dark:border-gray-700/70 shadow-sm">
<span>By Jessica Lee</span>
<span class="text-gray-500 dark:text-gray-600">•</span>
<span>March 15, 2024</span>
</div>
</div>
</div>
</div>
</div>Componentes relacionados
Componente de incrustación de medios
Un componente de incrustación de medios receptivo con soporte de tema oscuro para sitios de blog/contenido, diseñado con principios de diseño de materiales, un esquema de color triádico y complejidad moderada. Incluye un marcador de posición de vídeo incrustado y enlaces a artículos relacionados.
Componente de incrustación de medios retro
Un componente de incrustación de medios receptivo con un diseño "Retro / Vintage", inspirado en la estética de los años 80 / 90 como los viejos monitores CRT y reproductores de VCR. Utiliza un esquema de color complementario de verde azulado y naranja sobre una base gris pizarra, adecuado para sitios web de "Negocios / Corporaciones". El componente presenta una complejidad moderada con efectos de desplazamiento en el botón de reproducción y la miniatura de medios, una animación de luz REC falsa y elementos de control decorativos no funcionales. Incluye soporte para temas oscuros que utilizan el prefijo 'dark:' de Tailwind. El área de medios está diseñada para una relación de aspecto de 16:9 (requiere el complemento de relación de aspecto Tailwind o un truco de fondo de relleno similar al respaldo de CSS). Se utiliza la imagen de marcador de posición de picsum.photos.
Componente de incrustación de medios
Componente de incrustación de medios con microinteracciones, efectos responsivos y compatibilidad con temas oscuros. No se necesita Javascript.