カテゴリ

コンポーネントメディアの埋め込み

メディアの埋め込み

YouTubeやVimeoなどの外部ソースからの埋め込みコンテンツ

メディア埋め込みコンポーネント

3D デザイン要素と Tailwind CSS を使用したダークテーマのサポートを備えたレスポンシブメディア埋め込みコンポーネント。

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