CCHub Logo CCHub Tailwind Collection
구성 요소 사이드바 사이드바 구성 요소

사이드바 구성 요소

Tailwind CSS를 사용하는 반응형 사이드바 구성 요소로, 머티리얼 디자인 원칙과 어두운 테마를 지원합니다. 로고와 제목이 있는 머리글과 링크가 있는 탐색 메뉴가 포함되어 있습니다.

미리 보기

HTML 코드 

<div class="flex h-screen bg-gray-100 dark:bg-gray-900">
  <!-- Sidebar -->
  <div class="sidebar w-64 bg-white dark:bg-gray-800 shadow-md">
    <div class="sidebar-header flex items-center justify-center h-16 border-b dark:border-gray-700">
      <img src="https://picsum.photos/40" alt="Logo" class="w-10 h-10 rounded-full">
      <h2 class="text-xl font-semibold text-gray-800 dark:text-white ml-3">My App</h2>
    </div>
    <div class="sidebar-nav mt-4">
      <ul>
        <li>
          <a href="#" class="flex items-center py-2 px-4 text-gray-700 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700">
            <svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 10h16M4 14h16M4 18h16"></path></svg>
            Dashboard
          </a>
        </li>
        <li>
          <a href="#" class="flex items-center py-2 px-4 text-gray-700 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700">
            <svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path></svg>
            Settings
          </a>
        </li>
        <li>
          <a href="#" class="flex items-center py-2 px-4 text-gray-700 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700">
            <svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path></svg>
            Profile
          </a>
        </li>
      </ul>
    </div>
  </div>
  <!-- Page Content (Placeholder) -->
  <div class="flex-1 p-6">
    <h1 class="text-2xl font-semibold text-gray-900 dark:text-white">Main Content Area</h1>
    <p class="mt-4 text-gray-700 dark:text-gray-300">This is where your main page content goes.</p>
  </div>
</div>

관련 구성 요소

Simple Vibrant Blog 사이드바

블로그 콘텐츠를 위한 간단하고 반응형이 빠른 사이드바 구성 요소로, Tailwind CSS를 사용하여 생생한 색상과 재질과 같은 느낌으로 디자인되었습니다. 탐색 링크와 사용자 프로필 섹션이 포함되어 있습니다. Tailwind의 dark: 접두사를 사용하여 다크 모드를 지원합니다. 큰 화면에서는 고정되고 작은 화면에서는 숨겨집니다.

열다

사이드바 구성 요소

레트로/빈티지 스타일로 디자인된 반응형 사이드바 구성 요소로, 대시보드 레이아웃을 위한 생생한 색상으로 디자인되었습니다. 여기에는 다크 모드에 대한 지원이 포함됩니다.

열다

사이드바 구성 요소

Tailwind CSS를 사용하여 디자인된 반응형 다크 모드 사이드바 구성 요소로, 어두운 배경, 호버 효과, 이미지 및 아바타에 대한 자리 표시자를 제공합니다.

열다