组件 页眉 3D设计标题

3D设计标题

一个具有 3D 设计元素和支持深色模式的响应式头部组件。

预览

HTML 代码

<header class="bg-white shadow-lg dark:bg-gray-800">
  <div class="container mx-auto px-6 py-4">
    <div class="flex items-center justify-between">
      <div class="text-xl font-semibold text-gray-700 dark:text-white">3D Header</div>
      <div class="hidden md:block">
        <nav>
          <a href="#" class="text-gray-600 hover:text-gray-800 dark:text-gray-300 dark:hover:text-white px-4">Home</a>
          <a href="#" class="text-gray-600 hover:text-gray-800 dark:text-gray-300 dark:hover:text-white px-4">About</a>
          <a href="#" class="text-gray-600 hover:text-gray-800 dark:text-gray-300 dark:hover:text-white px-4">Contact</a>
        </nav>
      </div>
    </div>
  </div>
</header>

相关组件

Neon_Glow_Header_Component

适用于 SaaS 应用程序的响应式标头组件,具有霓虹灯/发光效果和糖果/甜蜜的配色方案,具有深色模式支持和交互元素。

打开

暗三元简单商业头部

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

打开

材料设计商业头部

灵感来自Material Design的简单头部组件,配有互补色彩方案,适用于商业网站。响应式设计,支持深色主题。

打开