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

材料设计商业头部

灵感来自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。

打开

复古古典标题组件

一个具有复古风格设计的响应式头部组件,支持暗模式,并带有受80年代和90年代启发的怀旧美学。

打开

标头组件

用于音乐/音频平台的响应式标头组件,具有等宽/开发人员设计美学,支持大地色调和深色模式。

打开