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

열다

Navigation Enhancement 구성 요소

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

열다

다크 모드 미디어 탐색

엔터테인먼트/미디어 플랫폼을 위한 복잡하고 반응이 빠른 탐색 구성 요소로, 포레스트/그린 색상 팔레트가 있는 다크 모드 UI를 특징으로 합니다. 로고, 검색 창, 탐색 링크, 사용자 프로필 및 알림 벨이 포함됩니다.

열다