CCHub Logo CCHub Tailwind Collection
구성 요소 항행 Navigation 구성 요소

Navigation 구성 요소

포트폴리오 웹 사이트를 위한 간단하고 반응이 빠른 탐색 구성 요소로, 다크 모드 UI를 제공합니다. 이 디자인은 보색을 사용하며 다양한 화면 크기에서 가독성과 미적 매력을 보장합니다.

미리 보기

HTML 코드 

<nav class="bg-gray-900 p-4 text-white">
  <div class="container mx-auto flex justify-between items-center">
    <a href="#" class="text-lg font-bold text-teal-400">MyPortfolio</a>
    <ul class="flex space-x-4">
      <li><a href="#about" class="hover:text-teal-400">About</a></li>
      <li><a href="#projects" class="hover:text-teal-400">Projects</a></li>
      <li><a href="#contact" class="hover:text-teal-400">Contact</a></li>
    </ul>
  </div>
</nav>

관련 구성 요소

Responsive Navigation 구성 요소

Responsive Navigation Component with Microinteractions, Grayscale color scheme, and Simple complexity(마이크로인터랙션, 그레이스케일 색 구성표, 단순 복잡성).

열다

브루탈리즘 전자상거래 내비게이션

전자 상거래를 위한 브루탈리즘 스타일의 탐색 구성 요소로, Tailwind CSS로 구축된 회색조 색 구성표, 복잡한 레이아웃, 응답성 및 다크 모드 지원을 특징으로 합니다.

열다

소셜 미디어 탐색 구성 요소

소셜 미디어 인터페이스용으로 설계된 반응형 탐색 구성 요소로, Tailwind CSS와 함께 어두운 테마를 사용하여 머티리얼 디자인 미학을 특징으로 합니다.

열다