组件 页眉 标头组件

标头组件

一个响应式标题组件,用于仪表板,具有微交互和鲜艳的色彩,支持深色主题。

预览

HTML 代码

<header class="bg-blue-600 dark:bg-gray-800 p-4 flex justify-between items-center transition-all duration-300">
    <div class="flex items-center space-x-4">
        <img src="https://picsum.photos/40/40" alt="Logo" class="rounded-full h-10 w-10 hover:scale-110 transition-transform duration-300">
        <h1 class="text-white text-xl font-bold hover:text-blue-300 transition-colors duration-300">Dashboard</h1>
    </div>
    <nav class="hidden md:flex space-x-6">
        <a href="#" class="text-white hover:text-blue-300 transition-colors duration-300">Home</a>
        <a href="#" class="text-white hover:text-blue-300 transition-colors duration-300">Reports</a>
        <a href="#" class="text-white hover:text-blue-300 transition-colors duration-300">Settings</a>
    </nav>
    <div class="flex items-center space-x-4">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="rounded-full h-10 w-10 border-2 border-white hover:border-blue-300 transition-all duration-300">
        <button class="bg-blue-700 dark:bg-blue-500 text-white px-4 py-2 rounded-lg hover:bg-blue-500 transition-colors duration-300">Logout</button>
    </div>
</header>

相关组件

标头组件

一个简单的响应式标题组件,适用于博客或内容网站,具有单色样式和深色模式支持,专注于将鼠标悬停在导航链接上时进行细微的微交互。

打开

3D标题组件

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

打开

电子商务标题组件

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

打开