Rechercher des composants

Catégories

Composants Intégration des médias

Intégration des médias

Contenu intégré provenant de sources externes telles que YouTube ou Vimeo

Composant d’intégration de média

Composant d’intégration de médias réactifs avec style Glassmorphism, modèle de couleurs analogue et prise en charge du mode sombre pour la consommation de contenu.

Ouvrir Aperçu

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

Composant d’intégration de média skeuomorphe

Un composant d’intégration multimédia réactif avec une conception Skeuomorphism, une palette de couleurs analogue et une complexité modérée pour les sites Web d’entreprise. Inclut la prise en charge du mode sombre à l’aide de Tailwind CSS.

Ouvrir Aperçu

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

Composant d’intégration de média

Un composant d’intégration multimédia réactif avec prise en charge des thèmes sombres, une mise en page complexe et une palette de couleurs complémentaire, conçu pour les tableaux de bord.

Ouvrir Aperçu

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

Composant d’intégration de média

Un composant d’intégration multimédia réactif conçu avec le style Neumorphism dans Tailwind CSS, qui prend en charge le mode sombre.

Ouvrir Aperçu

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

Composant d’intégration de média

Un composant d’intégration multimédia réactif avec des éléments de conception 3D et la prise en charge du thème sombre à l’aide de Tailwind CSS.

Ouvrir Aperçu

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

Composant d’intégration de média

Composant d’intégration multimédia avec micro-interactions, effets réactifs et prise en charge du thème sombre. Pas besoin de Javascript.

Ouvrir Aperçu

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

Composant d’intégration de média

Un composant d’intégration multimédia réactif doté d’une esthétique rétro/vintage, prenant en charge le thème sombre et présentant des images et des avatars de remplacement.

Ouvrir Aperçu

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

Composant d’intégration de média

Un composant d’intégration multimédia doté d’un style de conception 3D pour plus de profondeur et d’engagement, d’effets réactifs et de prise en charge du mode sombre.

Ouvrir Aperçu

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

Composant d’intégration de média

Un composant d’intégration multimédia rétro/vintage conçu avec la nostalgie des années 80 et 90. Il dispose d’un style réactif et d’une prise en charge du mode sombre avec Tailwind CSS.

Ouvrir Aperçu

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

Composant d’intégration multimédia 14

Un composant d’intégration multimédia conçu dans un style skeuomorphe, avec des effets réactifs et une prise en charge des thèmes sombres. Il comprend une image, une description et un avatar de l’utilisateur.

Ouvrir Aperçu

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