CCHub Logo CCHub Tailwind Collection
구성 요소 탐색 구성 요소 소셜 미디어 내비게이션

소셜 미디어 내비게이션

차분한/채도가 낮은 색 구성표가 있는 반응형 소셜 미디어 탐색 구성 요소로, Material Design 원칙에서 영감을 받아 밝은 모드와 어두운 모드를 지원합니다. 그리드 기반 레이아웃과 깊이 효과를 제공합니다.

미리 보기

HTML 코드 

<nav class="bg-gray-100 dark:bg-gray-800 shadow-md p-4 sticky top-0 z-50 transition-colors duration-300">
  <div class="container mx-auto flex flex-col md:flex-row items-center justify-between space-y-4 md:space-y-0">
    <!-- Logo/Brand -->
    <div class="flex-shrink-0">
      <a href="#" class="text-xl font-bold text-gray-800 dark:text-gray-200 tracking-wide hover:text-gray-600 dark:hover:text-gray-400 transition-colors duration-300">
        SocialSphere
      </a>
    </div>

    <!-- Search Bar (Desktop/Tablet) -->
    <div class="hidden md:block flex-grow max-w-lg mx-4">
      <div class="relative">
        <input type="text" placeholder="Search..." class="w-full px-4 py-2 pl-10 rounded-full bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-500 transition-colors duration-300">
        <svg class="absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-gray-500 dark:text-gray-400" 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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
        </svg>
      </div>
    </div>

    <!-- Navigation Links -->
    <div class="flex flex-col md:flex-row items-center space-y-2 md:space-y-0 md:space-x-6">
      <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white font-medium transition-colors duration-300 flex items-center">
        <svg class="h-6 w-6 mr-1" 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="M3 12l2-2m0 0l7-7m-7 7v10a1 1 0 001 1h4m-4-10h10a1 1 0 011 1v10a1 1 0 01-1 1h-4m-6-6v6m6-3v3"></path></svg>
        <span>Home</span>
      </a>
      <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white font-medium transition-colors duration-300 flex items-center">
        <svg class="h-6 w-6 mr-1" 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="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path></svg>
        <span>Messages</span>
      </a>
      <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white font-medium transition-colors duration-300 flex items-center">
        <svg class="h-6 w-6 mr-1" 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="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.405L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"></path></svg>
        <span>Notifications</span>
      </a>
    </div>

    <!-- Avatar/Profile (Desktop/Tablet) -->
    <div class="hidden md:block flex-shrink-0 ml-4">
      <a href="#" class="block relative">
        <img class="h-10 w-10 rounded-full border-2 border-gray-400 dark:border-gray-500 object-cover hover:ring-2 hover:ring-gray-300 dark:hover:ring-gray-600 transition-all duration-300" src="https://randomuser.me/api/portraits/men/45.jpg" alt="User Avatar">
        <span class="absolute bottom-0 right-0 block h-2.5 w-2.5 rounded-full ring-2 ring-white dark:ring-gray-800 bg-green-500"></span>
      </a>
    </div>
  </div>

  <!-- Mobile Search Bar -->
  <div class="md:hidden mt-4">
    <div class="relative">
      <input type="text" placeholder="Search..." class="w-full px-4 py-2 pl-10 rounded-full bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-500 transition-colors duration-300">
      <svg class="absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-gray-500 dark:text-gray-400" 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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
      </svg>
    </div>
  </div>

  <!-- Mobile Bottom Navigation (Fixed) -->
  <div class="fixed bottom-0 left-0 right-0 bg-gray-100 dark:bg-gray-800 shadow-lg md:hidden p-3 border-t border-gray-200 dark:border-gray-700 transition-colors duration-300 z-40">
    <div class="flex justify-around items-center w-full">
      <a href="#" class="flex flex-col items-center text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition-colors duration-300">
        <svg class="h-6 w-6" 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="M3 12l2-2m0 0l7-7m-7 7v10a1 1 0 001 1h4m-4-10h10a1 1 0 011 1v10a1 1 0 01-1 1h-4m-6-6v6m6-3v3"></path></svg>
        <span class="text-xs mt-1">Home</span>
      </a>
      <a href="#" class="flex flex-col items-center text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition-colors duration-300">
        <svg class="h-6 w-6" 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="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path></svg>
        <span class="text-xs mt-1">Chats</span>
      </a>
      <a href="#" class="flex flex-col items-center text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition-colors duration-300">
        <svg class="h-6 w-6" 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="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.405L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"></path></svg>
        <span class="text-xs mt-1">Alerts</span>
      </a>
      <a href="#" class="flex flex-col items-center text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition-colors duration-300 relative">
        <img class="h-6 w-6 rounded-full border border-gray-400 dark:border-gray-500 object-cover" src="https://randomuser.me/api/portraits/men/45.jpg" alt="User Avatar">
        <span class="absolute top-0 right-0 block h-2 w-2 rounded-full ring-1 ring-white dark:ring-gray-800 bg-green-500 -translate-y-1 translate-x-1"></span>
        <span class="text-xs mt-1">Profile</span>
      </a>
    </div>
  </div>
</nav>

관련 구성 요소

뉴모픽 소셜 미디어 내비게이션

소프트 UI 뉴모픽 디자인을 갖춘 간단하고 반응이 빠른 소셜 미디어 탐색 구성 요소입니다. 단색 색 구성표를 사용하고 다크 모드를 지원합니다.

열다

사이버펑크 날씨 내비게이션

날씨 애플리케이션을 위한 간단하고 반응이 빠른 사이버펑크 테마 탐색 구성 요소로, 차분한 색상과 네온 액센트가 특징이며 다크 모드를 지원합니다.

열다

브루탈리즘 소셜 내비게이션

보색이 있는 소셜 미디어를 위한 단순하고 야만적인 탐색 구성 요소입니다. 반응형 디자인과 다크 모드 지원이 포함됩니다.

열다