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

Navigation Enhancement Components 구성 요소

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

미리 보기

HTML 코드 

<nav class="bg-gray-900 dark:bg-purple-900 p-4">
  <div class="container mx-auto flex items-center justify-between">
    <a href="#" class="text-white text-lg font-semibold">E-Shop</a>
    <ul class="flex space-x-4">
      <li><a href="#" class="text-gray-300 hover:text-white">Home</a></li>
      <li><a href="#" class="text-gray-300 hover:text-white">Products</a></li>
      <li><a href="#" class="text-gray-300 hover:text-white">Categories</a></li>
      <li><a href="#" class="text-gray-300 hover:text-white">Contact</a></li>
    </ul>
    <div class="flex items-center space-x-4">
      <input type="text" placeholder="Search..." class="bg-gray-800 text-white px-3 py-1 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
      <button class="bg-blue-600 dark:bg-green-600 text-white px-4 py-1 rounded-md">Cart</button>
    </div>
  </div>
</nav>

관련 구성 요소

Navigation Enhancement 구성 요소

Tailwind CSS를 사용하여 머티리얼 디자인 스타일로 디자인된 반응형 탐색 구성 요소로, 어두운 테마 지원 및 반응형 효과를 제공합니다.

열다

Luxury_Vibrant_Travel_Navigation

여행 및 관광 웹사이트를 위해 설계된 복잡하고 고급스러우며 생동감 넘치는 내비게이션 구성 요소로, 정교한 타이포그래피, 채도가 높은 색상, 다크 모드 지원을 통한 완전한 응답성을 특징으로 합니다.

열다

Navigation Enhancement 구성 요소

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

열다