미디어 컴포넌트 컴포넌트
브루탈리즘 스타일로 디자인된 미디어 구성 요소로, Tailwind CSS를 사용하여 고대비, 반응형 효과 및 어두운 테마 지원을 갖춘 대담한 레이아웃을 보여줍니다.
HTML 코드
<div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg border-2 border-gray-300 dark:border-gray-700">
<h2 class="text-3xl font-extrabold text-gray-900 dark:text-white mb-4">Media Component</h2>
<div class="flex flex-col md:flex-row items-start md:items-center gap-6">
<img src="https://picsum.photos/400/300" alt="Random Image" class="rounded-lg mb-4 md:mb-0 md:w-1/2" />
<div class="flex-1">
<h3 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-2">Media Title</h3>
<p class="text-gray-700 dark:text-gray-400 mb-4">
This is a sample description of the media content. It is meant to give an overview of what the media is about in a raw and bold style.
</p>
<span class="inline-block font-bold text-gray-900 dark:text-white mb-2">
Uploaded by: <img src="https://randomuser.me/api/portraits/men/10.jpg" alt="Avatar" class="inline-block w-8 h-8 rounded-full border-2 border-white dark:border-gray-800"> John Doe
</span>
</div>
</div>
<div class="mt-4 flex gap-4">
<button class="bg-gray-800 text-white font-bold py-2 px-4 rounded hover:bg-gray-700 dark:bg-gray-600 dark:hover:bg-gray-500">Watch</button>
<button class="bg-gray-200 text-gray-800 font-bold py-2 px-4 rounded hover:bg-gray-300 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600">Learn More</button>
</div>
</div>
<style>
@media (prefers-color-scheme: dark) {
.bg-gray-800, .bg-gray-700 {
background-color: #4a5568;
}
.text-gray-200 {
color: #edf2f7;
}
.text-gray-400 {
color: #a0aec0;
}
}
</style>