CCHub Logo CCHub Tailwind Collection
구성 요소 고정 탐색 Sticky Navigation 컴포넌트 - Neumorphism

Sticky Navigation 컴포넌트 - Neumorphism

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

미리 보기

HTML 코드 

<nav class="sticky top-0 z-10 bg-gray-200 dark:bg-gray-800 p-4 transition-all duration-300 ease-in-out shadow-neumorphism-light dark:shadow-neumorphism-dark">
  <div class="container mx-auto flex justify-between items-center">
    <div class="text-gray-800 dark:text-white text-lg font-bold">Your Logo</div>
    <ul class="flex space-x-4">
      <li>
        <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 transition duration-300 ease-in-out">Home</a>
      </li>
      <li>
        <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 transition duration-300 ease-in-out">About</a>
      </li>
      <li>
        <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 transition duration-300 ease-in-out">Portfolio</a>
      </li>
      <li>
        <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 transition duration-300 ease-in-out">Contact</a>
      </li>
    </ul>
  </div>
</nav>

<style>
.shadow-neumorphism-light {
  box-shadow: 7px 7px 15px #a7a7a7, -7px -7px 15px #ffffff;
}

.dark .shadow-neumorphism-dark {
  box-shadow: 7px 7px 15px #1a1a1a, -7px -7px 15px #545454;
}
</style>

관련 구성 요소

Sticky Navigation 구성 요소

네온/글로우 효과가 있는 반응형의 끈적한 탐색 모음으로 교육 또는 학습 플랫폼에 적합합니다. 보라색/보라색 색 구성표, 다크 모드 지원, 대화형 메뉴 항목을 제공합니다.

열다

Sticky Navigation 구성 요소

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

열다

Sticky Navigation 구성 요소

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

열다