구성 요소 미디어 임베드 미디어 임베드 컴포넌트

미디어 임베드 컴포넌트

블로그/콘텐츠 사이트에 대한 어두운 테마를 지원하는 반응형 미디어 임베드 구성 요소로, 머티리얼 디자인 원칙, 트라이어딕 색 구성표 및 적당한 복잡성으로 스타일링되었습니다. 포함된 비디오 자리 표시자 및 관련 기사 링크가 포함되어 있습니다.

미리 보기

HTML 코드

<div class="container mx-auto p-4 max-w-3xl">
  <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
    <div class="relative" style="padding-top: 56.25%;">
      <!-- 16:9 Aspect Ratio -->
      <iframe class="absolute inset-0 w-full h-full" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    </div>
    <div class="p-4">
      <h2 class="text-xl font-bold text-gray-800 dark:text-white mb-2">Embedded Media Title</h2>
      <p class="text-gray-600 dark:text-gray-300 text-sm mb-4">Published on October 27, 2023</p>
      <p class="text-gray-700 dark:text-gray-200 mb-4">This is a description of the embedded media content. It provides context and information about the video.</p>
      <div class="border-t border-gray-200 dark:border-gray-700 pt-4">
        <h3 class="text-lg font-semibold text-gray-800 dark:text-white mb-3">Related Articles</h3>
        <ul>
          <li class="mb-2">
            <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Related Article Title 1</a>
          </li>
          <li class="mb-2">
            <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Related Article Title 2</a>
          </li>
          <li>
            <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Related Article Title 3</a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>

관련 구성 요소

미디어 임베드 컴포넌트

다크 모드를 지원하는 Tailwind CSS의 Neumorphism 스타일로 설계된 반응형 미디어 삽입 구성 요소입니다.

열다

미디어 임베드 컴포넌트

뉴모피즘 스타일로 설계된 반응형 미디어 임베드 구성 요소로, 생생한 색상과 대시보드 애플리케이션에 적합한 대화형 인터페이스를 특징으로 합니다.

열다

미디어 임베드 컴포넌트

어두운 테마 지원, 복잡한 레이아웃 및 보색 구성표를 갖춘 반응형 미디어 임베드 구성 요소로, 대시보드용으로 설계되었습니다.

열다