搜索组件

类别

组件导航栏

导航栏

通常位于页面顶部，包含主要链接

玻璃态仪表板导航栏

玻璃质感单色复杂仪表板导航栏，使用 Tailwind CSS，响应式并支持暗色主题。

                <nav class="p-4 bg-white bg-opacity-10 backdrop-filter backdrop-blur-lg dark:bg-gray-800 dark:bg-opacity-10 dark:backdrop-filter dark:backdrop-blur-lg">
  <div class="container mx-auto flex justify-between items-center">
    <div class="text-white font-bold text-xl">Dashboard</div>
    <div class="hidden md:flex space-x-4">
      <a href="#" class="text-white hover:text-gray-200">Home</a>
      <a href="#" class="text-white hover:text-gray-200">Settings</a>
      <a href="#" class="text-white hover:text-gray-200">Reports</a>
      <a href="#" class="text-white hover:text-gray-200">Users</a>
    </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-4 6h4"></path>
        </svg>
      </button>
    </div>
  </div>
</nav>

投资组合导航栏

响应式导航栏，支持黑暗主题，专为使用材料设计原则和大地色调的投资组合网站设计。它包括品牌标志、导航链接和号召性用语按钮。设计较为复杂，能够适应不同的屏幕尺寸。

打开预览

                <nav class="bg-white dark:bg-gray-800 shadow-md">
  <div class="max-w-6xl mx-auto px-4">
    <div class="flex justify-between">
      <div class="flex space-x-7">
        <div>
          
          <a href="#" class="flex items-center py-4 px-2">
            <span class="text-gray-800 dark:text-white text-lg font-bold">Portfolio</span>
          </a>
        </div>
        
        <div class="hidden md:flex items-center space-x-1">
          <a href="#" class="py-4 px-2 text-gray-500 dark:text-gray-300 font-semibold hover:text-green-500 dark:hover:text-green-400 transition duration-300">Home</a>
          <a href="#" class="py-4 px-2 text-gray-500 dark:text-gray-300 font-semibold hover:text-green-500 dark:hover:text-green-400 transition duration-300">Projects</a>
          <a href="#" class="py-4 px-2 text-gray-500 dark:text-gray-300 font-semibold hover:text-green-500 dark:hover:text-green-400 transition duration-300">About</a>
          <a href="#" class="py-4 px-2 text-gray-500 dark:text-gray-300 font-semibold hover:text-green-500 dark:hover:text-green-400 transition duration-300">Contact</a>
        </div>
      </div>
      
      <div class="hidden md:flex items-center space-x-3 ">
        <a href="#" class="py-2 px-2 font-medium text-gray-500 dark:text-gray-300 rounded hover:bg-green-500 dark:hover:bg-green-400 hover:text-white dark:hover:text-white transition duration-300">Log In</a>
        <a href="" class="py-2 px-2 font-medium text-white bg-green-500 dark:bg-green-400 rounded hover:bg-green-400 dark:hover:bg-green-500 transition duration-300">Sign Up</a>
      </div>
      
      <div class="-mr-2 flex md:hidden">
        <button class="mobile-menu-button p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 dark:hover:bg-gray-700 dark:focus:bg-gray-700">
          <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
          </svg>
        </button>
      </div>
    </div>
  </div>

  
  <div class="mobile-menu hidden md:hidden">
    <a href="" class="block py-2 px-4 text-sm hover:bg-gray-200 dark:hover:bg-gray-700">Home</a>
    <a href="" class="block py-2 px-4 text-sm hover:bg-gray-200 dark:hover:bg-gray-700">Projects</a>
    <a href="" class="block py-2 px-4 text-sm hover:bg-gray-200 dark:hover:bg-gray-700">About</a>
    <a href="" class="block py-2 px-4 text-sm hover:bg-gray-200 dark:hover:bg-gray-700">Contact</a>
  </div>
</nav>

野兽主义导航栏

一个响应式导航栏，以粗犷主义风格设计，采用高饱和度颜色，适用于博客和内容消费，支持暗主题。

打开预览

                <nav class="bg-green-600 dark:bg-green-900 p-4">
    <div class="container mx-auto flex justify-between items-center">
        <div class="flex items-center space-x-4">
            <a href="#" class="text-white text-lg font-bold hover:text-yellow-300 dark:hover:text-yellow-400">Home</a>
            <a href="#" class="text-white text-lg font-bold hover:text-yellow-300 dark:hover:text-yellow-400">About</a>
            <a href="#" class="text-white text-lg font-bold hover:text-yellow-300 dark:hover:text-yellow-400">Blog</a>
            <a href="#" class="text-white text-lg font-bold hover:text-yellow-300 dark:hover:text-yellow-400">Contact</a>
        </div>
        <div class="hidden md:flex items-center space-x-4">
            <a href="#" class="text-white bg-yellow-400 dark:bg-yellow-600 px-4 py-2 rounded-lg hover:bg-yellow-300 dark:hover:bg-yellow-500">Sign In</a>
            <a href="#" class="text-white bg-red-500 dark:bg-red-700 px-4 py-2 rounded-lg hover:bg-red-400 dark:hover:bg-red-600">Get Started</a>
        </div>
    </div>
    <div class="md:hidden mt-2">
        <button class="text-white rounded-md p-2 hover:bg-yellow-300 dark:hover:bg-yellow-500">
            Menu
        </button>
    </div>
</nav>
<div class="bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-200 p-4">
    <h1 class="text-3xl font-bold">Welcome to My Blog</h1>
    <p class="mt-2">Discover amazing articles and content that inspire and educate.</p>
    <img class="mt-4 rounded-lg" src="https://picsum.photos/800/400" alt="Random Image">
    <div class="flex mt-4 space-x-4">
        <img class="h-12 w-12 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Profile Picture">
        <img class="h-12 w-12 rounded-full" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Profile Picture">
    </div>
</div>

拟物化社交媒体导航栏

拟物化的社交媒体导航栏，采用三元色调和适度复杂性。

打开预览

                <nav class="bg-gradient-to-b from-gray-200 to-gray-300 dark:from-gray-800 dark:to-gray-900 shadow-lg dark:shadow-[0_20px_50px_rgba(0,_0,_0,_0.6)] p-4 rounded-b-xl">
  <div class="container mx-auto flex items-center justify-between">
    <div class="flex items-center space-x-4">
      <a href="#" class="flex items-center space-x-2 text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition duration-300">
        <svg class="h-8 w-8" 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-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m0 0l7 7m-2.343 2.343a1 1 0 01-1.414 0L11.5 11.5m-4 4L7 10m3.75 3.75V17m-5 0h5"></path></svg>
        <span class="font-bold text-xl">SocialApp</span>
      </a>
    </div>
    <div class="flex items-center space-x-6">
      <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-green-600 dark:hover:text-green-400 transition duration-300 relative">
        <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.436L4 17h5m6 0v1a3 3 0 01-6 0v-1m6 0H9"></path></svg>
        <span class="absolute top-0 right-0 inline-flex items-center justify-center px-2 py-1 text-xs font-bold leading-none text-red-100 transform translate-x-1/2 -translate-y-1/2 bg-red-600 rounded-full">3</span>
      </a>
      <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-purple-600 dark:hover:text-purple-400 transition 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.004 9.004 0 01-7.504-4.588M3.05 5.84C3.05 5.84 6.893 19 12 19s8.95-13.16 8.95-13.16"></path></svg>
      </a>
      <div class="relative">
        <button class="relative z-10 block h-10 w-10 rounded-full overflow-hidden border-2 border-gray-400 dark:border-gray-600 focus:outline-none focus:border-white">
          <img class="h-full w-full object-cover" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Your avatar">
        </button>
      </div>
    </div>
  </div>
</nav>

拟物化导航栏

一个简单的响应式社交媒体导航栏，采用拟物设计风格，利用相似色彩方案并支持暗模式。

打开预览

                <nav class="bg-gray-200 dark:bg-gray-800 p-4 shadow-lg rounded-lg">
    <div class="container mx-auto flex justify-between items-center">
        <div class="flex items-center">
            <img src="https://picsum.photos/40/40" alt="Logo" class="rounded-full mr-2">
            <span class="text-xl font-semibold text-gray-800 dark:text-gray-200">SocialApp</span>
        </div>
        <ul class="flex space-x-4">
            <li><a href="#" class="text-gray-800 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 transition-colors">Home</a></li>
            <li><a href="#" class="text-gray-800 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 transition-colors">About</a></li>
            <li><a href="#" class="text-gray-800 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 transition-colors">Contact</a></li>
            <li><a href="#" class="text-gray-800 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 transition-colors">Profile</a></li>
        </ul>
        <div class="flex items-center">
            <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="rounded-full w-10 h-10 border-2 border-gray-300 dark:border-gray-600">
        </div>
    </div>
</nav>

社交媒体导航栏

玻璃态灰度简单社交媒体导航栏组件

打开预览

                <nav class="p-4 bg-white bg-opacity-10 backdrop-filter backdrop-blur-lg dark:bg-gray-800 dark:bg-opacity-10 dark:backdrop-filter dark:backdrop-blur-lg">
  <div class="container mx-auto flex justify-between items-center">
    <div class="text-gray-800 dark:text-white text-xl font-bold">SocialApp</div>
    <div class="flex space-x-4">
      <a href="#" class="text-gray-800 dark:text-white hover:text-gray-600 dark:hover:text-gray-300">Feed</a>
      <a href="#" class="text-gray-800 dark:text-white hover:text-gray-600 dark:hover:text-gray-300">Profile</a>
      <a href="#" class="text-gray-800 dark:text-white hover:text-gray-600 dark:hover:text-gray-300">Messages</a>
    </div>
  </div>
</nav>

深色模式导航栏

一个具有响应效果和暗主题支持的导航栏组件。

打开预览

                <nav class="bg-gray-800 p-4 text-white">
  <div class="container mx-auto flex items-center justify-between">
    <div class="text-lg font-semibold">My Website</div>
    <div class="hidden md:flex space-x-4">
      <a href="#" class="hover:underline">Home</a>
      <a href="#" class="hover:underline">About</a>
      <a href="#" class="hover:underline">Services</a>
      <a href="#" class="hover:underline">Contact</a>
    </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-4 6h4"></path>
        </svg>
      </button>
    </div>
  </div>
</nav>

导航栏组件

一个具有微交互和深色模式支持的响应式导航栏，使用 Tailwind CSS。

打开预览

                <nav class="bg-white dark:bg-gray-800 shadow-md">
  <div class="container mx-auto px-6 py-3">
    <div class="flex items-center justify-between">
      <div class="text-xl font-semibold text-gray-700 dark:text-white">
        <a href="#" class="hover:text-gray-900 dark:hover:text-gray-200 transition duration-300 ease-in-out">My Website</a>
      </div>
      <div class="hidden md:block">
        <div class="flex items-center space-x-4">
          <a href="#" class="text-gray-700 dark:text-white hover:text-gray-900 dark:hover:text-gray-200 transition duration-300 ease-in-out transform hover:scale-105">Home</a>
          <a href="#" class="text-gray-700 dark:text-white hover:text-gray-900 dark:hover:text-gray-200 transition duration-300 ease-in-out transform hover:scale-105">About</a>
          <a href="#" class="text-gray-700 dark:text-white hover:text-gray-900 dark:hover:text-gray-200 transition duration-300 ease-in-out transform hover:scale-105">Services</a>
          <a href="#" class="text-gray-700 dark:text-white hover:text-gray-900 dark:hover:text-gray-200 transition duration-300 ease-in-out transform hover:scale-105">Contact</a>
        </div>
      </div>
      <div class="md:hidden">
        <button class="text-gray-700 dark:text-white focus:outline-none">
          <svg viewBox="0 0 24 24" fill="currentColor" class="h-6 w-6">
            <path fill-rule="evenodd" d="M4 5h16a1 1 0 010 2H4a1 1 0 110-2zm0 6h16a1 1 0 010 2H4a1 1 0 010-2zm0 6h16a1 1 0 010 2H4a1 1 0 010-2z"></path>
          </svg>
        </button>
      </div>
    </div>
  </div>
</nav>

极简导航栏

一个以极简风格设计的响应式导航栏组件，支持深色主题，使用Tailwind CSS。

打开预览

                <nav class="bg-white dark:bg-gray-800 shadow-md">
  <div class="max-w-screen-xl mx-auto px-4 sm:px-6 md:px-8">
    <div class="flex justify-between h-16">
      <div class="flex">
        <div class="flex-shrink-0">
          <img class="h-8" src="https://picsum.photos/40/40" alt="Logo">
        </div>
        <div class="hidden md:flex md:space-x-8">
          <a href="#" class="text-gray-900 dark:text-gray-100 hover:underline">Home</a>
          <a href="#" class="text-gray-900 dark:text-gray-100 hover:underline">About</a>
          <a href="#" class="text-gray-900 dark:text-gray-100 hover:underline">Services</a>
          <a href="#" class="text-gray-900 dark:text-gray-100 hover:underline">Contact</a>
        </div>
      </div>
      <div class="flex items-center">
        <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
      </div>
    </div>
  </div>
</nav>

<!-- Mobile menu button -->
<div class="md:hidden">
  <button class="flex items-center p-2 rounded-md text-gray-700 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700 focus:outline-none" aria-label="Toggle Navigation">
    <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" 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>
</div>

<!-- Mobile Menu -->
<div class="md:hidden">
  <div class="bg-white dark:bg-gray-800 shadow-md px-4 py-2 space-y-2">
    <a href="#" class="block text-gray-900 dark:text-gray-100 hover:underline">Home</a>
    <a href="#" class="block text-gray-900 dark:text-gray-100 hover:underline">About</a>
    <a href="#" class="block text-gray-900 dark:text-gray-100 hover:underline">Services</a>
    <a href="#" class="block text-gray-900 dark:text-gray-100 hover:underline">Contact</a>
  </div>
</div>

导航栏

在深色模式下使用 Tailwind CSS 的响应式导航栏组件

打开预览

                <nav class="bg-gray-800 text-white p-4">
    <div class="container mx-auto flex justify-between items-center">
        <div class="text-lg font-bold">Brand</div>
        <div class="hidden md:flex space-x-4">
            <a href="#" class="hover:text-gray-400">Home</a>
            <a href="#" class="hover:text-gray-400">About</a>
            <a href="#" class="hover:text-gray-400">Services</a>
            <a href="#" class="hover:text-gray-400">Contact</a>
        </div>
        <div class="md:hidden">
            <button class="text-white focus:outline-none" id="menu-btn">
                <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"/>
                </svg>
            </button>
        </div>
    </div>
    <div class="md:hidden" id="menu" style="display: none;">
        <a href="#" class="block px-4 py-2 hover:bg-gray-700">Home</a>
        <a href="#" class="block px-4 py-2 hover:bg-gray-700">About</a>
        <a href="#" class="block px-4 py-2 hover:bg-gray-700">Services</a>
        <a href="#" class="block px-4 py-2 hover:bg-gray-700">Contact</a>
    </div>
</nav>

<!-- User Avatar Section -->
<div class="p-4 bg-gray-900">
    <div class="container mx-auto flex items-center">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
        <span class="ml-2">User Name</span>
    </div>
</div>

<!-- Placeholder Image Section -->
<div class="p-4">
    <img src="https://picsum.photos/1920/1080" alt="Placeholder Image" class="w-full h-auto">
</div>