CCHub Logo CCHub Tailwind Collection
구성 요소 사이드바 탐색 레트로사이드바내비게이션

레트로사이드바내비게이션

비즈니스/기업 웹사이트를 위한 반응형의 간단한 레트로/빈티지 파스텔 사이드바 탐색 구성 요소로, 다크 모드를 지원합니다.

미리 보기

HTML 코드 

<div class="flex h-screen bg-gray-100 dark:bg-gray-900">
  <!-- Sidebar -->
  <div class="w-64 bg-pink-200 dark:bg-purple-800 shadow-md p-4 flex flex-col justify-between">
    <div>
      <div class="text-2xl font-bold text-gray-800 dark:text-gray-100 mb-6 font-mono">ByteCorp</div>
      <nav>
        <a href="#" class="block py-2 px-4 text-gray-700 dark:text-gray-200 hover:bg-pink-300 dark:hover:bg-purple-700 rounded-md transition duration-300 ease-in-out font-semibold text-lg">
          Dashboard
        </a>
        <a href="#" class="block py-2 px-4 text-gray-700 dark:text-gray-200 hover:bg-pink-300 dark:hover:bg-purple-700 rounded-md transition duration-300 ease-in-out font-semibold text-lg mt-2">
          Analytics
        </a>
        <a href="#" class="block py-2 px-4 text-gray-700 dark:text-gray-200 hover:bg-pink-300 dark:hover:bg-purple-700 rounded-md transition duration-300 ease-in-out font-semibold text-lg mt-2">
          Reports
        </a>
        <a href="#" class="block py-2 px-4 text-gray-700 dark:text-gray-200 hover:bg-pink-300 dark:hover:bg-purple-700 rounded-md transition duration-300 ease-in-out font-semibold text-lg mt-2">
          Settings
        </a>
      </nav>
    </div>
    <div class="flex items-center">
      <img src="https://randomuser.me/api/portraits/thumb/men/75.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
      <div class="text-gray-800 dark:text-gray-100 font-semibold">John Doe</div>
    </div>
  </div>

  <!-- Content Area (for demonstration purposes) -->
  <div class="flex-1 p-8">
    <h1 class="text-4xl font-bold text-gray-800 dark:text-gray-100 mb-6 font-mono">Welcome to ByteCorp Dashboard</h1>
    <p class="text-gray-700 dark:text-gray-300 text-lg">This is a simple content area. The sidebar is on the left.</p>
  </div>
</div>

관련 구성 요소

Brutalism 사이드바 탐색

Brutalism 디자인, 생생한 색 구성표 및 블로그/콘텐츠 목적을 위한 단순한 레이아웃을 갖춘 반응형 사이드바 탐색 구성 요소. 다크 모드 지원이 포함됩니다.

열다

사이드바 탐색 구성 요소 - 농업/농업

농업/농업 웹사이트를 위해 설계된 복잡하고 미니멀한 사이드바 탐색 구성 요소입니다. 보석 같은 색조의 색상, 완전한 반응성, 다크 모드 지원, 농업 상황의 대시보드 및 관리 시스템에 적합한 여러 대화형 요소를 갖추고 있습니다.

열다

Sidebar Navigation 구성 요소

블로그에 맞게 조정된 사이드바 탐색 구성 요소로, 3D 요소와 생생한 색상으로 디자인되었습니다. 다크 모드를 지원하고 반응형이며 콘텐츠 소비에 적합한 간단한 레이아웃을 특징으로 합니다.

열다