CCHub Logo CCHub Tailwind Collection
구성 요소 탐색 구성 요소 탐색 구성 요소

탐색 구성 요소

브루탈리즘 스타일로 디자인된 탐색 구성 요소로, 소셜 미디어 인터페이스를 위한 파스텔 색 구성표가 특징이며, 반응형 레이아웃과 어두운 테마 지원을 제공합니다.

미리 보기

HTML 코드 

<nav class="flex flex-col md:flex-row justify-between items-center p-4 bg-pink-200 dark:bg-gray-800">
  <div class="flex items-center mb-4 md:mb-0">
    <img src="https://picsum.photos/50/50" alt="Logo" class="rounded-full mr-2">
    <h1 class="text-xl font-bold text-gray-800 dark:text-white">MySocial</h1>
  </div>
  <ul class="flex flex-col md:flex-row">
    <li class="mx-2">
      <a href="#" class="text-gray-800 dark:text-white hover:text-gray-600 dark:hover:text-gray-300 transition duration-200">Home</a>
    </li>
    <li class="mx-2">
      <a href="#" class="text-gray-800 dark:text-white hover:text-gray-600 dark:hover:text-gray-300 transition duration-200">Profile</a>
    </li>
    <li class="mx-2">
      <a href="#" class="text-gray-800 dark:text-white hover:text-gray-600 dark:hover:text-gray-300 transition duration-200">Messages</a>
    </li>
    <li class="mx-2">
      <a href="#" class="text-gray-800 dark:text-white hover:text-gray-600 dark:hover:text-gray-300 transition duration-200">Settings</a>
    </li>
    <li class="mx-2">
      <a href="#" class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-700 transition duration-200">Logout</a>
    </li>
  </ul>
</nav>

<section class="p-4 space-y-5">
  <article class="p-4 bg-purple-200 dark:bg-gray-700 rounded shadow-sm">
    <h2 class="font-bold text-gray-800 dark:text-white">Recent Posts</h2>
    <p class="text-gray-700 dark:text-gray-200">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </article>
  <article class="p-4 bg-purple-200 dark:bg-gray-700 rounded shadow-sm">
    <h2 class="font-bold text-gray-800 dark:text-white">User Activity</h2>
    <p class="text-gray-700 dark:text-gray-200">Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </article>
  <article class="p-4 bg-purple-200 dark:bg-gray-700 rounded shadow-sm">
    <h2 class="font-bold text-gray-800 dark:text-white">Trending Topics</h2>
    <p class="text-gray-700 dark:text-gray-200">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
  </article>
</section>

<footer class="bg-pink-200 dark:bg-gray-800 p-4 text-center">
  <p class="text-gray-800 dark:text-white">© 2022 MySocial. All rights reserved.</p>
</footer>

관련 구성 요소

구인공광고내비게이션

구인 게시판 또는 경력 개발 플랫폼을 위한 간단하고 반응이 빠른 탐색 구성 요소로, 바다/파란색 톤, 호버링의 마이크로 인터랙션, 다크 모드 지원을 제공합니다.

열다

Brutalist_Dating_Navigation_Simple

데이트/소셜 앱을 위한 단순하고 브루탈리즘에서 영감을 받은 탐색 모음으로, 고대비 요소, 따뜻한 중립 색상, 다크 모드 지원을 통한 완전한 응답성을 제공합니다.

열다

다크 모드 포트폴리오 탐색

포트폴리오 웹 사이트를 위한 복잡하고 반응이 빠른 탐색 구성 요소로, 유사한 색상의 다크 모드 UI를 특징으로 하며 작업 또는 제품을 선보이도록 설계되었습니다. 데스크톱, 태블릿 및 모바일 레이아웃과 드롭다운 및 사용자 아바타가 포함됩니다.

열다