CCHub Logo CCHub Tailwind Collection
구성 요소 고정 탐색 Sticky Navigation 구성 요소

Sticky Navigation 구성 요소

기업 및 이벤트 웹 사이트에 적합한 깨끗하고 신뢰할 수 있으며 간단한 스티커 탐색 모음입니다. 밝은 액센트 색상, 완전한 응답성 및 다크 모드 지원을 제공하는 흑백 흑백이 특징입니다.

미리 보기

HTML 코드 

<header class="bg-white shadow-md dark:bg-gray-800 sticky top-0 z-50">
  <nav class="container mx-auto px-4 py-3 flex items-center justify-between">
    <a href="#" class="text-2xl font-bold text-gray-900 dark:text-white flex items-center space-x-2">
      <svg class="h-8 w-8 text-indigo-600 dark:text-indigo-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-3-3H8a3 3 0 00-3 3v2h5M10 2L3 6v10l7 4 7-4V6l-7-4zm0 0a2 2 0 100 4 2 2 0 000-4z" />
      </svg>
      <span>EventName</span>
    </a>

    <div class="hidden md:flex space-x-8">
      <a href="#" class="text-gray-600 hover:text-indigo-600 dark:text-gray-300 dark:hover:text-indigo-400 text-lg font-medium transition duration-300 ease-in-out">Schedule</a>
      <a href="#" class="text-gray-600 hover:text-indigo-600 dark:text-gray-300 dark:hover:text-indigo-400 text-lg font-medium transition duration-300 ease-in-out">Speakers</a>
      <a href="#" class="text-gray-600 hover:text-indigo-600 dark:text-gray-300 dark:hover:text-indigo-400 text-lg font-medium transition duration-300 ease-in-out">Venue</a>
      <a href="#" class="text-gray-600 hover:text-indigo-600 dark:text-gray-300 dark:hover:text-indigo-400 text-lg font-medium transition duration-300 ease-in-out">Sponsors</a>
      <a href="#" class="text-indigo-600 dark:text-indigo-400 border border-indigo-600 dark:border-indigo-400 px-5 py-2 rounded-lg font-semibold hover:bg-indigo-600 hover:text-white dark:hover:bg-indigo-400 dark:hover:text-gray-900 transition duration-300 ease-in-out">Register</a>
    </div>

    <div class="md:hidden">
      <button type="button" class="text-gray-500 hover:text-gray-700 dark:text-gray-300 dark:hover:text-white focus:outline-none focus:text-gray-700 dark:focus:text-white" aria-label="Toggle menu">
        <svg class="h-7 w-7" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7" />
        </svg>
      </button>
    </div>
  </nav>
</header>

관련 구성 요소

Sticky Navigation 구성 요소

소셜 미디어 인터페이스에 적합한 브루탈리즘 스타일의 끈적끈적한 탐색 구성 요소로, 대담한 고대비 디자인과 다크 모드 지원을 특징으로 합니다.

열다

Sticky Navigation 구성 요소

뉴스/저널리즘 웹사이트용으로 설계된 스큐어모픽 스티커 내비게이션 구성 요소로, 밝은 액센트 색상, 응답성 및 다크 모드 지원이 있는 흑백 색 구성표를 특징으로 합니다. 실제 버튼과 오목한 요소를 모방합니다.

열다

브루탈리즘 끈적끈적한 내비게이션

Tailwind CSS를 사용하여 반응형 동작과 다크 모드를 지원하는 브루탈리스트 스타일의 고정 탐색 구성 요소입니다. 높은 대비, 대담한 타이포그래피, 그리고 뚜렷하고 생생한 미학이 특징입니다.

열다