Brutalism 파스텔 미디어 구성 요소
파스텔 색조의 단순하고 잔인한 미디어 구성 요소로, 블로그용으로 디자인되었습니다. 다크 모드 지원으로 반응형.
HTML 코드
<div class="max-w-sm mx-auto bg-white border border-black shadow-brutalism overflow-hidden mb-4 dark:bg-gray-800 dark:border-gray-600">
<img class="w-full h-48 object-cover" src="https://picsum.photos/seed/picsum/400/200" alt="Placeholder Image">
<div class="p-4">
<div class="font-bold text-xl mb-2 text-black dark:text-white">Media Component Title</div>
<p class="text-gray-700 text-base dark:text-gray-300">
This is a simple brutalist media component using pastel colors. It is responsive and supports dark mode.
</p>
<div class="mt-4 flex items-center">
<img class="w-8 h-8 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar of Author">
<div class="text-sm">
<p class="text-gray-900 leading-none dark:text-white">Author Name</p>
<p class="text-gray-600 dark:text-gray-400">Date</p>
</div>
</div>
</div>
</div>관련 구성 요소
Glassmorphic 미디어 컴포넌트
Tailwind CSS로 제작된 glassmorphism 디자인(젖빛 유리 효과)이 있는 반응형 미디어 카드 구성 요소입니다. 호버로 표시되는 재생 아이콘이 있는 이미지 자리 표시자(picsum.photos), 텍스트 콘텐츠, 아바타가 있는 작성자 섹션(randomuser.me 에서) 및 작업 버튼이 있습니다. 이 구성 요소는 Tailwind CSS 'dark:' 변형을 사용하여 다크 모드를 지원하며 다양한 화면 크기에 반응합니다. JavaScript가 필요하지 않습니다. 최적의 시각 효과를 얻으려면 이 구성 요소를 대비되는 배경에 배치하십시오. 다크 모드 기능은 적절한 Tailwind CSS 구성(예: tailwind.config.js의 'darkMode: "class"')을 가정합니다.