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.
Codice HTML
<div class="min-h-screen bg-slate-100 dark:bg-slate-900 p-4 sm:p-6 md:p-8 flex items-center justify-center font-sans">
<div class="w-full max-w-xl rounded-lg shadow-2xl overflow-hidden border-2 border-slate-400 dark:border-slate-600">
<!-- Outer Casing - Retro Monitor Look -->
<div class="bg-slate-300 dark:bg-slate-700 p-2 border-b-2 border-slate-400 dark:border-slate-600">
<div class="flex items-center space-x-1.5 pl-1">
<span class="block w-3 h-3 bg-red-500 rounded-full opacity-80"></span>
<span class="block w-3 h-3 bg-yellow-400 rounded-full opacity-80"></span>
<span class="block w-3 h-3 bg-green-500 rounded-full opacity-80"></span>
</div>
</div>
<div class="bg-slate-200 dark:bg-slate-800 p-1 sm:p-2">
<!-- Screen Bezel -->
<div class="bg-black p-1 sm:p-1.5 rounded-sm shadow-inner">
<!-- Media Embed Area with Aspect Ratio (requires @tailwindcss/aspect-ratio plugin) -->
<div class="aspect-w-16 aspect-h-9 relative group overflow-hidden">
<img src="https://picsum.photos/seed/retrocorp1/1280/720" alt="Retro Media Thumbnail" class="absoluteിക inset-0 w-full h-full object-cover transition-all duration-300 ease-in-out group-hover:opacity-75 filter grayscale group-hover:grayscale-0"/>
<!-- Play Button Overlay -->
<div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300 ease-in-out bg-black bg-opacity-30 group-hover:bg-opacity-40">
<button aria-label="Play" class="flex items-center justify-center p-3 sm:p-4 bg-orange-500 hover:bg-orange-600 dark:bg-orange-600 dark:hover:bg-orange-500 text-white rounded-sm shadow-md transform transition-all duration-150 ease-in-out hover:scale-105 border-b-2 border-r-2 border-orange-700 dark:border-orange-500 hover:border-orange-600 dark:hover:border-orange-400 active:border-b-0 active:border-r-0 active:translate-x-px active:translate-y-px">
<svg class="w-6 h-6 sm:w-8 sm:h-8 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M6 19V5l14 7-14 7z"/>
</svg>
<span class="ml-2 text-sm sm:text-base font-semibold hidden md:inline">PLAY</span>
</button>
</div>
<!-- Watermark/Branding (subtle, retro) -->
<div class="absolute bottom-2 right-2 md:bottom-3 md:right-3 flex items-center">
<span class=Componenti correlati
Componente di incorporamento multimediale
Un componente multimediale incorporato progettato con effetti glassmorphism, caratterizzato da un design reattivo adatto per siti Web aziendali con supporto per temi scuri.
Componente di incorporamento multimediale - Crypto/Blockchain
Un componente di incorporamento multimediale semplice e reattivo progettato per applicazioni di criptovaluta o blockchain, con toni seppia/marrone e supporto della modalità scura per ridurre l'affaticamento degli occhi.
Componente di incorporamento del supporto neumorfico
Un componente multimediale complesso e neumorfico con colori vivaci, progettato per CRM/Business Tools, che mostra un lettore video, contenuti correlati e controlli interattivi con reattività completa e supporto della modalità oscura.