Componente di incorporamento multimediale
Un componente di incorporamento multimediale semplice e reattivo con design 3D in scala di grigi e supporto per la modalità scura, adatto per siti Web aziendali. Utilizza Tailwind CSS per lo stile.
Codice HTML
<div class="relative flex items-center justify-center h-96 overflow-hidden bg-gray-100 dark:bg-gray-900 rounded-lg shadow-lg m-4">
<!-- 3D effect background elements (simplified) -->
<div class="absolute inset-0 z-0 pointer-events-none transform scale-150">
<div class="absolute inset-0 bg-gradient-to-br from-gray-300 via-gray-100 to-gray-300 dark:from-gray-700 dark:via-gray-900 dark:to-gray-700 opacity-50"></div>
<div class="absolute inset-0 border-4 border-gray-200 dark:border-gray-800 rounded-lg transform rotate-3"></div>
</div>
<!-- Content area -->
<div class="relative z-10 p-8 bg-white dark:bg-gray-800 bg-opacity-90 dark:bg-opacity-90 rounded-lg shadow-xl max-w-md text-center">
<h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Embed Media</h2>
<!-- Placeholder for embedded media (e.g., iframe for YouTube,- Vimeo) -->
<!-- Replace with actual embed code -->
<div class="w-full aspect-video bg-gray-200 dark:bg-gray-700 rounded-md flex items-center justify-center text-gray-500 dark:text-gray-400">
<p>Media Placeholder</p>
</div>
<p class="mt-4 text-gray-600 dark:text-gray-300 text-sm">Embed your videos, maps, or other media here.</p>
</div>
</div>Componenti correlati
Componente di incorporamento multimediale
Un componente Media Embed reattivo progettato con lo stile Glassmorphism, con elementi interattivi per il consumo di contenuti.
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 reattivo con un'estetica retrò/vintage, che supporta il tema scuro e presenta immagini segnaposto e avatar.