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>

관련 구성 요소

레트로 전자 상거래 탐색 모음

전자 상거래를 위한 레트로/빈티지 스타일의 그레이스케일 탐색 구성 요소로, 호버 및 드롭다운과 같은 대화형 요소를 통해 중간 정도의 복잡성을 특징으로 합니다. 반응형이며 Tailwind CSS를 사용하는 다크 모드 지원이 포함됩니다.

열다

Navigation Components 컴포넌트

생생한 색상과 미시적 상호작용을 가진 반응형 탐색 구성 요소로, 포트폴리오를 위해 설계되었습니다.

열다

Navigation Components 컴포넌트

어두운 테마, 반응형 디자인, JavaScript가 없는 탐색 구성 요소입니다.

열다