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

Navigation Enhancement 구성 요소

브루탈리즘(Brutalism) 미학으로 디자인된 내비게이션 컴포넌트로, 대담한 디자인, 높은 대비, 특이한 레이아웃을 특징으로 합니다. 반응형 효과가 포함되어 있으며 CSS로 어두운 테마를 지원합니다.

미리 보기

HTML 코드 

<nav class="bg-white dark:bg-gray-800 p-6">
  <div class="container mx-auto flex justify-between items-center">
    <div class="flex items-center space-x-4">
      <img src="https://picsum.photos/50/50" alt="Logo" class="h-10 w-10 rounded-full border-2 border-black dark:border-white">
      <h1 class="text-2xl font-bold text-black dark:text-white">Brutal Nav</h1>
    </div>
    <ul class="flex space-x-6">
      <li class="text-lg font-semibold text-black dark:text-white hover:text-red-500 dark:hover:text-red-300">
        <a href="#home">Home</a>
      </li>
      <li class="text-lg font-semibold text-black dark:text-white hover:text-red-500 dark:hover:text-red-300">
        <a href="#about">About</a>
      </li>
      <li class="text-lg font-semibold text-black dark:text-white hover:text-red-500 dark:hover:text-red-300">
        <a href="#services">Services</a>
      </li>
      <li class="text-lg font-semibold text-black dark:text-white hover:text-red-500 dark:hover:text-red-300">
        <a href="#contact">Contact</a>
      </li>
    </ul>
  </div>
  <div class="bg-gray-300 dark:bg-gray-700 my-6">
    <img src="https://picsum.photos/1200/300?random=1" alt="Banner" class="w-full h-auto">
  </div>
  <div class="container mx-auto py-6">
    <h2 class="text-xl font-bold text-black dark:text-white">Featured</h2>
    <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-4">
      <div class="bg-white dark:bg-gray-800 p-4 border border-black dark:border-white rounded-lg"> 
        <img src="https://picsum.photos/300/200?random=1" alt="Placeholder" class="w-full h-40 object-cover rounded">
        <h3 class="text-lg font-bold text-black dark:text-white mt-2">Feature 1</h3>
      </div>
      <div class="bg-white dark:bg-gray-800 p-4 border border-black dark:border-white rounded-lg">
        <img src="https://picsum.photos/300/200?random=2" alt="Placeholder" class="w-full h-40 object-cover rounded">
        <h3 class="text-lg font-bold text-black dark:text-white mt-2">Feature 2</h3>
      </div>
      <div class="bg-white dark:bg-gray-800 p-4 border border-black dark:border-white rounded-lg">
        <img src="https://picsum.photos/300/200?random=3" alt="Placeholder" class="w-full h-40 object-cover rounded">
        <h3 class="text-lg font-bold text-black dark:text-white mt-2">Feature 3</h3>
      </div>
    </div>
  </div>
  <footer class="bg-gray-200 dark:bg-gray-600 p-4 text-center">
    <p class="text-sm text-black dark:text-white">© 2023 Brutalism Design. All Rights Reserved.</p>
  </footer>
</nav>

관련 구성 요소

Navigation Enhancement Components 구성 요소

전자 상거래 웹 사이트에 대한 다크 모드를 지원하는 반응형 탐색 구성 요소입니다. 눈의 피로를 줄이기 위해 어두운 배경의 트라이어드 색 구성표가 특징입니다.

열다

Playful_Consulting_Navigation_Component

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

열다

Navigation Enhancement 구성 요소

스큐어모피즘(skeuomorphism)으로 설계된 내비게이션 컴포넌트로, 현실 세계의 요소를 모방한 디지털 요소를 특징으로 합니다. 반응형 효과와 어두운 테마를 지원하는 Tailwind CSS를 사용하여 스타일이 지정됩니다.

열다