미디어 컴포넌트 컴포넌트
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>관련 구성 요소
Glassmorphic 미디어 컴포넌트
Tailwind CSS로 제작된 glassmorphism 디자인(젖빛 유리 효과)이 있는 반응형 미디어 카드 구성 요소입니다. 호버로 표시되는 재생 아이콘이 있는 이미지 자리 표시자(picsum.photos), 텍스트 콘텐츠, 아바타가 있는 작성자 섹션(randomuser.me 에서) 및 작업 버튼이 있습니다. 이 구성 요소는 Tailwind CSS 'dark:' 변형을 사용하여 다크 모드를 지원하며 다양한 화면 크기에 반응합니다. JavaScript가 필요하지 않습니다. 최적의 시각 효과를 얻으려면 이 구성 요소를 대비되는 배경에 배치하십시오. 다크 모드 기능은 적절한 Tailwind CSS 구성(예: tailwind.config.js의 'darkMode: "class"')을 가정합니다.
Bauhaus 유사 미디어 구성 요소
Bauhaus에서 영감을 받은 디자인의 반응형 미디어 구성 요소로, 유사한 색 구성표를 사용하여 정부/공공 서비스 웹 사이트에 적합합니다. 기하학적 형태, 기본 유사 색상 및 다크 모드 지원이 특징입니다.