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

컨테이너 구성 요소

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

미리 보기

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>

관련 구성 요소

Brutalist 컨테이너 구성 요소

브루탈리즘 스타일과 생생한 색 구성표로 디자인된 단순하지만 대담한 컨테이너 구성 요소로, 비즈니스 또는 기업 웹 사이트에 적합하며 Tailwind CSS를 사용하여 다크 모드를 지원합니다.

열다

컨테이너 구성 요소

비즈니스/기업 웹 사이트에 적합한 3D 스타일의 컨테이너 구성 요소로, 생생한 색상과 대화형 요소, 어두운 테마를 지원하는 반응형 디자인을 특징으로 합니다.

열다

소셜 미디어 컨테이너

생생한 색상, 매력적인 마이크로 인터랙션, 어두운 테마 지원을 갖춘 반응형 컨테이너 구성 요소로, 소셜 미디어 인터페이스에 적합합니다. 기능에는 미묘한 호버 효과와 깔끔한 레이아웃이 포함됩니다.

열다