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>

관련 구성 요소

소셜 미디어 탐색 구성 요소

소셜 미디어 인터페이스용으로 설계된 반응형 탐색 구성 요소로, Tailwind CSS와 함께 어두운 테마를 사용하여 머티리얼 디자인 미학을 특징으로 합니다.

열다

Navigation 구성 요소

블로그/콘텐츠 소비를 위해 설계된 반응형 탐색 구성 요소로, 3D 디자인 스타일, 보색 구성표 및 일부 대화형 기능을 통합한 중간 정도의 복잡성을 제공합니다.

열다

Neumorphism Navigation 컴포넌트

Neumorphism Navigation Component는 포트폴리오 웹 사이트에 최적화되어 있습니다. 여러 대화형 요소가 있는 복잡한 레이아웃, 반응형 디자인, Tailwind CSS를 사용한 다크 모드 지원이 특징입니다. 색 구성표는 유사합니다.

열다