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>

관련 구성 요소

Navigation Enhancement 구성 요소

Tailwind CSS를 사용하여 포트폴리오를 보여주기 위한 간단한 다크 모드 탐색 개선 구성 요소입니다.

열다

ArtDeco_Neon_Photography_Navigation

사진 포트폴리오를 위한 간단하고 반응이 빠른 탐색 구성 요소로, 아르데코에서 영감을 받은 기하학적 패턴과 다크 모드를 지원하는 생생한 네온/일렉트릭 색상 구성표를 특징으로 합니다.

열다

Playful_Consulting_Navigation_Component

컨설팅/서비스를 위한 단순하고 유쾌하며 유쾌한 탐색 구성 요소로, 둥근 요소, 밝은 액센트가 있는 단색 색 구성표, 다크 모드 지원을 통한 완전한 응답성을 특징으로 합니다.

열다