CCHub Logo CCHub Tailwind Collection
구성 요소 고정 탐색 브루탈리즘 끈적끈적한 내비게이션

브루탈리즘 끈적끈적한 내비게이션

Tailwind CSS를 사용하여 반응형 동작과 다크 모드를 지원하는 브루탈리스트 스타일의 고정 탐색 구성 요소입니다. 높은 대비, 대담한 타이포그래피, 그리고 뚜렷하고 생생한 미학이 특징입니다.

미리 보기

HTML 코드 

<header class="bg-yellow-400 text-black sticky top-0 z-50 border-b-4 border-black dark:bg-purple-800 dark:text-white dark:border-white">
  <nav class="container mx-auto px-6 py-4 flex justify-between items-center">
    <div class="text-2xl font-bold uppercase tracking-tighter">Brutal Nav</div>
    <div class="hidden md:flex space-x-6">
      <a href="#" class="text-black hover:underline dark:text-white">Home</a>
      <a href="#" class="text-black hover:underline dark:text-white">About</a>
      <a href="#" class="text-black hover:underline dark:text-white">Services</a>
      <a href="#" class="text-black hover:underline dark:text-white">Contact</a>
    </div>
    <button class="md:hidden text-black dark: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 12h16m-4 6h4"></path></svg>
    </button>
  </nav>
</header>

관련 구성 요소

Sticky Navigation 구성 요소

깨끗하고 신뢰할 수 있으며 반응이 빠른 끈적한 탐색 모음은 기업/전문가용으로 파스텔 색상으로 설계되었으며 날씨/기후 응용 분야에 적합합니다. 다크 모드 지원이 포함됩니다.

열다

Sticky Navigation 구성 요소

3D 디자인 미학과 숲/녹색 색상 팔레트를 갖춘 복잡하고 반응이 빠른 고정 탐색 구성 요소로, 의료/의료 응용 분야에 적합합니다. 다크 모드 지원 및 대화형 요소가 포함됩니다.

열다

Sticky Navigation 구성 요소

미니멀한 디자인, 트라이어딕 색 구성표 및 어두운 테마 지원을 갖춘 반응형 고정 탐색 구성 요소로 소셜 미디어 애플리케이션에 적합합니다.

열다