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>