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

社交媒体导航栏

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

预览

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>

相关组件

3D_Corporate_Blues_Food_Restaurant_Nav

一个复杂的 3D 风格导航栏,适用于食品/餐厅网站,具有企业忧郁和完全响应能力,并支持深色模式。包含徽标、导航链接、搜索栏、用户头像和购物车等元素。

打开

导航栏组件

一个响应式导航栏组件,采用 Material Design 风格设计,具有三重配色方案,适用于社交媒体界面,并包含深色主题支持。

打开

导航栏

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

打开