CCHub Logo CCHub Tailwind Collection
구성 요소 항행 대시보드 탐색(Material Design)

대시보드 탐색(Material Design)

Material Design Dashboard Navigation Component는 트라이어딕 색 구성표와 다크 모드를 지원합니다.

미리 보기

HTML 코드 

<nav class="bg-white dark:bg-gray-800 shadow">
  <div class="container mx-auto px-6 py-3">
    <div class="flex items-center justify-between">
      <div class="text-gray-800 dark:text-white font-bold text-xl">Dashboard</div>
      <div class="flex space-x-4">
        <a href="#" class="text-gray-800 dark:text-white hover:text-blue-500 dark:hover:text-blue-400 transition duration-300">Home</a>
        <a href="#" class="text-gray-800 dark:text-white hover:text-teal-500 dark:hover:text-teal-400 transition duration-300">Analytics</a>
        <a href="#" class="text-gray-800 dark:text-white hover:text-red-500 dark:hover:text-red-400 transition duration-300">Settings</a>
      </div>
    </div>
  </div>
</nav>

관련 구성 요소

Brutalist E-commerce Navigation 구성 요소

Tailwind CSS를 사용하는 복잡하고 잔인한 전자 상거래 탐색 구성 요소로, 고대비(검정/흰색)의 삼극 색 구성표(노란색, 청록색, 자홍색), CSS 전용 메가 메뉴, CSS 전용 검색 표시, CSS 전용 반응형 모바일 메뉴 및 다크 모드 지원을 특징으로 합니다. HTML 전용, JavaScript 없음.

열다

Neumorphic Navigation 컴포넌트

뉴모픽 디자인 스타일을 가진 단순하고 반응이 빠른 탐색 구성 요소로, 포럼 또는 커뮤니티 플랫폼에 적합한 보라색/보라색 색 구성표를 사용합니다. 다크 모드 지원이 포함됩니다.

열다

Responsive Navigation 구성 요소

Responsive Navigation Component with Microinteractions, Grayscale color scheme, and Simple complexity(마이크로인터랙션, 그레이스케일 색 구성표, 단순 복잡성).

열다