검색 구성 요소

카테고리

구성 요소 탐색 구성 요소

탐색 구성 요소

사용자가 웹 사이트를 탐색하고 콘텐츠를 찾는 데 도움이 되는 구성 요소

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

소셜 미디어 응용 프로그램을 위해 브루탈리즘 스타일로 설계된 반응형 탐색 구성 요소로, 보색 구성표와 최소한의 요소를 활용합니다.

                <nav class="bg-gray-800 dark:bg-gray-900 p-4 flex justify-between items-center">
    <div class="flex items-center space-x-4">
        <a href="#" class="text-white dark:text-gray-200 font-bold text-lg">Logo</a>
        <ul class="flex space-x-4">
            <li><a href="#" class="text-white dark:text-gray-200 hover:text-blue-500 dark:hover:text-blue-400">Home</a></li>
            <li><a href="#" class="text-white dark:text-gray-200 hover:text-blue-500 dark:hover:text-blue-400">Profile</a></li>
            <li><a href="#" class="text-white dark:text-gray-200 hover:text-blue-500 dark:hover:text-blue-400">Messages</a></li>
            <li><a href="#" class="text-white dark:text-gray-200 hover:text-blue-500 dark:hover:text-blue-400">Settings</a></li>
        </ul>
    </div>
    <div class="flex items-center space-x-4">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-8 h-8 rounded-full">
        <a href="#" class="text-white dark:text-gray-200 font-bold">Logout</a>
    </div>
</nav>
<div class="bg-gray-100 dark:bg-gray-800 p-8">
    <h1 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-4">Welcome to Our Social Media</h1>
    <img src="https://picsum.photos/800/400" alt="Random Image" class="rounded-lg shadow-lg">
</div>

스큐어모픽 내비게이션

Skeuomorphic 디자인의 간단하고 반응이 빠른 탐색 구성 요소, 소셜 미디어 응용 프로그램에 적합한 유사한 색 구성표, 어두운 테마 지원.

열다 미리 보기

                <nav class="bg-gradient-to-b from-gray-200 to-gray-300 dark:from-gray-700 dark:to-gray-800 shadow-lg">
  <div class="container mx-auto px-4 py-3 flex justify-between items-center">
    <div class="text-gray-800 dark:text-gray-200 font-bold text-xl">SocialApp</div>
    <div class="flex space-x-4">
      <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition duration-300">
        <div class="p-2 rounded-md bg-gray-300 dark:bg-gray-600 shadow-md hover:shadow-lg">
          Home
        </div>
      </a>
      <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition duration-300">
        <div class="p-2 rounded-md bg-gray-300 dark:bg-gray-600 shadow-md hover:shadow-lg">
          Profile
        </div>
      </a>
      <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition duration-300">
        <div class="p-2 rounded-md bg-gray-300 dark:bg-gray-600 shadow-md hover:shadow-lg">
          Messages
        </div>
      </a>
    </div>
  </div>
</nav>

스큐어모픽 내비게이션 컴포넌트(Skeuomorphic Navigation Component)

스큐어모픽 스타일로 디자인된 탐색 구성 요소로, 보색 구성표를 특징으로 하며, 데이터 시각화 및 제어판이 있는 대시보드에 적합합니다. 여기에는 사용자 참여를 위한 대화형 요소가 포함되어 있습니다.

열다 미리 보기

                <nav class="bg-gray-800 dark:bg-gray-900 shadow-lg rounded-lg p-4 flex flex-col md:flex-row justify-between items-center">
    <div class="flex items-center">
        <img src="https://picsum.photos/50/50" alt="Logo" class="w-12 h-12 rounded-full mr-3 shadow-lg">
        <h1 class="text-2xl font-bold text-white">Dashboard</h1>
    </div>
    <div class="mt-4 md:mt-0">
        <ul class="flex space-x-4">
            <li>
                <a href="#" class="text-white hover:text-blue-400 dark:hover:text-blue-300 px-3 py-2 rounded-md text-sm font-medium">Home</a>
            </li>
            <li>
                <a href="#" class="text-gray-300 hover:text-blue-400 dark:hover:text-blue-300 px-3 py-2 rounded-md text-sm font-medium">Profile</a>
            </li>
            <li>
                <a href="#" class="text-gray-300 hover:text-blue-400 dark:hover:text-blue-300 px-3 py-2 rounded-md text-sm font-medium">Settings</a>
            </li>
            <li>
                <a href="#" class="text-gray-300 hover:text-blue-400 dark:hover:text-blue-300 px-3 py-2 rounded-md text-sm font-medium">Logout</a>
            </li>
        </ul>
    </div>
</nav>

<section class="p-6 bg-white dark:bg-gray-800 rounded-lg">
    <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-4">Dashboard Overview</h2>
    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
        <div class="bg-gray-100 dark:bg-gray-700 shadow-lg rounded-lg p-5">
            <h3 class="text-md font-medium text-gray-800 dark:text-gray-200">Data Card 1</h3>
            <img src="https://picsum.photos/200/150" alt="Data visualization" class="rounded-lg mt-2">
        </div>
        <div class="bg-gray-100 dark:bg-gray-700 shadow-lg rounded-lg p-5">
            <h3 class="text-md font-medium text-gray-800 dark:text-gray-200">Data Card 2</h3>
            <img src="https://picsum.photos/200/150" alt="Data visualization" class="rounded-lg mt-2">
        </div>
        <div class="bg-gray-100 dark:bg-gray-700 shadow-lg rounded-lg p-5">
            <h3 class="text-md font-medium text-gray-800 dark:text-gray-200">Data Card 3</h3>
            <img src="https://picsum.photos/200/150" alt="Data visualization" class="rounded-lg mt-2">
        </div>
    </div>
</section>

탐색 구성 요소

Material Design 원칙을 따르는 반응형 탐색 구성 요소로, 소셜 미디어 인터페이스를 겨냥한 트라이어딕 색 구성표로, 다크 모드를 지원합니다.

열다 미리 보기

                <nav class="bg-gray-100 dark:bg-gray-800 shadow-lg p-4 rounded-lg">
    <div class="container mx-auto flex justify-between items-center">
        <div class="flex items-center space-x-4">
            <img src="https://picsum.photos/40" alt="Logo" class="rounded-full">
            <h1 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Social Media</h1>
        </div>
        <ul class="flex space-x-6">
            <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition">Home</a></li>
            <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition">Profile</a></li>
            <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition">Messages</a></li>
            <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition">Settings</a></li>
        </ul>
        <div class="relative">
            <img src="https://randomuser.me/api/portraits/thumb/men/1.jpg" alt="User Avatar" class="rounded-full w-8 h-8">
            <div class="absolute right-0 w-2 h-2 bg-green-500 rounded-full ring-2 ring-white dark:ring-gray-800"></div>
        </div>
    </div>
</nav>

<div class="container mx-auto mt-6">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200">Feed</h2>
    <div class="mt-4 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <div class="bg-white dark:bg-gray-900 p-4 rounded-lg shadow-md">
            <img src="https://picsum.photos/300/200" alt="Post Image" class="w-full h-40 object-cover rounded-lg">
            <h3 class="font-semibold text-gray-800 dark:text-gray-200 mt-2">Post Title</h3>
            <p class="text-gray-600 dark:text-gray-400">This is a short description of the post content.</p>
        </div>
        <div class="bg-white dark:bg-gray-900 p-4 rounded-lg shadow-md">
            <img src="https://picsum.photos/300/201" alt="Post Image" class="w-full h-40 object-cover rounded-lg">
            <h3 class="font-semibold text-gray-800 dark:text-gray-200 mt-2">Post Title</h3>
            <p class="text-gray-600 dark:text-gray-400">This is a short description of the post content.</p>
        </div>
        <div class="bg-white dark:bg-gray-900 p-4 rounded-lg shadow-md">
            <img src="https://picsum.photos/300/202" alt="Post Image" class="w-full h-40 object-cover rounded-lg">
            <h3 class="font-semibold text-gray-800 dark:text-gray-200 mt-2">Post Title</h3>
            <p class="text-gray-600 dark:text-gray-400">This is a short description of the post content.</p>
        </div>
    </div>
</div>

뉴모피즘 내비게이션(Neumorphism Navigation)

전자 상거래를 위한 Neumorphism 스타일을 사용한 간단한 반응형 탐색 구성 요소입니다.

열다 미리 보기

                <nav class="p-4 bg-gray-100 dark:bg-gray-800 shadow-neumorphic-light dark:shadow-neumorphic-dark">
  <ul class="flex justify-center space-x-4">
    <li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-pink-500 dark:hover:text-pink-400">Home</a></li>
    <li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-pink-500 dark:hover:text-pink-400">Shop</a></li>
    <li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-pink-500 dark:hover:text-pink-400">Categories</a></li>
    <li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-pink-500 dark:hover:text-pink-400">Cart</a></li>
  </ul>
</nav>

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

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

열다 미리 보기

                <nav class="bg-blue-300 dark:bg-orange-700 p-4"> <ul class="flex justify-between"> <li><a href="#" class="text-blue-800 dark:text-orange-200 text-xl font-bold">Profile</a></li> <li><a href="#" class="text-blue-800 dark:text-orange-200 text-xl font-bold">Feed</a></li> <li><a href="#" class="text-blue-800 dark:text-orange-200 text-xl font-bold">Messages</a></li> </ul></nav>

탐색 구성 요소

전자 상거래 웹 사이트를 위한 미니멀한 탐색 구성 요소로, 로고, 검색 창, 탐색 링크, 장바구니 아이콘 및 Tailwind CSS를 사용하는 사용자 아바타를 특징으로 합니다. 이 구성 요소는 반응형 디자인과 다크 모드를 지원합니다.

열다 미리 보기

                <nav class="bg-white dark:bg-gray-800 p-4 flex items-center justify-between">  <div class="flex items-center">    <img src="https://picsum.photos/100/50" alt="Logo" class="h-10 mr-4">    <ul class="hidden md:flex space-x-8 text-gray-700 dark:text-gray-300">      <li><a href="#" class="hover:underline">Home</a></li>      <li><a href="#" class="hover:underline">Shop</a></li>      <li><a href="#" class="hover:underline">About</a></li>      <li><a href="#" class="hover:underline">Contact</a></li>    </ul>  </div>  <div class="flex items-center">    <div class="relative">      <input type="text" placeholder="Search" class="border border-gray-300 dark:border-gray-600 rounded-lg py-2 pl-10 pr-4 focus:outline-none focus:ring focus:ring-gray-300 dark:focus:ring-gray-600"><span class="absolute left-3 top-2 text-gray-400 dark:text-gray-500"><svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-4.35-4.35M16.65 10.65A5.48 5.48 0 0015 12a5.48 5.48 0 01-1.65 4.35A5.48 5.48 0 0012 17a5.48 5.48 0 00-4.35-1.65A5.48 5.48 0 007 12a5.48 5.48 0 011.65-4.35A5.48 5.48 0 0012 7c1.3 0 2.57.47 3.65 1.65z"/></svg></span>    </div>    <a href="#" class="ml-4 text-gray-700 dark:text-gray-300 relative">      <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h18M3 12h18M3 21h18"/></svg>      <span class="absolute -top-1 -right-1 bg-red-500 text-white rounded-full h-5 w-5 flex items-center justify-center text-xs">0</span>    </a>    <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="ml-4 rounded-full h-10 w-10">  </div>  <button class="md:hidden text-gray-700 dark:text-gray-300 focus:outline-none">    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"/></svg>  </button></nav>

Navigation Components 컴포넌트

Tailwind CSS를 사용하여 다크 모드를 지원하는 반응형 탐색 구성 요소입니다. 여기에는 로고, 탐색 링크 및 클릭 유도문안 버튼이 포함됩니다.

열다 미리 보기

                <nav class="bg-gray-900 text-white">
  <div class="container mx-auto px-6 py-4">
    <div class="flex justify-between items-center">
      <div class="flex items-center">
        <svg class="w-8 h-8 fill-current text-white mr-2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"></path></svg>
        <span class="text-xl font-bold">MyCompany</span>
      </div>
      <div class="hidden md:flex space-x-4">
        <a href="#" class="hover:text-purple-400">Home</a>
        <a href="#" class="hover:text-purple-400">About</a>
        <a href="#" class="hover:text-purple-400">Services</a>
        <a href="#" class="hover:text-purple-400">Contact</a>
      </div>
      <div class="hidden md:block">
        <button class="bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-full">Get Started</button>
      </div>
      <div class="md:hidden">
        <button class="text-white focus:outline-none">
          <svg class="w-6 h-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="M4 6h16M4 12h16m-7 6h7"></path></svg>
        </button>
      </div>
    </div>
  </div>
</nav>

Navigation Components 컴포넌트

다크 모드를 지원하는 반응형 탐색 모음입니다.

열다 미리 보기

                <nav class="bg-gray-800">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="flex items-center justify-between h-16">
      <div class="flex items-center">
        <div class="flex-shrink-0">
          <img class="h-8 w-8" src="https://www.picsum.photos/id/237/200/300" alt="Workflow">
        </div>
        <div class="hidden md:block">
          <div class="ml-10 flex items-baseline space-x-4">
            <a href="#" class="bg-gray-900 text-white px-3 py-2 rounded-md text-sm font-medium">Dashboard</a>

            <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Team</a>

            <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Projects</a>

            <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Calendar</a>

            <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Reports</a>
          </div>
        </div>
      </div>
      <div class="-mr-2 flex md:hidden">
        <button type="button" class="bg-gray-800 inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white" aria-controls="mobile-menu" aria-expanded="false">
          <span class="sr-only">Open main menu</span>
          
          <svg class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
          </svg>
          
          <svg class="hidden h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
          </svg>
        </button>
      </div>
    </div>
  </div>

  
  <div class="md:hidden" id="mobile-menu">
    <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
      <a href="#" class="bg-gray-900 text-white block px-3 py-2 rounded-md text-base font-medium">Dashboard</a>

      <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Team</a>

      <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Projects</a>

      <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Calendar</a>

      <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Reports</a>
    </div>
  </div>
</nav>

Brutalist Navigation 구성 요소

반응형 동작과 어두운 테마를 지원하는 brutalist 탐색 구성 요소입니다.

열다 미리 보기

                <nav class="bg-yellow-400 dark:bg-purple-900 p-6 font-mono border-4 border-black dark:border-yellow-400">
  <div class="container mx-auto flex justify-between items-center">
    <div class="text-2xl font-bold text-black dark:text-yellow-400">Brutal Nav</div>
    <ul class="flex space-x-4">
      <li><a href="#" class="text-black dark:text-yellow-400 hover:underline">Home</a></li>
      <li><a href="#" class="text-black dark:text-yellow-400 hover:underline">Docs</a></li>
      <li><a href="#" class="text-black dark:text-yellow-400 hover:underline">Examples</a></li>
    </ul>
  </div>
</nav>