CCHub Logo CCHub Tailwind Collection
Composants Intégration des médias Composant d’intégration de média

Composant d’intégration de média

Un composant d’intégration multimédia minimaliste et plat avec une palette de couleurs de tons de terre, adapté aux sites Web d’entreprise / d’entreprise. Il s’agit d’un composant de complexité modérée avec une conception réactive et une prise en charge du thème sombre à l’aide de Tailwind CSS. Aucun JavaScript n’est inclus.

Aperçu

HTML Code 



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

Composants associés

Composant d’intégration multimédia - Sports/Fitness

Un composant multimédia réactif et minimaliste pour les applications de sport/fitness, avec des couleurs vives, une typographie forte et une mise en page basée sur une grille. Inclut la prise en charge du mode sombre.

Ouvrir

Composant d’intégration de média

Un composant multimédia d’intégration minimaliste conçu pour les tableaux de bord avec un design réactif et une prise en charge du thème sombre à l’aide de Tailwind CSS.

Ouvrir

Composant d’intégration de média

Un composant d’intégration multimédia réactif avec un design Glassmorphism, des couleurs de terre et une prise en charge du mode sombre, conçu avec Tailwind CSS pour les cas d’utilisation des médias sociaux. Comprend un effet de verre dépoli et utilise des images/avatars de substitution.

Ouvrir