레트로 미디어 임베드 컴포넌트
레트로/빈티지 미디어 임베드 구성 요소는 트라이어딕 색 구성표와 반응형 어두운 테마를 지원하는 비즈니스/기업 웹사이트를 위한 구성 요소입니다.
HTML 코드
<div class="dark:bg-gray-900 bg-gray-100 p-8 min-h-screen flex items-center justify-center font-mono">
<div class="max-w-md w-full bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden border-4 border-purple-500 dark:border-purple-600 transform -rotate-3 hover:rotate-0 transition-transform duration-300">
<div class="relative" style="padding-bottom: 56.25%;">
<iframe class="absolute top-0 left-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-6 bg-yellow-300 dark:bg-yellow-700 text-purple-800 dark:text-purple-200">
<div class="flex justify-between items-center mb-4">
<h3 class="text-xl font-bold">Rad Video Title</h3>
<span class="text-sm">5:32</span>
</div>
<p class="text-sm mb-4">
Get ready to groove with this tubular content! Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Vivamus interdum, sem quis dictum finibus, magna nisl bibendum felis.
</p>
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Avatar" class="w-10 h-10 rounded-full border-2 border-purple-800 dark:border-purple-200 mr-3">
<span class="text-sm font-semibold">Duke Silver</span>
</div>
</div>
</div>
</div>