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>

관련 구성 요소

소셜 미디어 레이아웃 구성 요소

Tailwind CSS를 사용하여 생생한 색상과 어두운 테마를 지원하는 반응형의 복잡한 3D 스타일 소셜 미디어 레이아웃 구성 요소입니다. 여기에는 로고와 탐색이 있는 헤더, 게시물에 대한 동적 카드가 있는 기본 콘텐츠 영역, 사용자 프로필 및 인기 주제에 대한 사이드바가 포함됩니다. 각 요소는 깊이와 상호 작용 느낌을 줄 수 있도록 스타일이 지정되어 있습니다.

열다

미니멀리스트 블로그 레이아웃 구성 요소

Minimalist Blog Layout Component with Monochromatic Color Scheme은 콘텐츠 소비를 위한 반응형 및 어두운 테마 지원을 제공합니다.

열다

다크 모드 포트폴리오 레이아웃

포트폴리오를 위한 다크 모드 반응형 레이아웃 구성 요소로, Tailwind CSS를 사용하는 단색 색 구성표를 특징으로 합니다. 콘텐츠에 대한 자리 표시자를 포함하며 JavaScript 없이 중간 정도의 복잡성을 위해 설계되었습니다.

열다