CCHub Logo CCHub Tailwind Collection
구성 요소 레이아웃 구성 요소 다크 모드 레이아웃 구성 요소

다크 모드 레이아웃 구성 요소

Tailwind CSS를 사용하여 다크 모드를 지원하는 반응형 레이아웃 구성 요소입니다. 간단한 머리글, 콘텐츠 영역 및 바닥글이 특징입니다. 다크 모드는 Tailwind 클래스의 'dark:' 접두사에 의해 처리됩니다.

미리 보기

HTML 코드 

<div class="min-h-screen bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-white">
  <header class="bg-white dark:bg-gray-800 shadow">
    <div class="container mx-auto px-4 py-4">
      <h1 class="text-xl font-bold">My Website</h1>
    </div>
  </header>
  <main class="container mx-auto px-4 py-8">
    <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow">
      <h2 class="text-lg font-semibold mb-4">Welcome</h2>
      <p>This is a basic layout component with dark mode.</p>
    </div>
  </main>
  <footer class="bg-white dark:bg-gray-800 shadow mt-8">
    <div class="container mx-auto px-4 py-4 text-center">
      <p>&copy; 2023 My Website</p>
    </div>
  </footer>
</div>

관련 구성 요소

Layout Components 컴포넌트

실제 세계를 모방한 스큐어모픽 스타일로 디자인된 레이아웃 구성 요소로, Tailwind CSS를 사용하여 반응형 요소와 어두운 테마를 지원합니다.

열다

포트폴리오 레이아웃

보색, 다크 모드 지원 및 최소 요소와의 미시적 상호 작용에 중점을 둔 포트폴리오를 위한 간단한 반응형 레이아웃 구성 요소입니다.

열다

레트로비즈니스레이아웃

비즈니스 웹사이트를 위한 레트로/빈티지 테마의 레이아웃 구성 요소로, 그레이스케일 색 구성표와 심플한 디자인을 특징으로 합니다. 반응이 빠르며 다크 모드 지원이 포함됩니다.

열다