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.
Codice HTML
<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>Componenti correlati
Componente di incorporamento multimediale
Componente di incorporamento multimediale con microinterazioni, effetti reattivi e supporto per temi scuri. Non è necessario alcun Javascript.
Componente di incorporamento multimediale
Un componente Media Embed reattivo con uno stile scheumorfico, utilizzando colori color Terra e adatto per l'e-commerce, con supporto per temi scuri.
Componente di incorporamento multimediale
Un componente Media Embed reattivo con supporto per temi scuri per blog/siti di contenuti, con uno stile basato sui principi del Material Design, una combinazione di colori triadica e una complessità moderata. Include un segnaposto video incorporato e collegamenti agli articoli correlati.