Content Display 구성 요소
미니멀하고 평면적인 디자인 스타일을 특징으로 하는 반응형 콘텐츠 표시 구성 요소로, 블로그 및 콘텐츠 소비에 이상적입니다. 그레이스케일 색 구성표를 가지고 있으며 다크 모드를 지원하는 동시에 대화형 요소를 갖추고 있습니다.
HTML 코드
<div class="max-w-xl mx-auto p-6 bg-white dark:bg-gray-800 rounded-lg shadow-lg">
<div class="flex items-center mb-4">
<img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/men/10.jpg" alt="Avatar">
<div class="ml-4">
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">John Doe</h2>
<p class="text-gray-600 dark:text-gray-400">January 1, 2023</p>
</div>
</div>
<h3 class="text-lg font-bold text-gray-800 dark:text-gray-200">Understanding Minimalism in Design</h3>
<img class="w-full h-48 object-cover rounded-md my-4" src="https://picsum.photos/640/360?random=1" alt="Content Image">
<p class="text-gray-700 dark:text-gray-300 mb-4">Minimalism in design is all about simplicity and the use of space. By focusing on fewer elements, designers can create engaging experiences that are not only functional but also aesthetically pleasing. In this blog post, we will explore the principles of minimalism and how they can be applied.</p>
<a href="#" class="inline-block bg-gray-800 text-white rounded-md px-4 py-2 hover:bg-gray-700 dark:bg-gray-300 dark:text-gray-800 dark:hover:bg-gray-400">Read More</a>
</div>관련 구성 요소
Content Display 구성 요소
Glassmorphism으로 스타일링된 반응형 콘텐츠 디스플레이 구성 요소로, 어두운 모드를 지원하는 흐릿한 배경과 반투명 요소를 특징으로 합니다.
Content Display Components 컴포넌트
마이크로 인터랙션, 반응형 디자인, 어두운 테마 지원을 갖춘 단순하고 생생한 콘텐츠 표시 구성 요소로, 블로그 및 콘텐츠 소비에 적합합니다. 이미지에는 picsum.photos를 사용하고 아바타에는 randomuser.me 를 사용합니다.