Content Display 구성 요소
반응형 레이아웃과 어두운 테마를 지원하는 glassmorphism 디자인을 특징으로 하는 콘텐츠 표시 구성 요소입니다.
HTML 코드
<div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
<div class="bg-white dark:bg-gray-800 bg-opacity-30 backdrop-blur-md rounded-lg shadow-lg p-6 max-w-lg">
<h2 class="text-2xl font-bold text-gray-800 dark:text-white">Featured Content</h2>
<p class="text-gray-700 dark:text-gray-300 mt-2">This is a content display component that utilizes glassmorphism design principles. It features a blurred background and translucent elements for a modern look.</p>
<div class="mt-4">
<img src="https://picsum.photos/300/200" alt="Random Image" class="rounded-lg" />
</div>
<div class="mt-4 flex items-center">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full border-2 border-white dark:border-gray-800 mr-3" />
<span class="text-gray-600 dark:text-gray-300">John Doe</span>
</div>
</div>
</div>관련 구성 요소
레트로 소셜 미디어 엽서
레트로/빈티지 80년대/90년대 미학을 가미한 반응형 소셜 미디어 엽서 구성 요소로, 푸시아 액센트가 있는 유사한 색 구성표(Sky, Teal, Purple)를 사용합니다. 다크 모드 지원 및 대화형 호버 효과가 특징입니다. 콘텐츠에는 사용자 아바타, 사용자 이름, 타임스탬프, 텍스트 게시물, 이미지 및 작업 버튼(예: 댓글, 공유)이 포함됩니다. Tailwind CSS로 제작되었습니다.
Content Display Components 컴포넌트
Tailwind CSS를 사용하여 마이크로 인터랙션, 반응형 디자인 및 어두운 테마를 지원하는 콘텐츠 표시 구성 요소입니다. 미묘한 Hover 효과를 제공하고 대화형 요소에 애니메이션을 집중시킵니다.