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

Sticky Navigation 구성 요소

전자 상거래를 위한 다크 모드 고정 탐색 구성 요소로, 보색 구성표와 기본 레이아웃을 사용합니다.

미리 보기

HTML 코드 

<nav class="bg-gray-900 sticky top-0 shadow-lg">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="flex justify-between h-16">
      <div class="flex">
        <div class="flex-shrink-0">
          <img class="h-8" src="https://picsum.photos/50/50" alt="Logo">
        </div>
        <div class="hidden md:flex md:space-x-8 ml-10">
          <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Home</a>
          <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Shop</a>
          <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">About</a>
          <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Contact</a>
        </div>
      </div>
      <div class="flex items-center">
        <button class="text-gray-300 hover:bg-gray-700 hover:text-white p-1 rounded-full">
          <img class="h-8 w-8 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Profile">
        </button>
      </div>
    </div>
  </div>
</nav>

관련 구성 요소

Sticky Navigation 구성 요소

마이크로 인터랙션과 트라이어드 색 구성표로 설계된 반응형 고정 탐색 모음으로, 블로그 및 콘텐츠 소비에 적합합니다.

열다

Sticky Navigation 컴포넌트 - Neumorphism

Neumorphism 디자인, 보색 구성표 및 어두운 테마 지원을 갖춘 반응형 고정 탐색 구성 요소로, 포트폴리오 웹 사이트에 적합합니다. 다크 모드 클래스와 함께 Tailwind CSS를 사용하고 Neumorphism 효과에 대한 미묘한 그림자를 포함합니다.

열다

Sticky Navigation 구성 요소

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

열다