CCHub Logo CCHub Tailwind Collection
구성 요소 미디어 임베드 레트로 미디어 임베드 컴포넌트

레트로 미디어 임베드 컴포넌트

오래된 CRT 모니터 및 VCR 플레이어와 같은 80/90년대 미학에서 영감을 받은 "레트로/빈티지" 디자인의 반응형 미디어 임베드 구성 요소입니다. 슬레이트 그레이 베이스에 청록색과 주황색의 보색 구성표를 사용하여 "비즈니스/기업" 웹사이트에 적합합니다. 이 구성 요소는 재생 버튼 및 미디어 썸네일에 대한 호버 효과, 가짜 REC 조명 애니메이션 및 장식용 비기능 제어 요소가 있는 중간 정도의 복잡성을 특징으로 합니다. 여기에는 Tailwind의 'dark:' 접두사를 사용하는 어두운 테마 지원이 포함됩니다. 미디어 영역은 16:9 종횡비로 설계되었습니다(Tailwind 종횡비 플러그인 또는 패딩 하단 트릭과 같은 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=

관련 구성 요소

미디어 임베드 컴포넌트

glassmorphism 효과로 디자인된 미디어 임베드 구성 요소로, 어두운 테마를 지원하는 비즈니스 웹 사이트에 적합한 반응형 디자인을 특징으로 합니다.

열다

Neumorphism Media Embed 구성 요소

비즈니스 웹사이트를 위한 뉴모픽 미디어 임베드 컴포넌트로, 반응형 디자인과 보색을 사용한 어두운 테마를 지원합니다.

열다

미디어 임베드 컴포넌트

glassmorphism 디자인, 파스텔 색 구성표 및 다크 모드 지원을 갖춘 간단하고 반응이 빠른 미디어 임베드 구성 요소로, 블로그 및 콘텐츠 소비에 적합합니다.

열다