CCHub Logo CCHub Tailwind Collection
구성 요소 Navigation Enhancement 구성 요소 Navigation Enhancement Components 구성 요소

Navigation Enhancement Components 구성 요소

기업 웹 사이트를 위한 복잡하고 잔인한 스타일의 탐색 구성 요소로, 유사한 색 구성표, 반응형 디자인 및 다크 모드 지원을 제공합니다. 특이한 레이아웃과 높은 대비가 특징입니다.

미리 보기

HTML 코드 

<nav class="bg-blue-200 dark:bg-gray-900 p-4 shadow-lg">
  <div class="container mx-auto flex justify-between items-center flex-wrap">
    <div class="text-xl font-bold text-blue-800 dark:text-blue-200 uppercase tracking-widest">Company Name</div>
    <div class="block lg:hidden">
      <button id="nav-toggle" class="flex items-center px-3 py-2 border rounded text-blue-800 border-blue-800 dark:text-blue-200 dark:border-blue-200">
        <svg class="fill-current h-3 w-3" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>Menu</title><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v15z"/></svg>
      </button>
    </div>
    <div class="w-full block flex-grow lg:flex lg:items-center lg:w-auto hidden lg:block" id="nav-content">
      <ul class="lg:flex items-center justify-end flex-1">
        <li class="mr-6 my-2 lg:my-0">
          <a href="#" class="text-blue-800 dark:text-blue-200 hover:text-blue-600 dark:hover:text-blue-400 text-lg font-bold uppercase">Home</a>
        </li>
        <li class="mr-6 my-2 lg:my-0">
          <a href="#" class="text-blue-800 dark:text-blue-200 hover:text-blue-600 dark:hover:text-blue-400 text-lg font-bold uppercase">About</a>
        </li>
        <li class="mr-6 my-2 lg:my-0">
          <a href="#" class="text-blue-800 dark:text-blue-200 hover:text-blue-600 dark:hover:text-blue-400 text-lg font-bold uppercase">Services</a>
        </li>
        <li class="mr-6 my-2 lg:my-0">
          <a href="#" class="text-blue-800 dark:text-blue-200 hover:text-blue-600 dark:hover:text-blue-400 text-lg font-bold uppercase">Contact</a>
        </li>
         <li class="my-2 lg:my-0">
          <div class="relative">
            <button class="bg-blue-800 dark:bg-blue-200 text-blue-200 dark:text-blue-800 font-bold uppercase py-2 px-4 border border-blue-800 dark:border-blue-200 rounded">
              Dropdown
            </button>
            <div class="absolute right-0 mt-2 w-48 bg-blue-200 dark:bg-gray-700 rounded shadow-lg py-2 z-10 hidden">
              <a href="#" class="block px-4 py-2 text-blue-800 dark:text-blue-200 hover:bg-blue-300 dark:hover:bg-gray-600">Link 1</a>
              <a href="#" class="block px-4 py-2 text-blue-800 dark:text-blue-200 hover:bg-blue-300 dark:hover:bg-gray-600">Link 2</a>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</nav>

관련 구성 요소

자연 Inspired_Entertainment_Navigation

엔터테인먼트/미디어 플랫폼을 위한 복잡하고 자연에서 영감을 받은 탐색 구성 요소로, 흐르는 선과 사탕/달콤한 색 구성표가 특징입니다. 다크 모드 지원으로 완벽하게 반응합니다.

열다

Luxury_Vibrant_Travel_Navigation

여행 및 관광 웹사이트를 위해 설계된 복잡하고 고급스러우며 생동감 넘치는 내비게이션 구성 요소로, 정교한 타이포그래피, 채도가 높은 색상, 다크 모드 지원을 통한 완전한 응답성을 특징으로 합니다.

열다

Playful_Consulting_Navigation_Component

컨설팅/서비스를 위한 단순하고 유쾌하며 유쾌한 탐색 구성 요소로, 둥근 요소, 밝은 액센트가 있는 단색 색 구성표, 다크 모드 지원을 통한 완전한 응답성을 특징으로 합니다.

열다