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

Brutalism 사이드바 탐색

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

미리 보기

HTML 코드 

<div class="flex h-screen bg-gray-100 dark:bg-gray-900">

  <!-- Sidebar -->
  <div class="w-64 px-4 py-6 bg-yellow-400 dark:bg-yellow-700 border-r-4 border-black dark:border-white">
    <h2 class="text-2xl font-bold text-black dark:text-white">Navigation</h2>
    <nav class="mt-8">
      <ul>
        <li class="mb-4">
          <a href="#" class="block text-black dark:text-white hover:underline text-xl">Home</a>
        </li>
        <li class="mb-4">
          <a href="#" class="block text-black dark:text-white hover:underline text-xl">Articles</a>
        </li>
        <li class="mb-4">
          <a href="#" class="block text-black dark:text-white hover:underline text-xl">About</a>
        </li>
        <li class="mb-4">
          <a href="#" class="block text-black dark:text-white hover:underline text-xl">Contact</a>
        </li>
      </ul>
    </nav>
  </div>

  <!-- Content Area (for demonstration) -->
  <div class="flex-1 p-10">
    <h1 class="text-3xl font-bold text-gray-900 dark:text-white mb-6">Main Content Area</h1>
    <p class="text-gray-700 dark:text-gray-300">
      This is where the main content of your blog or article would go.
      The sidebar provides navigation on the left.
    </p>
  </div>

</div>

관련 구성 요소

소셜 미디어 사이드바 탐색 구성 요소

반응형 소셜 미디어 사이드바 탐색 구성 요소는 Brutalism, Earth Tones 및 Complex 디자인 원칙을 사용하여 어두운 테마를 지원합니다. JavaScript가 필요하지 않습니다.

열다

Sidebar Navigation 구성 요소

Brutalism 스타일로 설계된 반응형 사이드바 탐색 구성 요소로, 전자 상거래 애플리케이션에 적합합니다. 생생한 색상, 고대비, 다양한 쇼핑 카테고리에 대한 링크, 사용자 계정 옵션, 장바구니 액세스를 위한 생생한 클릭 유도문안 버튼을 포함한 여러 대화형 요소가 특징입니다. 디자인은 다크 모드에도 적용됩니다.

열다

RetroPastel소셜사이드바

레트로/빈티지 80년대/90년대 디자인, 파스텔 색상 및 다크 모드를 지원하는 간단하고 반응이 빠른 사이드바 탐색 구성 요소로, Tailwind CSS를 사용하는 소셜 미디어 인터페이스용으로 설계되었습니다.

열다