CCHub Logo CCHub Tailwind Collection
구성 요소 항행 Retro Dashboard Navigation 구성 요소

Retro Dashboard Navigation 구성 요소

Retro/Vintage Navigation Component는 생생한 색상, 적당한 복잡성, 응답성 및 어두운 테마 지원을 제공하는 대시보드를 위한 구성 요소입니다.

미리 보기

HTML 코드 

<nav class='bg-gradient-to-r from-purple-600 via-pink-600 to-red-600 p-4 text-white dark:from-purple-900 dark:via-pink-900 dark:to-red-900'>
  <div class='container mx-auto flex justify-between items-center'>
    <div class='text-2xl font-bold font-mono'>Dashboard</div>
    <ul class='flex space-x-4'>
      <li><a href='#' class='hover:underline text-yellow-300 dark:text-yellow-500'>Home</a></li>
      <li><a href='#' class='hover:underline text-yellow-300 dark:text-yellow-500'>Analytics</a></li>
      <li><a href='#' class='hover:underline text-yellow-300 dark:text-yellow-500'>Settings</a></li>
      <li><a href='#' class='hover:underline text-yellow-300 dark:text-yellow-500'>Profile</a></li>
    </ul>
  </div>
</nav>

관련 구성 요소

Navigation 구성 요소

마이크로 인터랙션과 파스텔 색 구성표가 있는 블로그를 위해 설계된 간단한 탐색 구성 요소입니다. 반응형 레이아웃과 어두운 테마 지원이 특징입니다.

열다

Retro Navigation 구성 요소

80년대/90년대의 빈티지 미학이 가미된 레트로 스타일의 내비게이션 구성 요소로, Tailwind CSS를 사용하여 반응형 디자인과 어두운 테마를 지원합니다.

열다

스큐어모픽 내비게이션 컴포넌트(Skeuomorphic Navigation Component)

스큐어모픽 내비게이션 컴포넌트로, 물리적 컨트롤 패널이나 대시보드와 같은 실제 요소를 모방하도록 설계되었습니다. 반응형 디자인, 물리적 버튼 누름을 시뮬레이션하는 호버 효과, 어두운 테마 지원이 특징입니다. 탐색에는 미묘한 그림자, 그라디언트 및 텍스처가 포함되어 물리적 인터페이스를 연상시키는 3D 촉각 모양을 만듭니다.

열다