Componente de incrustación de medios
Un componente de incrustación de medios responsivo con elementos de diseño 3D y soporte de temas oscuros mediante Tailwind CSS.
Código HTML
<div class="relative isolate overflow-hidden bg-gradient-to-br from-gray-900 to-black py-16 sm:py-24 lg:py-32">
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<div class="mx-auto max-w-2xl lg:mx-0">
<h2 class="text-4xl font-bold tracking-tight text-white sm:text-6xl">Interactive Media</h2>
<p class="mt-6 text-lg leading-8 text-gray-300">Experience media in a new dimension with our captivating 3D design.</p>
</div>
<div class="mx-auto mt-10 grid max-w-2xl grid-cols-1 gap-x-8 gap-y-14 lg:mx-0 lg:max-w-none lg:grid-cols-3">
<article class="relative isolate flex flex-col justify-end overflow-hidden rounded-2xl bg-gray-800 px-8 pb-8 pt-80 sm:pt-48 lg:pt-80 transform transition-transform duration-500 ease-in-out hover:scale-105 hover:shadow-2xl">
<img src="https://picsum.photos/seed/media1/500/300" alt="Placeholder image for media content 1" class="absolute inset-0 -z-10 h-full w-full object-cover">
<div class="absolute inset-0 -z-10 bg-gradient-to-t from-gray-900 via-gray-900/40"></div>
<div class="absolute inset-0 -z-10 rounded-2xl ring-1 ring-inset ring-gray-900/10"></div>
<div class="flex flex-wrap items-center gap-y-1 overflow-hidden text-sm leading-6 text-gray-300">
<time datetime="2023-01-23" class="-m-1.5">
<div class="flex items-center gap-x-4">
<img class="h-10 w-10 rounded-full bg-gray-50" src="https://randomuser.me/api/portraits/men/1.jpg" alt="">
<div class="text-sm leading-6">
<p class="font-semibold text-gray-300">
<a href="#">
<span class="absolute inset-0"></span>
John Doe
</a>
</p>
<p class="text-gray-400">Co-Founder / CTO</p>
</div>
</div>
</time>
</div>
<h3 class="mt-3 text-lg font-semibold leading-6 text-white">
<a href="#">
<span class="absolute inset-0"></span>
Exploring the Depths
</a>
</h3>
</article>
<article class="relative isolate flex flex-col justify-end overflow-hidden rounded-2xl bg-gray-800 px-8 pb-8 pt-80 sm:pt-48 lg:pt-80 transform transition-transform duration-500 ease-in-out hover:scale-105 hover:shadow-2xl">
<img src="https://picsum.photos/seed/media2/500/300" alt="Placeholder image for media content 2" class="absolute inset-0 -z-10 h-full w-full object-cover">
<div class="absolute inset-0 -z-10 bg-gradient-to-t from-gray-900 via-gray-900/40"></div>
<div class="absolute inset-0 -z-10 rounded-2xl ring-1 ring-inset ring-gray-900/10"></div>
<div class="flex flex-wrap items-center gap-y-1 overflow-hidden text-sm leading-6 text-gray-300">
<time datetime="2023-01-23" class="-m-1.5">
<div class="flex items-center gap-x-4">
<img class="h-10 w-10 rounded-full bg-gray-50" src="https://randomuser.me/api/portraits/women/1.jpg" alt="">
<div class="text-sm leading-6">
<p class="font-semibold text-gray-300">
<a href="#">
<span class="absolute inset-0"></span>
Jane Smith
</a>
</p>
<p class="text-gray-400">Lead Designer</p>
</div>
</div>
</time>
</div>
<h3 class="mt-3 text-lg font-semibold leading-6 text-white">
<a href="#">
<span class="absolute inset-0"></span>
The Future of Interaction
</a>
</h3>
</article>
<article class="relative isolate flex flex-col justify-end overflow-hidden rounded-2xl bg-gray-800 px-8 pb-8 pt-80 sm:pt-48 lg:pt-80 transform transition-transform duration-500 ease-in-out hover:scale-105 hover:shadow-2xl">
<img src="https://picsum.photos/seed/media3/500/300" alt="Placeholder image for media content 3" class="absolute inset-0 -z-10 h-full w-full object-cover">
<div class="absolute inset-0 -z-10 bg-gradient-to-t from-gray-900 via-gray-900/40"></div>
<div class="absolute inset-0 -z-10 rounded-2xl ring-1 ring-inset ring-gray-900/10"></div>
<div class="flex flex-wrap items-center gap-y-1 overflow-hidden text-sm leading-6 text-gray-300">
<time datetime="2023-01-23" class="-m-1.5">
<div class="flex items-center gap-x-4">
<img class="h-10 w-10 rounded-full bg-gray-50" src="https://randomuser.me/api/portraits/men/2.jpg" alt="">
<div class="text-sm leading-6">
<p class="font-semibold text-gray-300">
<a href="#">
<span class="absolute inset-0"></span>
Peter Jones
</a>
</p>
<p class="text-gray-400">Marketing Manager</p>
</div>
</div>
</time>
</div>
<h3 class="mt-3 text-lg font-semibold leading-6 text-white">
<a href="#">
<span class="absolute inset-0"></span>
Bringing Ideas to Life
</a>
</h3>
</article>
</div>
</div>
</div>Componentes relacionados
Componente de incrustación de medios
Un componente responsivo de Media Embed con un estilo esqueuomórfico, utilizando colores en tono tierra y adecuado para el comercio electrónico, con soporte para temas oscuros.
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.
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.