CCHub Logo CCHub Tailwind Collection
구성 요소 고정 탐색 고정 탐색 컴포넌트 - 다크 모드 파스텔

고정 탐색 컴포넌트 - 다크 모드 파스텔

다크 모드용으로 설계된 고정 탐색 모음으로, 반응형 레이아웃과 파스텔 색상 액센트가 특징입니다. 탐색 모음은 사용자가 스크롤할 때 뷰포트 맨 위에 유지되어 콘텐츠가 많은 페이지의 사용성을 향상시킵니다. 여기에는 로고 또는 사이트 제목에 대한 자리 표시자와 탐색 링크가 포함되어 있으며, 현대적이고 깔끔한 모양을 위해 Tailwind CSS로 스타일이 지정되었습니다.

미리 보기

HTML 코드 

<nav class="dark:bg-gray-900 dark:text-gray-200 bg-gray-100 text-gray-800 shadow-md sticky top-0 z-50">
  <div class="container mx-auto px-4 py-3 flex justify-between items-center">
    <!-- Logo or Site Title -->
    <div class="text-lg font-bold">
      <a href="#" class="dark:text-pink-300 text-purple-600 hover:dark:text-pink-400 hover:text-purple-700">Your Logo</a>
    </div>
    <!-- Navigation Links -->
    <div class="hidden md:flex space-x-6">
      <a href="#" class="hover:dark:text-pink-400 hover:text-purple-700 transition duration-300 ease-in-out">Home</a>
      <a href="#" class="hover:dark:text-pink-400 hover:text-purple-700 transition duration-300 ease-in-out">About</a>
      <a href="#" class="hover:dark:text-pink-400 hover:text-purple-700 transition duration-300 ease-in-out">Services</a>
      <a href="#" class="hover:dark:text-pink-400 hover:text-purple-700 transition duration-300 ease-in-out">Contact</a>
    </div>
    <!-- Mobile Menu Button (Hamburger) -->
    <div class="md:hidden">
      <button class="focus:outline-none">
        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-4 6h4"></path>
        </svg>
      </button>
    </div>
  </div>
  <!-- Mobile Menu (Dropdown - hidden by default) -->
  <div class="md:hidden border-t dark:border-gray-700 border-gray-200">
    <a href="#" class="block py-2 px-4 text-sm hover:dark:bg-gray-700 hover:bg-gray-200">Home</a>
    <a href="#" class="block py-2 px-4 text-sm hover:dark:bg-gray-700 hover:bg-gray-200">About</a>
    <a href="#" class="block py-2 px-4 text-sm hover:dark:bg-gray-700 hover:bg-gray-200">Services</a>
    <a href="#" class="block py-2 px-4 text-sm hover:dark:bg-gray-700 hover:bg-gray-200">Contact</a>
  </div>
</nav>

관련 구성 요소

사이버펑크 스티커 내비게이션

사이버펑크 스타일의 반응형의 끈적끈적한 탐색 모음으로, 금융/은행 인터페이스에 적합한 일몰/따뜻한 톤을 특징으로 합니다. 다크 모드 지원 및 대화형 요소가 포함되어 있습니다.

열다

Sticky Navigation 구성 요소

스큐어모픽 스타일로 설계된 고정 탐색 구성 요소로, Tailwind CSS를 사용하여 반응형 디자인과 어두운 테마를 지원하는 전자 상거래 웹 사이트에 적합합니다.

열다

Sticky Navigation 구성 요소

마켓플레이스에 적합한 간단하고 반응이 빠르며 끈적한 탐색 모음으로, 유사한 색 구성표와 다크 모드 지원을 특징으로 합니다. 호버링에 대한 미묘한 마이크로 상호 작용이 포함됩니다.

열다