Composant d’intégration de média rétro
Un composant multimédia réactif avec un design « Rétro/Vintage », inspiré de l’esthétique des années 80/90 comme les vieux moniteurs CRT et les lecteurs magnétoscopes. Il utilise une palette de couleurs complémentaires de sarcelle et d’orange sur une base gris ardoise, adaptée aux sites Web « Business/Corporate ». Le composant présente une complexité modérée avec des effets de survol sur le bouton de lecture et la vignette multimédia, une fausse animation lumineuse REC et des éléments de contrôle décoratifs non fonctionnels. Il inclut la prise en charge du thème sombre à l’aide du préfixe 'dark :' de Tailwind. La zone multimédia est conçue pour un rapport d’aspect de 16:9 (nécessite le plugin de rapport d’aspect Tailwind ou une solution de repli CSS comme l’astuce du rembourrage inférieur). L’image de remplacement de picsum.photos est utilisée.
HTML Code
<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=Composants associés
Composant d’intégration multimédia 14
Un composant d’intégration multimédia conçu dans un style skeuomorphe, avec des effets réactifs et une prise en charge des thèmes sombres. Il comprend une image, une description et un avatar de l’utilisateur.
Composant d’intégration de média
Un composant multimédia d’intégration minimaliste conçu pour les tableaux de bord avec un design réactif et une prise en charge du thème sombre à l’aide de Tailwind CSS.
Composant d’intégration de média
Un composant d’intégration multimédia réactif avec des éléments de conception 3D et la prise en charge du thème sombre à l’aide de Tailwind CSS.