CCHub Logo CCHub Tailwind Collection
구성 요소 탐색 구성 요소 Navigation Components 컴포넌트

Navigation Components 컴포넌트

대시보드를 위한 복잡하고 반응이 빠른 탐색 구성 요소로, 마이크로 인터랙션과 유사한 색 구성표를 특징으로 하며 다크 모드를 지원합니다. 스타일링을 위해 Tailwind CSS를 활용하고 JavaScript에 의존하지 않고 대화형 요소를 포함합니다.

미리 보기

HTML 코드 

<nav class="bg-gradient-to-r from-teal-400 via-emerald-500 to-cyan-500 dark:from-teal-800 dark:via-emerald-900 dark:to-cyan-900 p-4 shadow-lg">
  <div class="container mx-auto flex justify-between items-center">
    <div class="text-white text-2xl font-bold">Dashboard</div>
    <div class="hidden md:flex space-x-6">
      <a href="#" class="text-white hover:text-gray-200 transition duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-105 relative group">
        Home
        <span class="absolute bottom-0 left-0 w-full h-0.5 bg-white scale-x-0 group-hover:scale-x-100 transition-transform duration-300 ease-out"></span>
      </a>
      <a href="#" class="text-white hover:text-gray-200 transition duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-105 relative group">
        Analytics
        <span class="absolute bottom-0 left-0 w-full h-0.5 bg-white scale-x-0 group-hover:scale-x-100 transition-transform duration-300 ease-out"></span>
      </a>
      <a href="#" class="text-white hover:text-gray-200 transition duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-105 relative group">
        Reports
        <span class="absolute bottom-0 left-0 w-full h-0.5 bg-white scale-x-0 group-hover:scale-x-100 transition-transform duration-300 ease-out"></span>
      </a>
      <a href="#" class="text-white hover:text-gray-200 transition duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-105 relative group">
        Settings
        <span class="absolute bottom-0 left-0 w-full h-0.5 bg-white scale-x-0 group-hover:scale-x-100 transition-transform duration-300 ease-out"></span>
      </a>
    </div>
    <div class="md:hidden">
      <button class="text-white 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 12h16M4 18h16"></path>
        </svg>
      </button>
    </div>
  </div>
  <div class="md:hidden mt-4">
    <a href="#" class="block text-white hover:text-gray-200 py-2 transition duration-300 ease-in-out transform hover:translate-x-2">Home</a>
    <a href="#" class="block text-white hover:text-gray-200 py-2 transition duration-300 ease-in-out transform hover:translate-x-2">Analytics</a>
    <a href="#" class="block text-white hover:text-gray-200 py-2 transition duration-300 ease-in-out transform hover:translate-x-2">Reports</a>
    <a href="#" class="block text-white hover:text-gray-200 py-2 transition duration-300 ease-in-out transform hover:translate-x-2">Settings</a>
  </div>
</nav>

관련 구성 요소

구인공광고내비게이션

구인 게시판 또는 경력 개발 플랫폼을 위한 간단하고 반응이 빠른 탐색 구성 요소로, 바다/파란색 톤, 호버링의 마이크로 인터랙션, 다크 모드 지원을 제공합니다.

열다

브루탈리즘 소셜 내비게이션

보색이 있는 소셜 미디어를 위한 단순하고 야만적인 탐색 구성 요소입니다. 반응형 디자인과 다크 모드 지원이 포함됩니다.

열다

Brutalism Navigation 구성 요소

브루탈리즘 스타일로 디자인된 반응형 탐색 구성 요소로, 단색 색 구성표를 보여 주며 포트폴리오 웹 사이트에 이상적입니다. 기능에는 고대비의 대담한 레이아웃, Tailwind CSS를 사용한 다크 모드 지원, 드롭다운 또는 버튼 링크와 같은 대화형 요소가 포함됩니다.

열다