CCHub Logo CCHub Tailwind Collection
组件 页眉 头部组件

头部组件

一个简单的标题组件，采用新拟态风格和鲜艳的颜色，完美适合博客/内容网页。它具有响应式设计的深色模式支持。

预览

HTML 代码 

<header class="p-4 bg-gray-200 dark:bg-gray-800 rounded-lg shadow-md flex justify-between items-center">
    <div class="flex items-center">
        <img src="https://picsum.photos/50" alt="Logo" class="rounded-full shadow-md" />
        <h1 class="text-2xl font-bold text-gray-800 dark:text-white ml-2">My Blog</h1>
    </div>
    <nav class="flex space-x-4">
        <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 transition duration-200">Home</a>
        <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 transition duration-200">About</a>
        <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 transition duration-200">Contact</a>
    </nav>
</header>

相关组件

材料设计商业头部

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

打开

头部组件

具有微交互、互补配色方案、复杂复杂性的标题组件，用于仪表板用途，使用 Tailwind CSS。

打开

Retro Vintage Header 组件

一个响应式标题组件，具有 Retro/Vintage 样式，专为支持深色主题的仪表板量身定制。

打开