다크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>

관련 구성 요소

레트로 빈티지 헤더 구성 요소

레트로/빈티지 디자인 스타일의 반응형 헤더 구성 요소로, 80년대와 90년대에서 영감을 받은 다크 모드와 향수를 불러일으키는 미학을 지원합니다.

열다

헤더 구성 요소

마이크로 인터랙션과 생생한 색상이 있는 대시보드를 위한 반응형 헤더 구성 요소로, 어두운 테마를 지원합니다.

열다

E-commerce Header 구성 요소

머티리얼 디자인 원칙과 함께 Tailwind CSS를 사용하여 구축된 반응형 전자 상거래 헤더 구성 요소입니다. 단색 색 구성표(파란색 음영), 검색 기능, 탐색 메뉴, 장바구니 및 사용자 프로필이 특징입니다. 헤더에는 그림자와 같은 깊이 효과가 포함되며 어두운 모드를 지원합니다. 이 구성 요소는 모바일 햄버거 메뉴로 완벽하게 반응합니다.

열다