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 사이드바 탐색은 보색 구성표, 다크 모드 지원 및 JavaScript가 없는 대시보드를 제공합니다.

열다

Sidebar Navigation 구성 요소

다크 모드를 지원하는 반응형 사이드바 탐색 구성 요소. 미니멀리스트/플랫 디자인, 단색 색 구성표, 포트폴리오를 위한 복잡한 인터페이스. Tailwind CSS, picsum.photos 및 randomuser.me 를 사용합니다. 자바스크립트가 없습니다.

열다

Glassmorphism 사이드바 탐색

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

열다