导航组件

一个响应式导航组件,支持暗模式,使用Tailwind CSS。它包括一个徽标、导航链接和一个行动号召按钮。

预览

HTML 代码

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

相关组件

Brutalist_Dating_Navigation_Simple

一款适用于约会/社交应用的简单、野兽派风格的导航栏,具有高对比度元素、温暖的中性色和完全响应能力,并支持深色模式。

打开

RetroDashboard导航

一个复杂的复古主题仪表板导航组件,具有三元配色方案,专为数据可视化和控制面板而设计。具有响应式设计、深色模式支持和受 80 年代/90 年代美学启发的多种互动元素。

打开

粗犷风格社交媒体导航

一个响应式导航组件,采用野兽派风格,适用于社交媒体应用程序,采用互补的配色方案和最少的元素。

打开