CCHub Logo CCHub Tailwind Collection
구성 요소 머리글 다크TriadicSimpleBusinessHeader

다크TriadicSimpleBusinessHeader

비즈니스 웹 사이트를 위한 다크 모드 지원이 있는 반응형 헤더 구성 요소

미리 보기

HTML 코드 

<header class="bg-gray-900 text-gray-300 dark:bg-gray-dark dark:text-gray-light shadow-md">
  <div class="container mx-auto px-6 py-4">
    <div class="flex items-center justify-between">
      <div class="text-xl font-bold text-white dark:text-white">Business Name</div>
      <nav class="space-x-4">
        <a href="#" class="hover:text-white dark:hover:text-white">Home</a>
        <a href="#" class="hover:text-white dark:hover:text-white">About</a>
        <a href="#" class="hover:text-white dark:hover:text-white">Services</a>
        <a href="#" class="hover:text-white dark:hover:text-white">Contact</a>
      </nav>
    </div>
  </div>
</header>

관련 구성 요소

머티리얼 디자인 비즈니스 헤더

Material Design은 비즈니스 웹 사이트를 위한 보색 구성표가 있는 간단한 헤더 구성 요소에 영감을 주었습니다. 어두운 테마를 지원하는 반응형 디자인.

열다

헤더 구성 요소

Neumorphism 스타일의 헤더 구성 요소는 어두운 테마, 반응형 디자인, 여러 대화형 요소를 포함하는 포트폴리오를 위한 것입니다.

열다

헤더 구성 요소

다크 모드를 지원하는 소셜 미디어를 위한 간단하고 반응이 빠른 헤더 구성 요소입니다. 로고, 검색창, 사용자 아바타가 특징입니다. 회색 음영 색 구성표를 사용합니다.

열다