组件 页眉 暗三元简单商业头部

暗三元简单商业头部

适用于商业网站的响应式头部组件,支持黑暗模式

预览

HTML 代码

<header class="bg-gray-900 text-gray-300 dark:bg-gray-dark dark:text-gray-light shadow-md">
  <div class="container mx-auto px-6 py-4">
    <div class="flex items-center justify-between">
      <div class="text-xl font-bold text-white dark:text-white">Business Name</div>
      <nav class="space-x-4">
        <a href="#" class="hover:text-white dark:hover:text-white">Home</a>
        <a href="#" class="hover:text-white dark:hover:text-white">About</a>
        <a href="#" class="hover:text-white dark:hover:text-white">Services</a>
        <a href="#" class="hover:text-white dark:hover:text-white">Contact</a>
      </nav>
    </div>
  </div>
</header>

相关组件

页眉组件

响应式头部组件,具有微交互和暗主题支持。

打开

社交媒体标头组件

一个复杂的深色模式响应式标题组件,具有极简主义设计和互补的配色方案,专为社交媒体界面而设计。

打开

电子商务标题组件

使用 Tailwind CSS 和 Material Design 原则构建的响应式电子商务标头组件。具有单色配色方案(蓝色阴影)、搜索功能、导航菜单、购物车和用户配置文件。该标题包括阴影等深度效果,并支持深色模式。该组件通过移动汉堡菜单完全响应。

打开