搜索组件

类别

组件导航组件

导航组件

帮助用户在网站上导航并找到内容的组件

导航组件组件

一个复杂的响应式仪表板导航组件，具有微交互和类似的配色方案，并支持深色模式。利用 Tailwind CSS 进行样式设置，并在不依赖 JavaScript 的情况下包含交互式元素。

                <nav class="bg-gradient-to-r from-teal-400 via-emerald-500 to-cyan-500 dark:from-teal-800 dark:via-emerald-900 dark:to-cyan-900 p-4 shadow-lg">
  <div class="container mx-auto flex justify-between items-center">
    <div class="text-white text-2xl font-bold">Dashboard</div>
    <div class="hidden md:flex space-x-6">
      <a href="#" class="text-white hover:text-gray-200 transition duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-105 relative group">
        Home
        <span class="absolute bottom-0 left-0 w-full h-0.5 bg-white scale-x-0 group-hover:scale-x-100 transition-transform duration-300 ease-out"></span>
      </a>
      <a href="#" class="text-white hover:text-gray-200 transition duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-105 relative group">
        Analytics
        <span class="absolute bottom-0 left-0 w-full h-0.5 bg-white scale-x-0 group-hover:scale-x-100 transition-transform duration-300 ease-out"></span>
      </a>
      <a href="#" class="text-white hover:text-gray-200 transition duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-105 relative group">
        Reports
        <span class="absolute bottom-0 left-0 w-full h-0.5 bg-white scale-x-0 group-hover:scale-x-100 transition-transform duration-300 ease-out"></span>
      </a>
      <a href="#" class="text-white hover:text-gray-200 transition duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-105 relative group">
        Settings
        <span class="absolute bottom-0 left-0 w-full h-0.5 bg-white scale-x-0 group-hover:scale-x-100 transition-transform duration-300 ease-out"></span>
      </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 12h16M4 18h16"></path>
        </svg>
      </button>
    </div>
  </div>
  <div class="md:hidden mt-4">
    <a href="#" class="block text-white hover:text-gray-200 py-2 transition duration-300 ease-in-out transform hover:translate-x-2">Home</a>
    <a href="#" class="block text-white hover:text-gray-200 py-2 transition duration-300 ease-in-out transform hover:translate-x-2">Analytics</a>
    <a href="#" class="block text-white hover:text-gray-200 py-2 transition duration-300 ease-in-out transform hover:translate-x-2">Reports</a>
    <a href="#" class="block text-white hover:text-gray-200 py-2 transition duration-300 ease-in-out transform hover:translate-x-2">Settings</a>
  </div>
</nav>

导航组件组件

一个响应式导航组件，具有鲜艳的色彩和微交互，专为投资组合而设计。

打开预览

                <nav class="bg-gradient-to-r from-purple-500 via-pink-500 to-red-500 dark:from-purple-800 dark:via-pink-800 dark:to-red-800 p-4 shadow-lg">
  <div class="container mx-auto flex justify-between items-center">
    <a href="#" class="text-white text-2xl font-bold transform hover:scale-105 transition-transform duration-300">My Portfolio</a>
    <ul class="flex space-x-6">
      <li><a href="#" class="text-white hover:text-yellow-300 dark:hover:text-yellow-200 transition-colors duration-200 relative group">
        Home
        <span class="absolute left-0 bottom-0 w-0 h-0.5 bg-yellow-300 dark:bg-yellow-200 transition-all duration-300 group-hover:w-full"></span>
      </a></li>
      <li><a href="#" class="text-white hover:text-yellow-300 dark:hover:text-yellow-200 transition-colors duration-200 relative group">
        Work
        <span class="absolute left-0 bottom-0 w-0 h-0.5 bg-yellow-300 dark:bg-yellow-200 transition-all duration-300 group-hover:w-full"></span>
      </a></li>
      <li><a href="#" class="text-white hover:text-yellow-300 dark:hover:text-yellow-200 transition-colors duration-200 relative group">
        About
        <span class="absolute left-0 bottom-0 w-0 h-0.5 bg-yellow-300 dark:bg-yellow-200 transition-all duration-300 group-hover:w-full"></span>
      </a></li>
      <li><a href="#" class="text-white hover:text-yellow-300 dark:hover:text-yellow-200 transition-colors duration-200 relative group">
        Contact
        <span class="absolute left-0 bottom-0 w-0 h-0.5 bg-yellow-300 dark:bg-yellow-200 transition-all duration-300 group-hover:w-full"></span>
      </a></li>
    </ul>
  </div>
</nav>

导航组件组件

用于仪表板的复古导航组件，具有具有互补色的复杂布局、响应式设计和使用 Tailwind CSS 的深色主题支持。它包括 logo、导航链接、搜索栏和用户配置文件信息。

打开预览

                <nav class="bg-gradient-to-r from-purple-800 to-indigo-800 dark:from-gray-900 dark:to-gray-700 p-4 shadow-lg">
  <div class="container mx-auto flex flex-wrap items-center justify-between">
    <div class="flex items-center space-x-4">
      <a href="#" class="text-white text-3xl font-bold font-mono tracking-wider">RETRO-DASH</a>
      <div class="hidden md:flex space-x-6 ml-8">
        <a href="#" class="text-purple-200 hover:text-white text-lg transition duration-300 ease-in-out transform hover:scale-105">Dashboard</a>
        <a href="#" class="text-purple-200 hover:text-white text-lg transition duration-300 ease-in-out transform hover:scale-105">Analytics</a>
        <a href="#" class="text-purple-200 hover:text-white text-lg transition duration-300 ease-in-out transform hover:scale-105">Reports</a>
        <a href="#" class="text-purple-200 hover:text-white text-lg transition duration-300 ease-in-out transform hover:scale-105">Settings</a>
      </div>
    </div>

    <div class="flex items-center space-x-6 mt-4 md:mt-0">
      <div class="relative">
        <input type="text" placeholder="Search..." class="bg-purple-700 dark:bg-gray-800 text-white placeholder-purple-300 dark:placeholder-gray-500 rounded-full py-2 pl-4 pr-10 focus:outline-none focus:ring-2 focus:ring-purple-400 dark:focus:ring-gray-600 transition duration-300 ease-in-out w-48 md:w-64">
        <svg class="w-5 h-5 text-purple-300 dark:text-gray-500 absolute right-3 top-2.5" 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 class="relative group">
        <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-purple-400 dark:border-gray-600 cursor-pointer">
        <div class="absolute right-0 mt-2 w-48 bg-white dark:bg-gray-800 rounded-md shadow-xl py-1 hidden group-hover:block transition duration-300 ease-in-out z-10">
          <a href="#" class="block px-4 py-2 text-gray-800 dark:text-gray-200 hover:bg-purple-100 dark:hover:bg-gray-700">Profile</a>
          <a href="#" class="block px-4 py-2 text-gray-800 dark:text-gray-200 hover:bg-purple-100 dark:hover:bg-gray-700">Settings</a>
          <a href="#" class="block px-4 py-2 text-gray-800 dark:text-gray-200 hover:bg-purple-100 dark:hover:bg-gray-700">Logout</a>
        </div>
      </div>

      <button class="md:hidden text-white focus:outline-none">
        <svg class="w-8 h-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="M4 6h16M4 12h16M4 18h16"></path></svg>
      </button>
    </div>

    <div class="w-full md:hidden mt-4">
      <div class="flex flex-col space-y-2">
        <a href="#" class="text-purple-200 hover:text-white text-lg transition duration-300 ease-in-out transform hover:scale-105">Dashboard</a>
        <a href="#" class="text-purple-200 hover:text-white text-lg transition duration-300 ease-in-out transform hover:scale-105">Analytics</a>
        <a href="#" class="text-purple-200 hover:text-white text-lg transition duration-300 ease-in-out transform hover:scale-105">Reports</a>
        <a href="#" class="text-purple-200 hover:text-white text-lg transition duration-300 ease-in-out transform hover:scale-105">Settings</a>
      </div>
    </div>
  </div>
</nav>

RetroPortfolio导航

Retro/Vintage Navigation Component for Portfolio，支持柔和的配色方案、响应式和深色模式。

打开预览

                <nav class="bg-gradient-to-r from-pink-200 via-purple-200 to-indigo-200 dark:from-gray-800 dark:via-gray-700 dark:to-gray-600 p-6 shadow-lg font-mono">
  <div class="container mx-auto flex flex-wrap items-center justify-between">
    <a href="#" class="flex items-center space-x-3 rtl:space-x-reverse mb-4 md:mb-0">
      <span class="self-center text-3xl font-semibold whitespace-nowrap text-gray-800 dark:text-gray-100">
        My Portfolio
      </span>
    </a>
    <button data-collapse-toggle="navbar-default" type="button" class="inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600" aria-controls="navbar-default" aria-expanded="false">
      <span class="sr-only">Open main menu</span>
      <svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 17 14">
        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 1h15M1 7h15M1 13h15"/>
      </svg>
    </button>
    <div class="hidden w-full md:block md:w-auto" id="navbar-default">
      <ul class="font-medium flex flex-col p-4 md:p-0 mt-4 border border-gray-100 rounded-lg bg-gray-50 md:flex-row md:space-x-8 rtl:space-x-reverse md:mt-0 md:border-0 md:bg-transparent dark:bg-gray-800 dark:border-gray-700">
        <li>
          <a href="#" class="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-purple-700 md:p-0 dark:text-gray-100 md:dark:hover:text-purple-400 dark:hover:bg-gray-700 dark:hover:text-gray-100 md:dark:hover:bg-transparent transition duration-300 ease-in-out" aria-current="page">Home</a>
        </li>
        <li>
          <a href="#" class="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-purple-700 md:p-0 dark:text-gray-100 md:dark:hover:text-purple-400 dark:hover:bg-gray-700 dark:hover:text-gray-100 md:dark:hover:bg-transparent transition duration-300 ease-in-out">Projects</a>
        </li>
        <li>
          <a href="#" class="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-purple-700 md:p-0 dark:text-gray-100 md:dark:hover:text-purple-400 dark:hover:bg-gray-700 dark:hover:text-gray-100 md:dark:hover:bg-transparent transition duration-300 ease-in-out">About</a>
        </li>
        <li>
          <a href="#" class="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-purple-700 md:p-0 dark:text-gray-100 md:dark:hover:text-purple-400 dark:hover:bg-gray-700 dark:hover:text-gray-100 md:dark:hover:bg-transparent transition duration-300 ease-in-out">Contact</a>
        </li>
        <li>
          <div class="relative group">
            <button id="dropdownNavbarLink" data-dropdown-toggle="dropdownNavbar" class="flex items-center justify-between w-full py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-purple-700 md:p-0 md:w-auto dark:text-gray-100 md:dark:hover:text-purple-400 dark:focus:text-gray-100 dark:hover:bg-gray-700 md:dark:hover:bg-transparent">Dropdown
              <svg class="w-2.5 h-2.5 ms-2.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 4 4 4-4"/>
              </svg>
            </button>
            <!-- Dropdown menu -->
            <div id="dropdownNavbar" class="z-10 hidden font-normal bg-white divide-y divide-gray-100 rounded-lg shadow w-44 dark:bg-gray-700 dark:divide-gray-600 absolute group-hover:block">
              <ul class="py-2 text-sm text-gray-700 dark:text-gray-400" aria-labelledby="dropdownLargeButton">
                <li>
                  <a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Dashboard</a>
                </li>
                <li>
                  <a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Settings</a>
                </li>
                <li>
                  <a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Earnings</a>
                </li>
              </ul>
              <div class="py-1">
                <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white">Sign out</a>
              </div>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</nav>

导航组件组件

Glassmorphism 单色中等电子商务导航组件，支持深色模式

打开预览

                <nav class="p-4 backdrop-filter backdrop-blur-lg bg-opacity-20 bg-gray-100 dark:bg-gray-800 dark:bg-opacity-20 text-gray-800 dark:text-white shadow-lg">
  <div class="container mx-auto flex flex-wrap items-center justify-between">

    <!-- Logo or Brand Name -->
    <a href="#" class="text-xl font-bold p-2">ShopSphere</a>

    <!-- Mobile Menu Button -->
    <button class="lg:hidden p-2 rounded-md focus:outline-none focus:ring-2 focus:ring-gray-300">
      <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>

    <!-- Navigation Links -->
    <div class="hidden lg:flex flex-grow items-center justify-center" id="navbar-collapse">
      <ul class="flex flex-col lg:flex-row gap-1 lg:gap-4">
        <li><a href="#" class="block p-2 hover:bg-white hover:bg-opacity-30 rounded-md transition duration-300">Home</a></li>
        <li><a href="#" class="block p-2 hover:bg-white hover:bg-opacity-30 rounded-md transition duration-300">Products</a></li>
        <li><a href="#" class="block p-2 hover:bg-white hover:bg-opacity-30 rounded-md transition duration-300">Categories</a></li>
        <li><a href="#" class="block p-2 hover:bg-white hover:bg-opacity-30 rounded-md transition duration-300">About Us</a></li>
        <li><a href="#" class="block p-2 hover:bg-white hover:bg-opacity-30 rounded-md transition duration-300">Contact</a></li>
      </ul>
    </div>

    <!-- Search and Cart Icons -->
    <div class="flex items-center gap-2 p-2">
        <a href="#" class="p-2 hover:bg-white hover:bg-opacity-30 rounded-md transition duration-300">
            <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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
        </a>
        <a href="#" class="p-2 hover:bg-white hover:bg-opacity-30 rounded-md transition duration-300 relative">
            <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="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"></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 bg-red-600 rounded-full">3</span>
        </a>
    </div>

  </div>
</nav>

复古电商导航栏

用于电子商务的复古/复古风格的灰度导航组件，具有中等复杂性，具有悬停和下拉列表等交互元素。它是响应式的，包括使用 Tailwind CSS 的深色模式支持。

打开预览

                <nav class="bg-white text-gray-700 dark:bg-gray-900 dark:text-gray-300 shadow-md">
  <div class="container mx-auto px-4 py-4 flex justify-between items-center">
    <div class="text-lg font-bold">RetroShop</div>
    <div class="hidden md:flex space-x-6">
      <a href="#" class="hover:text-gray-900 dark:hover:text-white transition duration-300">Home</a>
      <div class="relative group">
        <button class="hover:text-gray-900 dark:hover:text-white transition duration-300">Shop</button>
        <div class="absolute hidden group-hover:block bg-white dark:bg-gray-800 shadow-lg mt-2 py-2 w-48">
          <a href="#" class="block px-4 py-2 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">All Products</a>
          <a href="#" class="block px-4 py-2 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">Category 1</a>
          <a href="#" class="block px-4 py-2 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">Category 2</a>
        </div>
      </div>
      <a href="#" class="hover:text-gray-900 dark:hover:text-white transition duration-300">About</a>
      <a href="#" class="hover:text-gray-900 dark:hover:text-white transition duration-300">Contact</a>
    </div>
    <div class="flex items-center space-x-4">
      <a href="#" class="hover:text-gray-900 dark:hover:text-white transition duration-300">
        <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 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z" />
        </svg>
      </a>
      <button class="md:hidden">
        <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 12h16M4 18h16" />
        </svg>
      </button>
    </div>
  </div>
  </nav>

复古社交媒体导航

具有社交媒体深色模式的响应式导航组件（复古/复古、大地色调、中等复杂度）

打开预览

                <nav class="bg-stone-200 dark:bg-stone-800 p-4">
  <div class="container mx-auto flex items-center justify-between">
    <div class="text-xl font-bold text-stone-800 dark:text-stone-200">SocialApp</div>
    <ul class="flex space-x-4">
      <li><a href="#" class="text-stone-600 dark:text-stone-400 hover:text-stone-800 dark:hover:text-stone-200">Feed</a></li>
      <li><a href="#" class="text-stone-600 dark:text-stone-400 hover:text-stone-800 dark:hover:text-stone-200">Profile</a></li>
      <li><a href="#" class="text-stone-600 dark:text-stone-400 hover:text-stone-800 dark:hover:text-stone-200">Messages</a></li>
      <li><a href="#" class="text-stone-600 dark:text-stone-400 hover:text-stone-800 dark:hover:text-stone-200">Settings</a></li>
    </ul>
  </div>
</nav>

导航组件

采用野兽派风格设计的导航组件，为社交媒体界面提供柔和的配色方案，具有响应式布局和深色主题支持。

打开预览

                <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>

粗野主义导航组件

一个响应式导航组件，采用粗野派风格设计，展示单色配色方案，非常适合投资组合网站。功能包括具有高对比度的粗体布局、使用 Tailwind CSS 的深色模式支持以及下拉列表或按钮链接等交互式元素。

打开预览

                <nav class="bg-gray-900 dark:bg-gray-800 p-5 flex justify-between items-center">
    <div class="text-white font-bold text-2xl">
        Portfolio
    </div>
    <ul class="flex space-x-6">
        <li>
            <a href="#" class="text-gray-300 hover:text-white transition duration-200">Home</a>
        </li>
        <li>
            <a href="#" class="text-gray-300 hover:text-white transition duration-200">About</a>
        </li>
        <li>
            <a href="#" class="text-gray-300 hover:text-white transition duration-200">Projects</a>
        </li>
        <li>
            <a href="#" class="text-gray-300 hover:text-white transition duration-200">Contact</a>
        </li>
    </ul>
    <div class="relative group">
        <button class="text-gray-300 hover:text-white transition duration-200 focus:outline-none">
            Menu
        </button>
        <div class="absolute left-0 mt-2 w-48 bg-gray-700 dark:bg-gray-600 rounded-md shadow-xl opacity-0 group-hover:opacity-100 transition duration-200 ease-in-out">
            <a href="#" class="block px-4 py-2 text-gray-200 hover:bg-gray-800 dark:hover:bg-gray-700">Action 1</a>
            <a href="#" class="block px-4 py-2 text-gray-200 hover:bg-gray-800 dark:hover:bg-gray-700">Action 2</a>
        </div>
    </div>
</nav>

<section class="bg-gray-800 dark:bg-gray-900 p-10">
    <h2 class="text-white text-3xl font-bold mb-4">Featured Projects</h2>
    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
        <div class="bg-gray-700 dark:bg-gray-600 rounded-lg shadow-lg overflow-hidden">
            <img src="https://picsum.photos/400/300?random=1" alt="Project 1" class="w-full">
            <div class="p-4">
                <h3 class="text-xl text-white font-semibold">Project Title 1</h3>
                <p class="text-gray-300">Short description of project 1.</p>
            </div>
        </div>
        <div class="bg-gray-700 dark:bg-gray-600 rounded-lg shadow-lg overflow-hidden">
            <img src="https://picsum.photos/400/300?random=2" alt="Project 2" class="w-full">
            <div class="p-4">
                <h3 class="text-xl text-white font-semibold">Project Title 2</h3>
                <p class="text-gray-300">Short description of project 2.</p>
            </div>
        </div>
        <div class="bg-gray-700 dark:bg-gray-600 rounded-lg shadow-lg overflow-hidden">
            <img src="https://picsum.photos/400/300?random=3" alt="Project 3" class="w-full">
            <div class="p-4">
                <h3 class="text-xl text-white font-semibold">Project Title 3</h3>
                <p class="text-gray-300">Short description of project 3.</p>
            </div>
        </div>
    </div>
</section>

导航组件

一个复杂的导航组件，采用 3D 设计，适用于博客，具有三元配色方案和响应式深色主题支持。

打开预览

                <nav class="bg-gray-800 p-5 shadow-lg rounded-lg relative overflow-hidden">
    <div class="absolute inset-0 transform -translate-x-2 -translate-y-2 bg-gradient-to-r from-blue-500 to-green-500 opacity-20 rounded-lg"></div>
    <h1 class="text-white text-3xl font-bold relative z-10">My Blog</h1>
    <ul class="flex space-x-4 mt-4">
        <li class="relative group">
            <a href="#" class="text-blue-300 hover:text-blue-500 relative z-10 transition ease-in-out duration-300 border-b-2 border-transparent group-hover:border-blue-500">Home</a>
        </li>
        <li class="relative group">
            <a href="#" class="text-green-300 hover:text-green-500 relative z-10 transition ease-in-out duration-300 border-b-2 border-transparent group-hover:border-green-500">About</a>
        </li>
        <li class="relative group">
            <a href="#" class="text-red-300 hover:text-red-500 relative z-10 transition ease-in-out duration-300 border-b-2 border-transparent group-hover:border-red-500">Contact</a>
        </li>
        <li class="relative group">
            <a href="#" class="text-yellow-300 hover:text-yellow-500 relative z-10 transition ease-in-out duration-300 border-b-2 border-transparent group-hover:border-yellow-500">Blog</a>
        </li>
    </ul>
    <div class="mt-5 flex items-center justify-between">
        <div class="flex items-center space-x-2">
            <img src="https://randomuser.me/api/portraits/lego/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full border-2 border-white">
            <span class="text-white">Welcome, User!</span>
        </div>
        <button class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 transition ease-in-out duration-300">Search</button>
    </div>
</nav>

<!-- Dark Mode Styling -->
<nav class="dark:bg-gray-900 dark:text-gray-200 dark:shadow-2xl">
    <div class="dark:bg-gradient-to-r dark:from-blue-600 dark:to-green-600 dark:opacity-30 dark:rounded-lg"></div>
    <h1 class="dark:text-white">My Blog</h1>
    <ul class="space-x-4">
        <li>
            <a href="#" class="dark:text-blue-500 hover:dark:text-blue-400">Home</a>
        </li>
        <li>
            <a href="#" class="dark:text-green-500 hover:dark:text-green-400">About</a>
        </li>
        <li>
            <a href="#" class="dark:text-red-500 hover:dark:text-red-400">Contact</a>
        </li>
        <li>
            <a href="#" class="dark:text-yellow-500 hover:dark:text-yellow-400">Blog</a>
        </li>
    </ul>
    <div class="flex items-center justify-between">
        <div class="flex items-center">
            <img src="https://randomuser.me/api/portraits/lego/1.jpg" alt="Avatar" class="rounded-full">
            <span>Welcome, User!</span>
        </div>
        <button class="bg-blue-600 text-white">Search</button>
    </div>
</nav>