组件 页眉 材料设计商业头部

材料设计商业头部

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

预览

HTML 代码

<header class="bg-blue-500 text-white py-4 shadow-md dark:bg-gray-800">
  <div class="container mx-auto flex justify-between items-center">
    <div class="text-xl font-bold">Business Name</div>
    <nav>
      <ul class="flex space-x-4">
        <li><a href="#" class="hover:text-blue-200 dark:hover:text-gray-400">Home</a></li>
        <li><a href="#" class="hover:text-blue-200 dark:hover:text-gray-400">About</a></li>
        <li><a href="#" class="hover:text-blue-200 dark:hover:text-gray-400">Services</a></li>
        <li><a href="#" class="hover:text-blue-200 dark:hover:text-gray-400">Contact</a></li>
      </ul>
    </nav>
  </div>
</header>

相关组件

头部组件

一个响应式的头部组件,具有微交互功能、小型吸引人的动画,并支持使用Tailwind CSS的暗黑主题。

打开

Cyberpunk 标头组件

用于文档或 Wiki 站点的未来主义赛博朋克主题标头组件。具有深色背景和充满活力的霓虹灯装饰(电蓝色、亮粉色、柠檬绿)、响应式导航和深色模式支持。

打开

标题组件

一个响应式页头组件,采用极简主义风格,具有淡色配色方案,适用于博客或内容网站,并包含深色主题支持。

打开