Componente di incorporamento multimediale
Un componente Media Embed reattivo progettato con lo stile Glassmorphism, con elementi interattivi per il consumo di contenuti.
Codice HTML
<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>Componenti correlati
Componente 14 dell'incorporamento dei file multimediali
Un componente Media Embed progettato in uno stile scheumorfico, con effetti reattivi e supporto per temi scuri. Include un'immagine, una descrizione e un avatar dell'utente.
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.
Componente di incorporamento multimediale
Un componente di incorporamento multimediale progettato per l'e-commerce con uno stile di progettazione 3D, una combinazione di colori complementari e un layout reattivo che supporta la modalità scura.