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>

관련 구성 요소

Navigation Components 컴포넌트

어두운 테마, 반응형 디자인, JavaScript가 없는 탐색 구성 요소입니다.

열다

레트로포트폴리오내비게이션

Retro/Vintage Navigation Component for Portfolio with Pastel color scheme, responsive, and dark mode support. 레트로/빈티지 내비게이션 컴포넌트(Retro/Vintage Navigation Component for Portfolio with Pastel color scheme, responsive, and dark mode) 지원.

열다

Portfolio Navigation 구성 요소

포트폴리오 웹 사이트를 위한 반응형 탐색 구성 요소로, 일몰/따뜻한 톤의 종이/인쇄 미학에서 영감을 받았습니다. 다크 모드 지원과 작업 전시에 적합한 깔끔한 레이아웃이 포함되어 있습니다.

열다