미디어 컴포넌트 컴포넌트
Tailwind CSS를 사용하여 스큐어모피즘 스타일로 디자인된 미디어 구성 요소로, 반응형 효과와 어두운 테마 지원을 특징으로 합니다.
HTML 코드
<div class="max-w-sm mx-auto">
<div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden">
<img class="w-full h-48 object-cover" src="https://picsum.photos/400/200" alt="Placeholder Image">
<div class="p-6">
<h2 class="text-2xl font-semibold text-gray-800 dark:text-white">Media Title</h2>
<p class="text-gray-700 dark:text-gray-300">This is a description of the media component. It mimics a real-world object with its skeuomorphic design.</p>
<div class="flex items-center mt-4">
<img class="w-10 h-10 rounded-full border-2 border-white dark:border-gray-800" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
<div class="ml-3">
<p class="text-sm text-gray-600 dark:text-gray-400">Posted by John Doe</p>
<p class="text-xs text-gray-500 dark:text-gray-500">2 hours ago</p>
</div>
</div>
</div>
</div>
</div>
<style>
/* Dark theme support */
@media (prefers-color-scheme: dark) {
body {
background-color: #1A202C;
}
}
</style>관련 구성 요소
Brutalism 예약 미디어 구성 요소
예약/예약 시스템을 위한 단순하고 브루탈리즘 스타일의 미디어 구성 요소로, 높은 대비와 보색 구성표를 특징으로 하며 다크 모드 지원으로 완벽하게 반응합니다.
미디어 컴포넌트 컴포넌트
브루탈리즘 디자인, 생생한 색상, 대시보드의 복잡한 레이아웃을 갖춘 반응형 미디어 구성 요소 구성 요소로, 어두운 테마를 지원하고 JavaScript를 사용하지 않습니다. 이미지에는 picsum.photos를 사용하고 아바타에는 randomuser.me 를 사용합니다.