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 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.
Componente di incorporamento multimediale
Componente di incorporamento multimediale reattivo con stile Glassmorphism, combinazione di colori analoga e supporto della modalità scura per il consumo di contenuti.
Componente di incorporamento multimediale
Un componente di incorporamento multimediale reattivo progettato con lo scheumorfismo, utilizzando una combinazione di colori monocromatica. Include un lettore video, una sezione di trascrizione e pulsanti di condivisione social. Il design supporta la modalità oscura ed è costruito con Tailwind CSS.