组件 导航栏 社交媒体导航栏

社交媒体导航栏

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

预览

HTML 代码

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

相关组件

深色模式导航栏

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

打开

社交媒体玻璃化导航栏

响应式玻璃摩尔社交媒体导航栏,带深色模式

打开

玻璃态仪表板导航栏

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

打开