콘텐츠 표시 구성 요소
반응형 소셜 미디어 콘텐츠 디스플레이 구성 요소는 파스텔 색상의 스큐어모픽 스타일로 설계되었으며, 여러 대화형 요소와 다크 모드 지원을 특징으로 합니다.
HTML 코드
<div class="bg-white dark:bg-gray-800 shadow-md rounded-lg p-4 max-w-lg mx-auto">
<div class="flex items-center mb-4">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full shadow-lg">
<div class="ml-4">
<h2 class="text-lg font-semibold text-gray-800 dark:text-white">John Doe</h2>
<p class="text-sm text-gray-600 dark:text-gray-400">@johndoe</p>
</div>
</div>
<p class="text-gray-800 dark:text-gray-300 mb-4">This is an example of skeuomorphic design in a social media component. The layout mimics a real-world interaction device.</p>
<img src="https://picsum.photos/400/200?random=1" alt="Content Image" class="rounded-lg mb-4 shadow-lg">
<div class="flex justify-between items-center">
<button class="bg-pink-300 dark:bg-pink-600 text-gray-800 dark:text-gray-200 px-4 py-2 rounded-lg shadow hover:bg-pink-400 dark:hover:bg-pink-500 transition">Like</button>
<button class="bg-blue-300 dark:bg-blue-600 text-gray-800 dark:text-gray-200 px-4 py-2 rounded-lg shadow hover:bg-blue-400 dark:hover:bg-blue-500 transition">Comment</button>
<button class="bg-green-300 dark:bg-green-600 text-gray-800 dark:text-gray-200 px-4 py-2 rounded-lg shadow hover:bg-green-400 dark:hover:bg-green-500 transition">Share</button>
</div>
</div>관련 구성 요소
Content Display Components 컴포넌트
비즈니스/기업 웹 사이트를 위해 설계된 반응형 콘텐츠 디스플레이 구성 요소로, 다크 모드를 지원하고 생생한 색 구성표를 제공합니다. 여기에는 사용자 아바타, 텍스트 콘텐츠 및 이미지에 대한 섹션이 포함됩니다.
머티리얼 디자인 트라이어딕 대시보드 카드
Material Design 미학을 갖춘 간단하고 반응이 빠른 대시보드 콘텐츠 표시 구성 요소로, 트라이어딕 색 구성표와 다크 모드 지원을 사용합니다. 주요 메트릭 또는 정보를 표시하는 데 적합합니다.