组件 页眉 社交媒体头部

社交媒体头部

一个为社交媒体界面设计的响应式头部组件,采用暗模式用户界面,使用三元色彩方案和简洁元素。它包括一个网站标题、一个搜索栏和用户资料链接,样式适用于暗模式,使用Tailwind CSS。

预览

HTML 代码

<header class="bg-gray-900 text-gray-200 py-4 px-6 shadow-md">
  <div class="container mx-auto flex flex-wrap items-center justify-between">
    <div class="text-xl font-bold">SocialNet</div>
    <div class="flex-grow mx-4 max-w-md">
      <input type="text" placeholder="Search..." class="w-full px-3 py-2 bg-gray-800 text-gray-200 rounded-md focus:outline-none focus:ring focus:border-blue-300 dark:bg-gray-700 dark:text-gray-100 dark:focus:border-blue-600">
    </div>
    <nav>
      <a href="#" class="px-3 py-2 hover:text-blue-400 dark:hover:text-blue-500">Profile</a>
    </nav>
  </div>
</header>

相关组件

粗犷主义头部组件

一个使用 Tailwind CSS 设计的粗犷大胆的头部组件,具有高对比度和不寻常的布局,适用于明亮和深色主题。

打开

3D标题组件

一个复杂的、互动的头部组件,专为社交媒体界面设计,采用 3D 风格和灰度色彩。包括一个标志、搜索框、用户头像和操作按钮,具有响应式行为和暗模式支持。

打开

材料设计商业头部

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

打开