CCHub Logo CCHub Tailwind Collection
구성 요소 사이드바 탐색 Sidebar Navigation 구성 요소

Sidebar Navigation 구성 요소

반응형 사이드바 탐색 구성 요소는 Tailwind CSS를 사용하여 어두운 테마를 지원하는 스큐어모픽 방식으로 스타일링되었습니다.

미리 보기

HTML 코드 

<div class="flex">
  <aside class="bg-gray-900 text-white w-64 h-screen shadow-lg rounded-r-3xl p-5">
    <div class="flex flex-col items-center mb-10">
      <img class="rounded-full border-4 border-gray-700" src="https://randomuser.me/api/portraits/men/10.jpg" alt="User Avatar" width="100" height="100" />
      <h2 class="mt-3 text-xl font-bold">John Doe</h2>
      <p class="text-gray-400">Web Developer</p>
    </div>
    <nav>
      <ul class="space-y-4">
        <li>
          <a href="#" class="flex items-center p-3 rounded-lg bg-gray-800 hover:bg-gray-700 transition duration-200">
            <img class="h-6 w-6 mr-3" src="https://picsum.photos/20/20?random=1" alt="Icon" />
            Dashboard
          </a>
        </li>
        <li>
          <a href="#" class="flex items-center p-3 rounded-lg bg-gray-800 hover:bg-gray-700 transition duration-200">
            <img class="h-6 w-6 mr-3" src="https://picsum.photos/20/20?random=2" alt="Icon" />
            Profile
          </a>
        </li>
        <li>
          <a href="#" class="flex items-center p-3 rounded-lg bg-gray-800 hover:bg-gray-700 transition duration-200">
            <img class="h-6 w-6 mr-3" src="https://picsum.photos/20/20?random=3" alt="Icon" />
            Settings
          </a>
        </li>
        <li>
          <a href="#" class="flex items-center p-3 rounded-lg bg-gray-800 hover:bg-gray-700 transition duration-200">
            <img class="h-6 w-6 mr-3" src="https://picsum.photos/20/20?random=4" alt="Icon" />
            Help
          </a>
        </li>
        <li>
          <a href="#" class="flex items-center p-3 rounded-lg bg-gray-800 hover:bg-gray-700 transition duration-200">
            <img class="h-6 w-6 mr-3" src="https://picsum.photos/20/20?random=5" alt="Icon" />
            Logout
          </a>
        </li>
      </ul>
    </nav>
  </aside>
  <main class="flex-1 p-10 bg-gray-200">
    <h1 class="text-3xl font-bold">Main Content Area</h1>
    <p>This is where your main content goes.</p>
  </main>
</div>

관련 구성 요소

Organic_Nature_Sepia_Healthcare_Sidebar_Navigation_Component

세피아/브라운 톤을 사용하여 자연에서 영감을 받은 유기적인 디자인의 간단하고 반응이 빠른 사이드바 탐색 구성 요소로, 의료 및 의료 분야에 적합합니다. 다크 모드 지원이 포함됩니다.

열다

Sidebar Navigation 구성 요소

반응형 사이드바 탐색 구성 요소에는 3D 디자인 요소, 유사한 색 구성표, 대화형 기능이 있는 중간 수준의 복잡성이 있습니다. 블로그 또는 콘텐츠 웹사이트에 적합합니다.

열다

Sidebar Navigation 구성 요소

대시보드를 위해 설계된 간단하고 반응이 빠른 사이드바 탐색 구성 요소로, 매력적인 애니메이션과 흙빛 색 구성표를 특징으로 합니다. 다크 모드를 지원합니다.

열다