CCHub Logo CCHub Tailwind Collection
Komponenten Medien einbetten Komponente "Medien einbetten"

Komponente "Medien einbetten"

Eine minimalistische und flache Design-Medieneinbettungskomponente mit Erdtönen, die für Geschäfts-/Unternehmenswebsites geeignet ist. Es handelt sich um eine Komponente mittlerer Komplexität mit responsivem Design und Unterstützung für dunkle Themen unter Verwendung von Tailwind CSS. Es ist kein JavaScript enthalten.

Vorschau

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>

Verwandte Komponenten

Komponente "Medien einbetten"

Eine reaktionsschnelle Medieneinbettungskomponente, die mit einem Neumorphismus-Stil entwickelt wurde, mit lebendigen Farben und einer interaktiven Schnittstelle, die für Dashboard-Anwendungen geeignet ist.

Offen

Neumorphism-Medieneinbettungskomponente

Eine neumorphe Media Embed-Komponente für Unternehmenswebsites mit responsivem Design und Unterstützung für dunkle Themen mit Komplementärfarben.

Offen

Komponente "Medien einbetten"

Eine Medieneinbettungskomponente im Neumorphism-Stil, die für den Konsum von Blogs und Inhalten geeignet ist und ein triadisches Farbschema aufweist. Responsives Design mit Unterstützung für den Dunkelmodus.

Offen