类别

组件媒体嵌入

媒体嵌入

来自外部来源（如YouTube或Vimeo）的嵌入内容

媒体嵌入组件

一个响应式媒体嵌入组件，使用 Tailwind CSS 具有 3D 设计元素和暗主题支持。

                <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>

媒体嵌入组件

媒体嵌入组件，具有微交互、响应式效果和暗主题支持。不需要JavaScript。

打开预览

                 <div class="w-full max-w-sm mx-auto rounded-md overflow-hidden shadow-lg bg-white dark:bg-gray-800 transform transition duration-500 hover:scale-105"> <div class="relative"> <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/picsum/300/200" alt="Media thumbnail"> <div class="absolute bottom-0 right-0 bg-black text-white text-xs px-2 py-1 m-2 rounded-md"> 2:30 </div> </div> <div class="p-4"> <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Video Title</h3> <p class="text-gray-600 dark:text-gray-400 text-sm mt-1">Channel Name</p> <div class="flex items-center mt-4 text-gray-700 dark:text-gray-300"> <svg class="h-4 w-4 mr-1" fill="currentColor" viewBox="0 0 20 20"> <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-11a1 1 0 10-2 0v3.586L7.707 9.293a1 1 0 00-1.414 1.414l3 3a1 1 0 001.414 0l3-3a1 1 0 00-1.414-1.414L11 10.586V7z" clip-rule="evenodd"></path> </svg> <span class="text-xs">1.2K Views</span> </div> </div> <div class="bg-gray-100 dark:bg-gray-700 px-4 py-3 flex items-center justify-between"> <div class="flex items-center"> <img class="h-8 w-8 rounded-full object-cover mr-2" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar"> <span class="text-sm font-medium text-gray-700 dark:text-gray-300">Uploader Name</span> </div> <button class="text-gray-500 hover:text-red-500 dark:hover:text-red-400 transition duration-300"> <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20"> <path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd"></path> </svg> </button> </div> </div>

媒体嵌入组件

一个具有复古/老式美学的响应式媒体嵌入组件，支持暗主题并包含占位符图像和头像。

打开预览

                <div class="max-w-lg mx-auto bg-white rounded-lg shadow-lg overflow-hidden dark:bg-gray-800">
    <div class="relative">
        <img class="w-full h-48 object-cover" src="https://picsum.photos/600/400?random=1" alt="Retro Media">
        <div class="absolute top-0 left-0 right-0 bg-black bg-opacity-50 p-4">
            <h2 class="text-white text-xl font-bold">Retro Media Title</h2>
            <p class="text-gray-300">This is a description of the retro media.</p>
        </div>
    </div>
    <div class="p-4">
        <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Posted by</h3>
        <div class="flex items-center mt-2">
            <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
            <div class="ml-3">
                <p class="text-gray-800 dark:text-gray-200 font-semibold">John Doe</p>
                <p class="text-gray-500 dark:text-gray-400 text-sm">5 minutes ago</p>
            </div>
        </div>
    </div>
    <style>
        @media (prefers-color-scheme: dark) {
            .bg-white {background-color: #1a202c;}
            .text-gray-800 {color: #e2e8f0;}
            .text-gray-300 {color: #edf2f7;}
        }
        
        .bg-black { background-color: rgba(0, 0, 0, 0.8); }
        .rounded-lg { border-radius: 0.5rem; }
        .shadow-lg { box-shadow: 0 10px 15px rgba(0,0,0,0.2); }
        
        .text-xl { font-size: 1.25rem; }
        .text-lg { font-size: 1.125rem; }
        .text-sm { font-size: 0.875rem; }
        
        @media (max-width: 640px) {
            .h-48 { height: 12rem; }
        }
    </style>
</div>

媒体嵌入组件

一个媒体嵌入组件，具有3D设计风格，营造深度和吸引力，具有响应式效果和暗黑模式支持。

打开预览

                <div class="max-w-sm mx-auto p-5 bg-white rounded-lg shadow-lg dark:bg-gray-800 transition-transform transform hover:scale-105 shadow-lg dark:shadow-2xl">
    <div class="flex items-center mb-4">
        <img src="https://randomuser.me/api/portraits/men/45.jpg" alt="User Avatar" class="w-10 h-10 rounded-full shadow-lg" />
        <div class="ml-3">
            <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-100">John Doe</h2>
            <p class="text-gray-600 dark:text-gray-400">2 hours ago</p>
        </div>
    </div>
    <div class="mb-4">
        <iframe class="w-full h-64 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700" src="https://www.youtube.com/embed/VIDEO_ID" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    </div>
    <div>
        <p class="text-gray-700 dark:text-gray-300">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ac neque euismod, scelerisque erat a, sollicitudin odio. Integer ac venenatis elit.
        </p>
    </div>
</div>

<style>
@media (prefers-color-scheme: dark) {
    body {
        background-color: #1a202c;
    }
}
</style>

媒体嵌入组件

一个复古/怀旧的媒体嵌入组件，以80年代和90年代的怀旧设计。它具有响应式样式和使用Tailwind CSS支持的深色模式。

打开预览

                <div class="max-w-md mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
    <div class="relative">
        <img class="w-full" src="https://picsum.photos/600/400?random=1" alt="Media Thumbnail" />
        <div class="absolute top-0 left-0 right-0 bottom-0 bg-black opacity-25"></div>
        <div class="absolute top-2 right-2 bg-white dark:bg-gray-900 text-gray-800 dark:text-white rounded-full p-2 shadow flex items-center">
            <img class="rounded-full w-8 h-8 border-2 border-gray-300 dark:border-gray-600" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" />
        </div>
    </div>
    <div class="p-4">
        <h2 class="text-xl font-bold text-gray-800 dark:text-white">Vintage Media Title</h2>
        <p class="mt-2 text-gray-600 dark:text-gray-300">This is a description of the media embed component. It encompasses a retro aesthetic reminiscent of the 80s and 90s, adorned with bright colors and distinctive patterns.</p>
        <div class="mt-4 flex justify-between items-center">
            <span class="text-sm text-gray-500 dark:text-gray-400">Posted on 01 Jan 1990</span>
            <a href="#" class="bg-pink-500 text-white px-3 py-1 rounded-full hover:bg-pink-600 transition">Watch Now</a>
        </div>
    </div>
</div>
<style>
  @media (prefers-color-scheme: dark) {
    .dark\:bg-gray-800 {
      background-color: #2d3748;
    }
    .dark\:text-white {
      color: #fff;
    }
    .dark\:text-gray-300 {
      color: #e2e8f0;
    }
    .dark\:text-gray-400 {
      color: #cbd5e0;
    }
    .dark\:bg-gray-900 {
      background-color: #1a202c;
    }
    .dark\:border-gray-600 {
      border-color: #4a5568;
    }
  }
</style>

媒体嵌入组件 14

一个采用拟物化风格设计的媒体嵌入组件，具有响应式效果和深色主题支持。它包括一张图片、描述和用户头像。

打开预览

                <div class="max-w-lg mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-lg p-5 my-8">  <div class="relative">    <img src="https://picsum.photos/500/300" alt="Media Content" class="rounded-lg shadow-md"/>    <div class="absolute top-0 left-0 bg-gray-900 bg-opacity-50 text-white rounded-lg p-2">      <span>Featured Media</span>    </div>  </div>  <div class="mt-4">    <h2 class="text-lg font-bold text-gray-800 dark:text-white">Media Title</h2>    <p class="text-gray-600 dark:text-gray-400">This is a brief description of the media content displayed above.</p>  </div>  <div class="flex items-center mt-4">    <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-white dark:border-gray-800 shadow-md"/>    <div class="ml-3">      <p class="text-gray-800 dark:text-white font-semibold">John Doe</p>      <p class="text-gray-600 dark:text-gray-400 text-sm">Media Creator</p>    </div>  </div></div>