CCHub Logo CCHub Tailwind Collection
구성 요소 사이드바 탐색 소셜 미디어 사이드바 탐색 구성 요소

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

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

미리 보기

HTML 코드 

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

  <!-- Sidebar -->
  <div class="w-64 bg-stone-300 dark:bg-stone-800 p-6 space-y-6 transform -translate-x-full md:translate-x-0 transition-transform duration-200 ease-in-out" id="sidebar">
    
    <!-- Profile Section -->
    <div class="flex items-center space-x-4">
      <img class="w-12 h-12 rounded-full border-4 border-stone-900 dark:border-stone-100" src="https://randomuser.me/api/portraits/men/75.jpg" alt="User Avatar">
      <div>
        <h2 class="text-xl font-bold text-stone-900 dark:text-stone-100">Username</h2>
        <p class="text-sm text-stone-700 dark:text-stone-300">@userhandle</p>
      </div>
    </div>

    <hr class="border-stone-900 dark:border-stone-100">

    <!-- Navigation -->
    <nav class="space-y-4">
      <a href="#" class="block text-stone-900 dark:text-stone-100 text-lg font-semibold hover:underline focus:underline">Feed</a>
      <a href="#" class="block text-stone-900 dark:text-stone-100 text-lg font-semibold hover:underline focus:underline">Profile</a>
      <a href="#" class="block text-stone-900 dark:text-stone-100 text-lg font-semibold hover:underline focus:underline">Messages</a>
      <a href="#" class="block text-stone-900 dark:text-stone-100 text-lg font-semibold hover:underline focus:underline">Notifications</a>
      <a href="#" class="block text-stone-900 dark:text-stone-100 text-lg font-semibold hover:underline focus:underline">Settings</a>
    </nav>

    <hr class="border-stone-900 dark:border-stone-100">

    <!-- Footer Links -->
    <div class="flex flex-wrap gap-2 text-sm text-stone-700 dark:text-stone-300">
      <a href="#" class="hover:underline focus:underline">About</a>
      <a href="#" class="hover:underline focus:underline">Help</a>
      <a href="#" class="hover:underline focus:underline">Terms</a>
      <a href="#" class="hover:underline focus:underline">Privacy</a>
    </div>

  </div>

  <!-- Content Area - Example -->
  <div class="flex-1 p-6">
    <h1 class="text-2xl font-bold text-stone-900 dark:text-stone-100">Main Content Area</h1>
    </div>

</div>

관련 구성 요소

Glassmorphism 사이드바 탐색

포트폴리오를 위한 Glassmorphism 스타일의 반응형 사이드바 탐색 구성 요소로, 다크 모드 지원 및 유사한 색 구성표가 있습니다. 젖빛 유리 효과와 HTML 및 Tailwind CSS만 사용하는 여러 대화형 요소가 특징입니다.

열다

Sidebar Navigation 구성 요소

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

열다

Sidebar Navigation 구성 요소

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

열다