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 skeuomórficos
Un componente de incrustación de medios receptivo con diseño de skeuomorfismo, combinación de colores análoga y complejidad moderada para sitios web comerciales. Incluye soporte para el modo oscuro usando Tailwind CSS.
Componente de incrustación de medios
Un componente de incrustación de medios receptivo con diseño de Glassmorphism, colores en tonos tierra y compatibilidad con modo oscuro, creado con Tailwind CSS para casos de uso en redes sociales. Incluye un efecto de vidrio esmerilado y utiliza imágenes/avatares de marcador de posición.
Comercio Brutalist_Retro_Media_Embed_E
Un componente de incrustación de medios complejo, receptivo y de estilo brutalista para el comercio electrónico, con alto contraste, una paleta de colores retro, compatibilidad con el modo oscuro y múltiples elementos interactivos para exhibiciones de productos.