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

미디어 임베드 컴포넌트

블로그를 위한 잔인하고 생동감 넘치며 복잡한 미디어 임베드 컴포넌트로, Tailwind CSS를 사용하여 반응형 디자인과 다크 모드 지원으로 구축되었습니다.

미리 보기

HTML 코드

<div class="dark:bg-gray-900 dark:text-white p-8">
  <div class="max-w-4xl mx-auto">
    <div class="grid grid-cols-1 md:grid-cols-2 gap-8 border-4 border-black dark:border-white p-4">
      <div class="relative pb-56 md:pb-0 md:h-96">
        <iframe class="absolute top-0 left-0 w-full h-full border-4 border-black dark:border-white" 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="flex flex-col justify-between">
        <div>
          <h2 class="text-3xl font-bold mb-4 border-b-4 border-black dark:border-white pb-2">Embedded Media Title</h2>
          <p class="mb-4">This is a description of the embedded media. It is intentionally a bit rough around the edges to fit the brutalist style. The vibrant colors and bold borders create a sense of energy and excitement.</p>
          <div class="flex items-center mb-4">
            <img class="w-12 h-12 rounded-full mr-4 border-4 border-black dark:border-white" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Author Avatar">
            <div>
              <p class="font-bold">Author Name</p>
              <p class="text-sm">Date Published</p>
            </div>
          </div>
        </div>
        <div class="flex justify-end">
          <button class="bg-red-500 text-white px-6 py-3 border-4 border-black dark:border-white font-bold text-lg hover:bg-red-700">Watch Now</button>
        </div>
      </div>
    </div>
  </div>
</div>

관련 구성 요소

미디어 임베드 컴포넌트

Glassmorphism 미디어는 비즈니스/기업 웹 사이트를 위한 Earth Tones를 사용한 구성 요소를 포함합니다. 간단한 레이아웃, 반응형 및 어두운 테마 지원.

열다

미디어 임베드 컴포넌트 14

스큐어모픽 스타일로 디자인된 미디어 임베드 컴포넌트로, 반응형 효과와 어두운 테마를 지원합니다. 여기에는 이미지, 설명 및 사용자 아바타가 포함됩니다.

열다

미디어 임베드 컴포넌트

Glassmorphism 디자인, 흙색 색상 및 다크 모드를 지원하는 반응형 미디어 임베드 구성 요소로, 소셜 미디어 사용 사례를 위해 Tailwind CSS로 구축되었습니다. 젖빛 유리 효과를 포함하고 자리 표시자 이미지/아바타를 사용합니다.

열다