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>

관련 구성 요소

레트로 전자 상거래 탐색 모음

전자 상거래를 위한 레트로/빈티지 스타일의 그레이스케일 탐색 구성 요소로, 호버 및 드롭다운과 같은 대화형 요소를 통해 중간 정도의 복잡성을 특징으로 합니다. 반응형이며 Tailwind CSS를 사용하는 다크 모드 지원이 포함됩니다.

열다

Navigation 구성 요소

Microinteractions로 디자인된 반응형 탐색 구성 요소로, 사용자 작업을 기반으로 매력적인 애니메이션을 제공하여 밝은 테마와 어두운 테마를 모두 지원합니다. 구성 요소에는 프로필 아바타, 탐색 링크 및 호버 효과가 포함됩니다.

열다

Navigation Components 컴포넌트

대시보드용 레트로 빈티지 탐색 구성 요소로, 보색, 반응형 디자인, Tailwind CSS를 사용하는 어두운 테마 지원이 있는 복잡한 레이아웃을 특징으로 합니다. 여기에는 로고, 탐색 링크, 검색 창 및 사용자 프로필 정보가 포함됩니다.

열다