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>

관련 구성 요소

레트로내비

레트로/빈티지 디자인, 생생한 색 구성표 및 최소한의 요소를 갖춘 단순하고 반응이 빠른 다크 모드 호환 탐색 구성 요소로 전자 상거래 웹 사이트에 적합합니다.

열다

Navigation 구성 요소

다크 모드 UI용으로 설계된 반응형 탐색 구성 요소로, 링크, 드롭다운 및 로고가 특징이며, 모두 Tailwind CSS로 스타일이 지정되었습니다.

열다

Brutalist E-commerce Navigation 구성 요소

Tailwind CSS를 사용하는 복잡하고 잔인한 전자 상거래 탐색 구성 요소로, 고대비(검정/흰색)의 삼극 색 구성표(노란색, 청록색, 자홍색), CSS 전용 메가 메뉴, CSS 전용 검색 표시, CSS 전용 반응형 모바일 메뉴 및 다크 모드 지원을 특징으로 합니다. HTML 전용, JavaScript 없음.

열다