미디어 임베드 컴포넌트
레트로/빈티지 미학으로 스타일링된 반응형 미디어 임베드 구성 요소로, 어두운 테마를 지원하고 자리 표시자 이미지와 아바타를 특징으로 합니다.
HTML 코드
<div class="max-w-lg mx-auto bg-white rounded-lg shadow-lg overflow-hidden dark:bg-gray-800">
<div class="relative">
<img class="w-full h-48 object-cover" src="https://picsum.photos/600/400?random=1" alt="Retro Media">
<div class="absolute top-0 left-0 right-0 bg-black bg-opacity-50 p-4">
<h2 class="text-white text-xl font-bold">Retro Media Title</h2>
<p class="text-gray-300">This is a description of the retro media.</p>
</div>
</div>
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Posted by</h3>
<div class="flex items-center mt-2">
<img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
<div class="ml-3">
<p class="text-gray-800 dark:text-gray-200 font-semibold">John Doe</p>
<p class="text-gray-500 dark:text-gray-400 text-sm">5 minutes ago</p>
</div>
</div>
</div>
<style>
@media (prefers-color-scheme: dark) {
.bg-white {background-color: #1a202c;}
.text-gray-800 {color: #e2e8f0;}
.text-gray-300 {color: #edf2f7;}
}
.bg-black { background-color: rgba(0, 0, 0, 0.8); }
.rounded-lg { border-radius: 0.5rem; }
.shadow-lg { box-shadow: 0 10px 15px rgba(0,0,0,0.2); }
.text-xl { font-size: 1.25rem; }
.text-lg { font-size: 1.125rem; }
.text-sm { font-size: 0.875rem; }
@media (max-width: 640px) {
.h-48 { height: 12rem; }
}
</style>
</div>