Retro Media Embed Component
A responsive Media Embed Component with a "Retro/Vintage" design, inspired by 80s/90s aesthetics like old CRT monitors and VCR players. It uses a complementary color scheme of Teal and Orange on a Slate gray base, suitable for "Business/Corporate" websites. The component features moderate complexity with hover effects on the play button and media thumbnail, a faux REC light animation, and decorative non-functional control elements. It includes dark theme support using Tailwind's `dark:` prefix. The media area is designed for a 16:9 aspect ratio (requires Tailwind aspect-ratio plugin or a CSS fallback like padding-bottom trick). Placeholder image from picsum.photos is used.
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=Related Components
Media Embed Component
A responsive media embed component for e-commerce with a minimalist design, vibrant colors, and dark mode support.
Media Embed Component
A responsive media embed component designed with Neumorphism style in Tailwind CSS, which supports dark mode.
Media Embed Component
A brutalist, vibrant, and complex Media Embed Component for blogs, built with responsive design and dark mode support using Tailwind CSS.