Sticky Navigation 구성 요소

Sticky Navigation Component는 Skeuomorphism 디자인, 반응형 및 어두운 테마를 지원합니다. Tailwind CSS를 사용합니다.

미리 보기

HTML 코드

<nav class="bg-gray-200 dark:bg-gray-800 p-4 shadow-lg sticky top-0 z-50">
  <div class="container mx-auto flex justify-between items-center">
    <div class="text-2xl font-bold text-gray-800 dark:text-white">SkeuoNav</div>
    <ul class="flex space-x-4">
      <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white">Home</a></li>
      <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white">About</a></li>
      <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white">Contact</a></li>
    </ul>
  </div>

</nav>

관련 구성 요소

Sticky Navigation 구성 요소

전자 상거래를 위한 끈적끈적한 탐색 구성 요소로, 생생한 색상의 미니멀리스트/플랫 디자인이 특징입니다. 여기에는 로고, 검색 창, 장바구니 아이콘 및 사용자 아바타가 포함되며 모두 응답성과 어두운 테마 지원을 위해 Tailwind CSS로 스타일이 지정되었습니다.

열다

Sticky Navigation 구성 요소

미니멀한 디자인, 트라이어딕 색 구성표 및 어두운 테마 지원을 갖춘 반응형 고정 탐색 구성 요소로 소셜 미디어 애플리케이션에 적합합니다.

열다

Sticky Navigation 구성 요소

소셜 미디어 인터페이스를 위해 설계된 생생한 색상의 복잡한 스큐어모픽 끈적한 탐색 모음입니다. Tailwind CSS를 사용한 반응형 디자인 및 다크 모드 지원이 포함됩니다. 프로필 이미지, 검색 창, 알림 및 메시징 아이콘을 제공합니다.

열다