メディアの埋め込み

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

Glassmorphism デザイン、アーストーンの色、ダークモードのサポートを備えたレスポンシブメディアエンベッドコンポーネントで、ソーシャルメディアのユースケース向けに Tailwind CSS で構築されています。すりガラス効果を含み、プレースホルダー画像/アバターを使用します。

プレビューを開く

                <div class="relative overflow-hidden rounded-lg shadow-lg group bg-white bg-opacity-10 backdrop-filter backdrop-blur-lg dark:bg-gray-800 dark:bg-opacity-10 dark:backdrop-filter dark:backdrop-blur-lg"> <div class="relative w-full overflow-hidden bg-gray-200 rounded-t-lg aspect-w-16 aspect-h-9 group-hover:opacity-75"> <img src="https://picsum.photos/id/237/1000/600" alt="Placeholder image" class="object-cover object-center w-full h-full"> </div> <div class="flex items-center px-5 py-4"> <div class="flex-shrink-0"> <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar"> </div> <div class="ml-3"> <p class="text-sm font-medium text-gray-900 dark:text-white"> <a href="#" class="hover:underline"> Username </a> </p> <p class="text-xs text-gray-700 dark:text-gray-300"> Posted on March 15, 2023 </p> </div> </div> <div class="p-5"> <h3 class="text-lg font-medium text-gray-900 dark:text-white"> <a href="#"> Title of the Embedded Media </a> </h3> <p class="mt-2 text-sm text-gray-700 dark:text-gray-300"> This is a description of the embedded media, providing some context or details about the content. </p> </div> <div class="flex items-center justify-between px-5 py-3 bg-gray-100 dark:bg-gray-700 dark:bg-opacity-20"> <div class="flex space-x-4"> <span class="text-sm text-gray-700 dark:text-gray-300">Likes: 1.2k</span> <span class="text-sm text-gray-700 dark:text-gray-300">Comments: 350</span> </div> <a href="#" class="text-sm font-medium text-yellow-700 hover:text-yellow-600 dark:text-yellow-500 dark:hover:text-yellow-400"> View More </a> </div> </div>

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

Glassmorphismスタイルで設計されたレスポンシブメディア埋め込みコンポーネントで、コンテンツ消費のためのインタラクティブな要素を備えています。

プレビューを開く

                <div class="flex flex-col items-center p-6 bg-gradient-to-r from-blue-400 to-purple-500 rounded-lg shadow-lg backdrop-filter backdrop-blur-lg bg-opacity-30 dark:bg-opacity-50 border border-white border-opacity-20 max-w-lg w-full">
    <div class="flex items-center mb-4">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-16 h-16 rounded-full border-2 border-white">
        <div class="ml-4">
            <h2 class="text-xl font-semibold text-white">John Doe</h2>
            <p class="text-sm text-gray-200">Content Creator</p>
        </div>
    </div>
    <div class="bg-white dark:bg-gray-800 bg-opacity-20 rounded-lg p-4 shadow-md w-full">
        <h3 class="text-lg font-bold text-white">Exciting New Developments in Technology</h3>
        <iframe class="w-full h-60 mt-3 rounded-lg shadow-inner" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allowfullscreen></iframe>
        <p class="mt-2 text-white">Explore the latest trends and advancements in technology that are shaping the future. Join us as we dive deep into the innovations that are changing our world.</p>
        <div class="mt-3 flex justify-between items-center">
            <button class="py-2 px-4 bg-blue-500 text-white rounded-full hover:bg-blue-600">Read More</button>
            <span class="text-xs text-gray-300">2 hours ago</span>
        </div>
    </div>
    <img src="https://picsum.photos/400/200" alt="Media" class="mt-4 rounded-lg shadow-lg"> 
</div>

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

ブログ/コンテンツサイト向けのダークテーマをサポートするレスポンシブメディア埋め込みコンポーネントで、マテリアルデザインの原則、トライアドカラースキーム、適度な複雑さでスタイル付けされています。埋め込みビデオプレースホルダーと関連記事のリンクが含まれています。

プレビューを開く

                <div class="container mx-auto p-4 max-w-3xl">
  <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
    <div class="relative" style="padding-top: 56.25%;">
      <!-- 16:9 Aspect Ratio -->
      <iframe class="absolute inset-0 w-full h-full" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    </div>
    <div class="p-4">
      <h2 class="text-xl font-bold text-gray-800 dark:text-white mb-2">Embedded Media Title</h2>
      <p class="text-gray-600 dark:text-gray-300 text-sm mb-4">Published on October 27, 2023</p>
      <p class="text-gray-700 dark:text-gray-200 mb-4">This is a description of the embedded media content. It provides context and information about the video.</p>
      <div class="border-t border-gray-200 dark:border-gray-700 pt-4">
        <h3 class="text-lg font-semibold text-gray-800 dark:text-white mb-3">Related Articles</h3>
        <ul>
          <li class="mb-2">
            <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Related Article Title 1</a>
          </li>
          <li class="mb-2">
            <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Related Article Title 2</a>
          </li>
          <li>
            <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Related Article Title 3</a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>

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

ニューモーフィズムスタイルで設計されたレスポンシブメディア埋め込みコンポーネントで、鮮やかな色とダッシュボードアプリケーションに適したインタラクティブインターフェイスが特徴です。

プレビューを開く

                <div class="flex flex-col items-center p-6 bg-gray-100 dark:bg-gray-800 rounded-xl shadow-xl transition-shadow duration-300"><h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Media Embed</h2><div class="flex flex-col items-center w-full mb-4"><img src="https://picsum.photos/400/200" alt="Media" class="rounded-lg shadow-lg transition-transform duration-300 transform hover:scale-105"/><p class="text-gray-600 dark:text-gray-300 mt-2">Watch our latest video to stay updated!</p></div><div class="flex w-full justify-between items-center mb-2"><button class="bg-blue-500 text-white py-2 px-4 rounded-full shadow-md hover:shadow-lg transition-shadow duration-300">Play</button><button class="bg-red-500 text-white py-2 px-4 rounded-full shadow-md hover:shadow-lg transition-shadow duration-300">Like</button><button class="bg-yellow-500 text-white py-2 px-4 rounded-full shadow-md hover:shadow-lg transition-shadow duration-300">Share</button></div><div class="flex items-center mt-4"><img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full border-2 border-white shadow-md"/><p class="text-gray-800 dark:text-white ml-2">User Name</p></div></div>

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

ミニマリストでフラットなデザインのメディア埋め込みコンポーネントで、アースカラーの配色で、ビジネス/企業のWebサイトに適しています。これは、レスポンシブデザインと Tailwind CSS を使用したダークテーマのサポートを備えた、適度な複雑さのコンポーネントです。JavaScriptは含まれていません。

プレビューを開く

                

<div class="container mx-auto p-4 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-md">

  <div class="flex flex-col md:flex-row">

    <!-- Media Embed Placeholder -->

    <div class="md:w-2/3 w-full">

      <div class="aspect-w-16 aspect-h-9 bg-gray-300 dark:bg-gray-700 rounded-md overflow-hidden">

        <!-- Placeholder for embedded media (e.g., iframe for YouTube, Vimeo, etc.) -->

        <!-- Replace with your actual embed code -->

        <iframe src="https://www.youtube.com/embed/your-video-id" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen class="w-full h-full"></iframe>

      </div>

    </div>



    <!-- Content Area -->

    <div class="md:w-1/3 w-full md:ml-4 mt-4 md:mt-0">

      <h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-2">Media Title</h3>

      <p class="text-gray-600 dark:text-gray-300 text-sm mb-4">

        A brief description of the embedded media goes here. Provide context or a summary.

      </p>

      <div class="flex items-center text-gray-500 dark:text-gray-400 text-xs">

        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">

          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />

        </svg>

        <span>Published on: October 26, 2023</span>

      </div>

    </div>



  </div>

</div>

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

3D デザインスタイル、補色スキーム、ダークモードをサポートするレスポンシブレイアウトを備えた e コマース用に設計されたメディア埋め込みコンポーネント。

プレビューを開く

                <div class="max-w-md mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-2xl transform hover:scale-105 transition-transform duration-300 ease-in-out">
    <div class="relative">
        <img src="https://picsum.photos/400/200" alt="Product Image" class="w-full h-48 object-cover rounded-t-lg">
        <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-4 rounded-b-lg">
            <h2 class="text-white text-lg font-semibold">Product Title</h2>
            <p class="text-gray-300">Short description of the product goes here.</p>
        </div>
    </div>
    <div class="p-4">
        <p class="text-gray-800 dark:text-gray-200">Add to Cart</p>
        <div class="flex justify-between items-center mt-2">
            <span class="text-gray-800 dark:text-gray-200 font-bold text-xl">$49.99</span>
            <button class="bg-green-500 hover:bg-green-600 dark:bg-green-700 dark:hover:bg-green-800 text-white font-bold py-2 px-4 rounded">Buy Now</button>
        </div>
    </div>
</div>

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

Glassmorphism スタイル、類似の配色、コンテンツ消費のダークモードサポートを備えたレスポンシブメディア埋め込みコンポーネント。

プレビューを開く

                <div class="dark:bg-gray-900 py-8">
  <div class="container mx-auto px-4">
    <div class="max-w-sm mx-auto rounded-xl shadow-lg backdrop-filter backdrop-blur-lg bg-opacity-20 bg-white dark:bg-gray-800 dark:bg-opacity-20 overflow-hidden">
      <div class="relative">
        <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/unsplash/400/300" alt="Media Placeholder">
        <div class="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent"></div>
        <div class="absolute bottom-0 left-0 p-4 text-white">
          <h3 class="text-xl font-bold">Media Title</h3>
          <p class="text-sm">Date Published</p>
        </div>
      </div>
      <div class="p-4">
        <p class="text-gray-700 dark:text-gray-300 text-base">
          This is a description of the media content. It can be a short summary or excerpt.
        </p>
        <div class="flex items-center mt-4">
          <img class="w-10 h-10 rounded-full mr-4 object-cover" src="https://randomuser.me/api/portraits/men/random.jpg" alt="Avatar of Author">
          <div class="text-sm">
            <p class="text-gray-900 dark:text-white leading-none">Author Name</p>
            <p class="text-gray-600 dark:text-gray-400">Author Title</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

スキューモーフィックメディア埋め込みコンポーネント

スキューモーフィズムデザイン、類似の配色、ビジネスWebサイト向けの適度な複雑さを備えたレスポンシブメディア埋め込みコンポーネント。Tailwind CSS を使用したダークモードのサポートが含まれています。

プレビューを開く

                <div class="bg-gray-200 dark:bg-gray-800 p-6 rounded-lg shadow-xl">
  <div class="relative pb-9/16 mb-4">
    <iframe class="absolute inset-0 w-full h-full rounded-md shadow-inner" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
  </div>
  <div class="flex items-center mb-4">
    <img class="w-12 h-12 rounded-full mr-4 ring-2 ring-gray-400 dark:ring-gray-600" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar">
    <div>
      <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Skeuomorphic Media Title</h3>
      <p class="text-gray-600 dark:text-gray-400 text-sm">Channel Name</p>
    </div>
  </div>
  <p class="text-gray-700 dark:text-gray-300">
    This is a description of the media content. It provides a brief overview 
    and context for the embedded video or audio. The design features subtle 
    shadows and gradients to mimic a tangible, real-world object.
  </p>
</div>

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

ダッシュボード用に設計された、ダークテーマのサポート、複雑なレイアウト、補色の配色を備えたレスポンシブメディア埋め込みコンポーネント。

プレビューを開く

                <div class="container mx-auto p-6 bg-gray-900 text-gray-200">
  <div class="flex flex-wrap -mx-4">
    <div class="w-full lg:w-2/3 px-4 mb-6 lg:mb-0">
      <div class="bg-gray-800 rounded-lg shadow-lg overflow-hidden">
        <div class="relative" style="padding-top: 56.25%;">
          <iframe class="absolute inset-0 w-full h-full" src="https://www.youtube.com/embed/your-video-id" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-screen" allowfullscreen></iframe>
        </div>
        <div class="p-6">
          <h3 class="text-xl font-semibold mb-3 text-teal-400 dark:text-teal-500">Video Title Here</h3>
          <p class="text-gray-400 mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
          <div class="flex items-center text-gray-500 text-sm">
            <span><i class="far fa-eye mr-2"></i>1.2M Views</span>
            <span class="ml-4"><i class="far fa-comment mr-2"></i>3.5K Comments</span>
          </div>
        </div>
      </div>
    </div>
    <div class="w-full lg:w-1/3 px-4">
      <div class="bg-gray-800 rounded-lg shadow-lg p-6">
        <h4 class="text-lg font-semibold mb-4 text-orange-400 dark:text-orange-500">Related Content</h4>
        <ul>
          <li class="flex items-center mb-4">
            <img class="w-12 h-12 rounded-md mr-4" src="https://picsum.photos/id/1018/60/60" alt="Related Video Thumbnail">
            <div>
              <p class="font-semibold text-teal-400 dark:text-teal-500 leading-tight">Related Video Title</p>
              <p class="text-gray-500 text-sm">Channel Name</p>
            </div>
          </li>
          <li class="flex items-center mb-4">
            <img class="w-12 h-12 rounded-md mr-4" src="https://picsum.photos/id/1015/60/60" alt="Related Video Thumbnail">
            <div>
              <p class="font-semibold text-teal-400 dark:text-teal-500 leading-tight">Another Related Video</p>
              <p class="text-gray-500 text-sm">Another Channel</p>
            </div>
          </li>
           <li class="flex items-center">
            <img class="w-12 h-12 rounded-md mr-4" src="https://picsum.photos/id/1019/60/60" alt="Related Video Thumbnail">
            <div>
              <p class="font-semibold text-teal-400 dark:text-teal-500 leading-tight">Yet Another Video</p>
              <p class="text-gray-500 text-sm">Yet Another Channel</p>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>

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

ダークモードをサポートするTailwind CSSのNeumorphismスタイルで設計されたレスポンシブメディア埋め込みコンポーネント。

プレビューを開く

                <div class="flex flex-col items-center mb-8 p-6 bg-white dark:bg-gray-900 rounded-lg shadow-lg transition-shadow duration-300 ease-in-out hover:shadow-xl">
    <div class="relative w-full h-0 pb-56 overflow-hidden rounded-lg shadow-inner bg-gray-200 dark:bg-gray-800">
        <iframe class="absolute top-0 left-0 w-full h-full" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allowfullscreen></iframe>
    </div>
    <div class="flex items-center mt-4">
        <img class="w-10 h-10 rounded-full border-2 border-white dark:border-gray-800 shadow-sm" src="https://randomuser.me/api/portraits/men/75.jpg" alt="Avatar">
        <div class="ml-4">
            <h5 class="text-lg font-semibold text-gray-800 dark:text-gray-200">John Doe</h5>
            <p class="text-sm text-gray-600 dark:text-gray-400">Posted on January 1, 2023</p>
        </div>
    </div>
</div>

<style>
    /* Neumorphism styles */
    .bg-white {
        background-color: #f0f0f0;
        box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.1),
                    -10px -10px 20px rgba(255, 255, 255, 1);
    }
    .dark .bg-gray-900 {
        background-color: #1c1c1c;
        box-shadow: inset 10px 10px 20px rgba(0, 0, 0, 0.5),
                    inset -10px -10px 20px rgba(255, 255, 255, 0.1);
    }
    .shadow-inner {
        box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.2), inset -5px -5px 10px rgba(255, 255, 255, 0.9);
    }
</style>

カテゴリ