CCHub Logo CCHub Tailwind Collection
구성 요소 Navigation Enhancement 구성 요소 Navigation Enhancement 구성 요소

Navigation Enhancement 구성 요소

브루탈리즘 스타일로 디자인된 탐색 향상 구성 요소입니다. 반응형 효과, 어두운 테마 지원 및 자리 표시자 이미지를 제공합니다.

미리 보기

HTML 코드 

<nav class="bg-white dark:bg-gray-900 p-6 text-center">
  <div class="container mx-auto flex flex-col md:flex-row justify-between items-center">
    <div class="flex items-center space-x-4">
      <img src="https://picsum.photos/50" alt="Logo" class="rounded-full border-2 border-black dark:border-white">
      <h1 class="text-3xl font-bold text-black dark:text-white">Brutalist Navigation</h1>
    </div>
    <ul class="flex space-x-6 mt-4 md:mt-0">
      <li><a href="#" class="text-lg text-black dark:text-white hover:text-gray-700 dark:hover:text-gray-300">Home</a></li>
      <li><a href="#" class="text-lg text-black dark:text-white hover:text-gray-700 dark:hover:text-gray-300">About</a></li>
      <li><a href="#" class="text-lg text-black dark:text-white hover:text-gray-700 dark:hover:text-gray-300">Services</a></li>
      <li><a href="#" class="text-lg text-black dark:text-white hover:text-gray-700 dark:hover:text-gray-300">Contact</a></li>
    </ul>
  </div>
  <div class="mt-8">
    <h2 class="text-xl text-black dark:text-white">Featured</h2>
    <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-4">
      <div class="p-4 bg-gray-200 dark:bg-gray-800 rounded-lg shadow-lg">
        <img src="https://picsum.photos/200/100" alt="Placeholder Image 1" class="w-full h-32 object-cover rounded-lg mb-2">
        <p class="text-black dark:text-white">Raw and bold imagery.</p>
      </div>
      <div class="p-4 bg-gray-200 dark:bg-gray-800 rounded-lg shadow-lg">
        <img src="https://picsum.photos/200/100?random=1" alt="Placeholder Image 2" class="w-full h-32 object-cover rounded-lg mb-2">
        <p class="text-black dark:text-white">Unusual and eye-catching layouts.</p>
      </div>
      <div class="p-4 bg-gray-200 dark:bg-gray-800 rounded-lg shadow-lg">
        <img src="https://picsum.photos/200/100?random=2" alt="Placeholder Image 3" class="w-full h-32 object-cover rounded-lg mb-2">
        <p class="text-black dark:text-white">High contrast designs.</p>
      </div>
    </div>
  </div>
</nav>

관련 구성 요소

자연 Inspired_Entertainment_Navigation

엔터테인먼트/미디어 플랫폼을 위한 복잡하고 자연에서 영감을 받은 탐색 구성 요소로, 흐르는 선과 사탕/달콤한 색 구성표가 특징입니다. 다크 모드 지원으로 완벽하게 반응합니다.

열다

Navigation Enhancement Components 구성 요소

기업 웹 사이트를 위한 복잡하고 잔인한 스타일의 탐색 구성 요소로, 유사한 색 구성표, 반응형 디자인 및 다크 모드 지원을 제공합니다. 특이한 레이아웃과 높은 대비가 특징입니다.

열다

Navigation Enhancement 구성 요소

Tailwind CSS를 사용하여 머티리얼 디자인 컨셉으로 디자인된 반응형 탐색 구성요소로, 어두운 테마 지원 및 플레이스홀더 이미지를 제공합니다.

열다