HTML 코드
<div class="container mx-auto p-4 dark:bg-gray-900 bg-white text-gray-800 dark:text-gray-200 rounded-lg shadow-lg">
<h1 class="text-2xl font-bold mb-4 text-center">Blog Post Title</h1>
<img src="https://picsum.photos/seed/unsplash/800/400" alt="Blog Post Image" class="w-full h-auto rounded-md mb-4">
<div class="prose dark:prose-invert max-w-none">
<p>This is an example of a blog post content paragraph within the container. It demonstrates a simple layout for reading and content consumption in dark mode.</p>
<p>The container is designed to be responsive and uses Tailwind CSS classes for styling, including dark mode support with the <code class="language-text">dark:</code> prefix.</p>
<p>Grayscale colors are used for a clean and minimalist look.</p>
</div>
</div>
관련 구성 요소
Glassmorphism 포트폴리오 컨테이너
Tailwind CSS를 사용하는 포트폴리오 웹 사이트에 맞게 조정된 다크 모드 지원 기능이 있는 반응형 Glassmorphism 컨테이너 구성 요소입니다. 젖빛 유리 효과, 트라이어드 색 구성표, 여러 인터랙티브 요소가 특징이며 이미지에는 picsum.photos를 사용하고 아바타에는 randomuser.me 를 사용합니다.
컨테이너 구성 요소
사용자 동작에 반응하는 매력적인 애니메이션을 특징으로 하고, 다크 모드를 지원하며, Tailwind CSS를 사용하는 마이크로 인터랙션이 있는 반응형 컨테이너 컴포넌트입니다.