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
Neumorphism Media Embed Component
A neumorphic Media Embed Component for business websites, with responsive design and dark theme support using complementary colors.
Neumorphic Media Embed Component
A complex, neumorphic media embed component with vibrant colors, designed for CRM/Business Tools, showcasing a video player, related content, and interactive controls with full responsiveness and dark mode support.
Art Deco Travel Media Embed Component
A complex, high-contrast Art Deco style media embed component for travel and tourism websites, featuring geometric patterns, luxurious styling, and full responsiveness with dark mode support. Designed to display travel destinations or activities with an embedded media player, details, and call-to-action.