Компонент встраивания мультимедиа в стиле ретро
Отзывчивый компонент встраивания мультимедиа с дизайном в стиле «ретро/винтаж», вдохновленный эстетикой 80-х/90-х годов, такой как старые ЭЛТ-мониторы и видеомагнитофоны. Он использует дополнительную цветовую гамму бирюзового и оранжевого на грифельно-серой основе, подходящую для веб-сайтов «Бизнес/Корпоративный». Компонент отличается умеренной сложностью с эффектами наведения на кнопку воспроизведения и миниатюру мультимедиа, искусственную световую анимацию REC и декоративные нефункциональные элементы управления. Он включает в себя поддержку темной темы с использованием префикса Tailwind 'dark:'. Медиа-область рассчитана на соотношение сторон 16:9 (требуется плагин Tailwind aspect-ratio или резервный CSS-вариант, такой как трюк с отступом внизу). Используется изображение-заполнитель из picsum.photos.
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=Связанные компоненты
Компонент Media Embed
Простой, адаптивный компонент встраивания мультимедиа с 3D-дизайном в оттенках серого и поддержкой темного режима, подходящий для бизнес-сайтов. Использует Tailwind CSS для стилизации.
Компонент Media Embed
Компонент Responsive Media Embed Component со стилем Glassmorphism, Analogous цветовой схемой и поддержкой темного режима для потребления контента.
Компонент Media Embed
Компонент Media Embed, разработанный для электронной коммерции со стилем 3D-дизайна, дополнительной цветовой схемой и адаптивным макетом, поддерживающим темный режим.