Componenti Incorporamento di file multimediali Componente di incorporamento multimediale

Componente di incorporamento multimediale

Un componente di incorporamento multimediale dal design minimalista e piatto con combinazione di colori dei toni della terra, adatto per siti Web aziendali/aziendali. Si tratta di un componente di complessità moderata con design reattivo e supporto per temi scuri utilizzando Tailwind CSS. Non è incluso alcun JavaScript.

Anteprima

Codice HTML



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

Componenti correlati

Componente di incorporamento di contenuti multimediali retrò

Componente di incorporamento di media retrò / vintage per siti Web aziendali / aziendali con combinazione di colori triadica e supporto per temi scuri reattivi.

Aperto

Componente di incorporamento di supporti di viaggio Art Deco

Un componente multimediale complesso e ad alto contrasto in stile Art Déco per siti Web di viaggi e turismo, con motivi geometrici, stile lussuoso e reattività completa con supporto della modalità oscura. Progettato per visualizzare destinazioni di viaggio o attività con un lettore multimediale incorporato, dettagli e call-to-action.

Aperto

Componente di incorporamento di contenuti multimediali retrò

Un componente Media Embed reattivo con un design "Retro/Vintage", ispirato all'estetica degli anni '80/'90 come i vecchi monitor CRT e i lettori VCR. Utilizza una combinazione di colori complementari di verde acqua e arancione su una base grigio ardesia, adatta per siti Web "Business/Corporate". Il componente presenta una complessità moderata con effetti di passaggio del mouse sul pulsante di riproduzione e sulla miniatura multimediale, un'animazione di luce REC finta ed elementi di controllo decorativi non funzionali. Include il supporto per il tema scuro utilizzando il prefisso "dark:" di Tailwind. L'area multimediale è progettata per un rapporto di aspetto 16:9 (richiede il plug-in Tailwind aspect-ratio o un fallback CSS come il trucco padding-bottom). Viene utilizzata l'immagine segnaposto da picsum.photos.

Aperto