미디어 임베드 컴포넌트
깊이와 몰입도를 위한 3D 디자인 스타일, 반응형 효과 및 다크 모드 지원을 특징으로 하는 미디어 임베드 구성 요소입니다.
HTML 코드
<div class="max-w-sm mx-auto p-5 bg-white rounded-lg shadow-lg dark:bg-gray-800 transition-transform transform hover:scale-105 shadow-lg dark:shadow-2xl">
<div class="flex items-center mb-4">
<img src="https://randomuser.me/api/portraits/men/45.jpg" alt="User Avatar" class="w-10 h-10 rounded-full shadow-lg" />
<div class="ml-3">
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-100">John Doe</h2>
<p class="text-gray-600 dark:text-gray-400">2 hours ago</p>
</div>
</div>
<div class="mb-4">
<iframe class="w-full h-64 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700" src="https://www.youtube.com/embed/VIDEO_ID" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div>
<p class="text-gray-700 dark:text-gray-300">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ac neque euismod, scelerisque erat a, sollicitudin odio. Integer ac venenatis elit.
</p>
</div>
</div>
<style>
@media (prefers-color-scheme: dark) {
body {
background-color: #1a202c;
}
}
</style>관련 구성 요소
레트로 미디어 임베드 컴포넌트
오래된 CRT 모니터 및 VCR 플레이어와 같은 80/90년대 미학에서 영감을 받은 "레트로/빈티지" 디자인의 반응형 미디어 임베드 구성 요소입니다. 슬레이트 그레이 베이스에 청록색과 주황색의 보색 구성표를 사용하여 "비즈니스/기업" 웹사이트에 적합합니다. 이 구성 요소는 재생 버튼 및 미디어 썸네일에 대한 호버 효과, 가짜 REC 조명 애니메이션 및 장식용 비기능 제어 요소가 있는 중간 정도의 복잡성을 특징으로 합니다. 여기에는 Tailwind의 'dark:' 접두사를 사용하는 어두운 테마 지원이 포함됩니다. 미디어 영역은 16:9 종횡비로 설계되었습니다(Tailwind 종횡비 플러그인 또는 패딩 하단 트릭과 같은 CSS 대체 필요). picsum.photos의 자리 표시자 이미지가 사용됩니다.
미디어 임베드 컴포넌트 14
스큐어모픽 스타일로 디자인된 미디어 임베드 컴포넌트로, 반응형 효과와 어두운 테마를 지원합니다. 여기에는 이미지, 설명 및 사용자 아바타가 포함됩니다.