CCHub Logo CCHub Tailwind Collection
구성 요소 고정 탐색 Brutalist Sticky Navigation 컴포넌트

Brutalist Sticky Navigation 컴포넌트

브루탈리스트 스티키 네비게이션 바(Brutalist Sticky Navigation Bar) - 다크 모드를 지원하는 블로그를 위한 그레이스케일(Grayscale)

미리 보기

HTML 코드 

<nav class="bg-gray-900 border-b-4 border-gray-100 sticky top-0 z-50 font-mono">
  <div class="container mx-auto px-4 py-6 flex flex-wrap justify-between items-center">
    <div class="text-gray-100 text-4xl font-extrabold uppercase tracking-tighter">
      <a href="#" class="hover:text-gray-400 transition duration-300 ease-in-out">THE BLOG</a>
    </div>
    <div class="block lg:hidden">
      <button class="text-gray-100 focus:outline-none focus:text-gray-400">
        <svg class="h-8 w-8" 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-7 6h7"></path>
        </svg>
      </button>
    </div>
    <div class="w-full lg:w-auto lg:flex flex-grow lg:flex-grow-0 hidden lg:block mt-4 lg:mt-0">
      <ul class="flex flex-col lg:flex-row space-y-4 lg:space-y-0 lg:space-x-8 text-xl font-bold uppercase">
        <li>
          <a href="#" class="block text-gray-100 hover:text-gray-400 border-b-2 border-transparent hover:border-gray-400 pb-1 transition duration-300 ease-in-out">Home</a>
        </li>
        <li>
          <a href="#" class="block text-gray-100 hover:text-gray-400 border-b-2 border-transparent hover:border-gray-400 pb-1 transition duration-300 ease-in-out">Articles</a>
        </li>
        <li>
          <a href="#" class="block text-gray-100 hover:text-gray-400 border-b-2 border-transparent hover:border-gray-400 pb-1 transition duration-300 ease-in-out">About</a>
        </li>
        <li>
          <a href="#" class="block text-gray-100 hover:text-gray-400 border-b-2 border-transparent hover:border-gray-400 pb-1 transition duration-300 ease-in-out">Contact</a>
        </li>
      </ul>
    </div>
  </div>
  <div class="bg-gray-800 border-t-4 border-gray-100 py-3">
    <div class="container mx-auto px-4 flex flex-wrap justify-center lg:justify-between items-center text-gray-300 text-sm">
      <div class="tracking-wide mb-2 lg:mb-0">
        FEATURED TOPICS: <span class="font-bold">TECHNOLOGY / DESIGN / ART / CULTURE</span>
      </div>
      <div class="flex space-x-4">
        <input type="text" placeholder="SEARCH THE VOID..." class="px-3 py-1 bg-gray-700 text-gray-100 placeholder-gray-400 border-2 border-gray-100 focus:outline-none focus:border-gray-400 text-sm">
        <button class="bg-gray-600 text-gray-100 px-4 py-1 border-2 border-gray-100 hover:bg-gray-400 hover:text-gray-900 transition duration-300 ease-in-out">GO</button>
      </div>
    </div>
  </div>
</nav>

관련 구성 요소

Sticky Navigation 구성 요소

Tailwind CSS를 사용하여 Glassmorphism 스타일, 반응형 효과 및 어두운 테마를 지원하는 Sticky Navigation Component.

열다

Sticky Navigation 구성 요소

기업 및 이벤트 웹 사이트에 적합한 깨끗하고 신뢰할 수 있으며 간단한 스티커 탐색 모음입니다. 밝은 액센트 색상, 완전한 응답성 및 다크 모드 지원을 제공하는 흑백 흑백이 특징입니다.

열다

고정 탐색 컴포넌트 - 다크 모드 파스텔

다크 모드용으로 설계된 고정 탐색 모음으로, 반응형 레이아웃과 파스텔 색상 액센트가 특징입니다. 탐색 모음은 사용자가 스크롤할 때 뷰포트 맨 위에 유지되어 콘텐츠가 많은 페이지의 사용성을 향상시킵니다. 여기에는 로고 또는 사이트 제목에 대한 자리 표시자와 탐색 링크가 포함되어 있으며, 현대적이고 깔끔한 모양을 위해 Tailwind CSS로 스타일이 지정되었습니다.

열다