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

Navigation Components 컴포넌트

생생한 색상과 미시적 상호작용을 가진 반응형 탐색 구성 요소로, 포트폴리오를 위해 설계되었습니다.

미리 보기

HTML 코드 

<nav class="bg-gradient-to-r from-purple-500 via-pink-500 to-red-500 dark:from-purple-800 dark:via-pink-800 dark:to-red-800 p-4 shadow-lg">
  <div class="container mx-auto flex justify-between items-center">
    <a href="#" class="text-white text-2xl font-bold transform hover:scale-105 transition-transform duration-300">My Portfolio</a>
    <ul class="flex space-x-6">
      <li><a href="#" class="text-white hover:text-yellow-300 dark:hover:text-yellow-200 transition-colors duration-200 relative group">
        Home
        <span class="absolute left-0 bottom-0 w-0 h-0.5 bg-yellow-300 dark:bg-yellow-200 transition-all duration-300 group-hover:w-full"></span>
      </a></li>
      <li><a href="#" class="text-white hover:text-yellow-300 dark:hover:text-yellow-200 transition-colors duration-200 relative group">
        Work
        <span class="absolute left-0 bottom-0 w-0 h-0.5 bg-yellow-300 dark:bg-yellow-200 transition-all duration-300 group-hover:w-full"></span>
      </a></li>
      <li><a href="#" class="text-white hover:text-yellow-300 dark:hover:text-yellow-200 transition-colors duration-200 relative group">
        About
        <span class="absolute left-0 bottom-0 w-0 h-0.5 bg-yellow-300 dark:bg-yellow-200 transition-all duration-300 group-hover:w-full"></span>
      </a></li>
      <li><a href="#" class="text-white hover:text-yellow-300 dark:hover:text-yellow-200 transition-colors duration-200 relative group">
        Contact
        <span class="absolute left-0 bottom-0 w-0 h-0.5 bg-yellow-300 dark:bg-yellow-200 transition-all duration-300 group-hover:w-full"></span>
      </a></li>
    </ul>
  </div>
</nav>

관련 구성 요소

네온 글로우 정부 항법

정부/공공 서비스를 위한 반응형 내비게이션 구성 요소로, 네온 불빛, 사탕처럼 달콤한 색 구성표, 다크 모드 지원을 제공합니다. 생생한 조명 효과와 함께 밝고 빛나는 요소가 특징입니다.

열다

탐색 구성 요소

전자 상거래 웹 사이트를 위한 미니멀한 탐색 구성 요소로, 로고, 검색 창, 탐색 링크, 장바구니 아이콘 및 Tailwind CSS를 사용하는 사용자 아바타를 특징으로 합니다. 이 구성 요소는 반응형 디자인과 다크 모드를 지원합니다.

열다

Navigation Components 컴포넌트

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

열다