구성 요소 컨테이너 컨테이너 구성 요소

컨테이너 구성 요소

단순한 회색조 디자인의 블로그 콘텐츠를 위한 반응형 다크 모드 컨테이너입니다.

미리 보기

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를 사용하는 다크 모드를 지원하는 반응형 컨테이너 구성 요소입니다.

열다

컨테이너 구성 요소

사용자 동작에 반응하는 매력적인 애니메이션을 특징으로 하고, 다크 모드를 지원하며, Tailwind CSS를 사용하는 마이크로 인터랙션이 있는 반응형 컨테이너 컴포넌트입니다.

열다