标题 | Code Components Hub

复古古典标题组件

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

                <header class="bg-gradient-to-r from-purple-500 to-pink-500 dark:from-purple-800 dark:to-pink-700 p-6">
    <div class="container mx-auto flex justify-between items-center">
        <div class="flex items-center space-x-4">
            <img src="https://picsum.photos/40/40?random=1" alt="Logo" class="rounded-full">
            <h1 class="text-white text-3xl font-bold font-mono tracking-widest">Retro Header</h1>
        </div>
        <nav>
            <ul class="flex space-x-6 text-white">
                <li><a href="#" class="hover:text-pink-200 transition duration-300">Home</a></li>
                <li><a href="#" class="hover:text-pink-200 transition duration-300">About</a></li>
                <li><a href="#" class="hover:text-pink-200 transition duration-300">Gallery</a></li>
                <li><a href="#" class="hover:text-pink-200 transition duration-300">Contact</a></li>
            </ul>
        </nav>
    </div>
    <div class="mt-4 text-center">
        <img src="https://picsum.photos/800/200?random=1" alt="Header Image" class="rounded-lg shadow-lg mx-auto">
    </div>
</header>

<style>
    /* Dark Theme Support */
    @media (prefers-color-scheme: dark) {
        body {
            background-color: #1a1a2e;
        }
    }
</style>

SkeuoHeader组件

一个响应式头部组件，具有拟物化设计，支持暗主题，并带有导航栏。

打开预览

                <header class="bg-gray-200 dark:bg-gray-800 shadow-lg dark:shadow-none">
  <div class="container mx-auto px-6 py-4 flex items-center justify-between">
    <div class="text-xl font-semibold text-gray-800 dark:text-white">SkeuoHeader</div>
    <nav class="hidden md:flex space-x-8">
      <a href="#" class="text-gray-800 dark:text-white hover:text-gray-600 dark:hover:text-gray-300 transition duration-300">Home</a>
      <a href="#" class="text-gray-800 dark:text-white hover:text-gray-600 dark:hover:text-gray-300 transition duration-300">About</a>
      <a href="#" class="text-gray-800 dark:text-white hover:text-gray-600 dark:hover:text-gray-300 transition duration-300">Services</a>
      <a href="#" class="text-gray-800 dark:text-white hover:text-gray-600 dark:hover:text-gray-300 transition duration-300">Contact</a>
    </nav>
    <button class="md:hidden text-gray-800 dark:text-white focus:outline-none">
      <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
      </svg>
    </button>
  </div>
</header>

复古头部组件

复古/老式头部组件，具有响应效果和深色主题支持。

打开预览

                <header class="bg-gray-200 dark:bg-gray-800 text-gray-800 dark:text-white p-4">
  <div class="container mx-auto flex justify-between items-center">
    <div class="text-2xl font-bold">RetroHeader</div>
    <nav class="hidden md:flex space-x-4">
      <a href="#" class="hover:underline">Home</a>
      <a href="#" class="hover:underline">About</a>
      <a href="#" class="hover:underline">Contact</a>
    </nav>
    <div class="md:hidden">
      <button class="text-gray-800 dark:text-white focus:outline-none">
        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path></svg>
      </button>
    </div>
  </div>
</header>

页眉组件

响应式头部组件，具有微交互和暗主题支持。

打开预览

                <header class="text-gray-600 body-font">
  <div class="container mx-auto flex flex-wrap p-5 flex-col md:flex-row items-center">
    <a class="flex title-font font-medium items-center text-gray-900 mb-4 md:mb-0 dark:text-white">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-10 h-10 text-white p-2 bg-indigo-500 rounded-full" viewBox="0 0 24 24">
        <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"></path>
      </svg>
      <span class="ml-3 text-xl">Tailblocks</span>
    </a>
    <nav class="md:ml-auto flex flex-wrap items-center text-base justify-center">
      <a class="mr-5 hover:text-gray-900 dark:hover:text-white cursor-pointer transform transition duration-300 hover:scale-110">First Link</a>
      <a class="mr-5 hover:text-gray-900 dark:hover:text-white cursor-pointer transform transition duration-300 hover:scale-110">Second Link</a>
      <a class="mr-5 hover:text-gray-900 dark:hover:text-white cursor-pointer transform transition duration-300 hover:scale-110">Third Link</a>
      <a class="mr-5 hover:text-gray-900 dark:hover:text-white cursor-pointer transform transition duration-300 hover:scale-110">Fourth Link</a>
    </nav>
    <button class="inline-flex items-center bg-gray-100 border-0 py-1 px-3 focus:outline-none hover:bg-gray-200 rounded text-base mt-4 md:mt-0 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600 transform transition duration-300 hover:scale-110">
      Button
      <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-4 h-4 ml-1" viewBox="0 0 24 24">
        <path d="M5 12h14M12 5l7 7-7 7"></path>
      </svg>
    </button>
  </div>
</header>

头部组件

一个支持暗模式的响应式头部组件，包含了一个徽标、导航链接和一个号召性操作按钮。设计使用深色背景以减少眼睛疲劳。

打开预览

                <header class="bg-gray-900 text-gray-100">
  <div class="container mx-auto flex flex-wrap p-5 flex-col md:flex-row items-center">
    <a class="flex title-font font-medium items-center text-white mb-4 md:mb-0">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-10 h-10 text-white p-2 bg-indigo-500 rounded-full" viewBox="0 0 24 24">
        <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"></path>
      </svg>
      <span class="ml-3 text-xl">DarkMode Header</span>
    </a>
    <nav class="md:ml-auto flex flex-wrap items-center text-base justify-center">
      <a class="mr-5 hover:text-white">First Link</a>
      <a class="mr-5 hover:text-white">Second Link</a>
      <a class="mr-5 hover:text-white">Third Link</a>
      <a class="mr-5 hover:text-white">Fourth Link</a>
    </nav>
    <button class="inline-flex items-center bg-gray-800 border-0 py-1 px-3 focus:outline-none hover:bg-gray-700 rounded text-base mt-4 md:mt-0">Button
      <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-4 h-4 ml-1" viewBox="0 0 24 24">
        <path d="M5 12h14M12 5l7 7-7 7"></path>
      </svg>
    </button>
  </div>
</header>

头部组件

一个具有复古/古典设计的响应式头部组件，支持暗黑主题，并展现80年代/90年代的怀旧美学。

打开预览

                <header class="bg-gray-800 text-white p-5 shadow-md">
    <div class="container mx-auto flex justify-between items-center">
        <div class="flex items-center">
            <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
            <h1 class="ml-3 text-lg font-bold">Retro Header</h1>
        </div>
        <nav class="hidden md:flex space-x-4">
            <a href="#" class="text-lg hover:text-gray-400">Home</a>
            <a href="#" class="text-lg hover:text-gray-400">About</a>
            <a href="#" class="text-lg hover:text-gray-400">Services</a>
            <a href="#" class="text-lg hover:text-gray-400">Contact</a>
        </nav>
        <button class="md:hidden focus:outline-none">
            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"></path>
            </svg>
        </button>
    </div>
    <div class="mt-4 text-center">
        <img class="mx-auto rounded-lg shadow-lg" src="https://picsum.photos/400/200?random=1" alt="Random Placeholder">
        <p class="mt-2 text-sm text-gray-400">A touch of nostalgia from the 80s/90s.</p>
    </div>
</header>
<style>
@media (prefers-color-scheme: dark) {
    header {
        background-color: #1c1c1c;
    }
    a {
        color: #cbd5e1;
    }
    a:hover {
        color: #f3f4f6;
    }
}
</style>

头部组件

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

打开预览

                <header class="bg-white dark:bg-gray-800 shadow-md p-4 transition duration-500">
    <div class="flex justify-between items-center">
        <div class="flex items-center">
            <img src="https://picsum.photos/40" alt="Logo" class="h-10 w-10 rounded-full mr-2 transition-transform duration-300 transform hover:scale-110" />
            <h1 class="text-xl font-bold text-gray-800 dark:text-white transition-colors duration-500">My Website</h1>
        </div>
        <nav>
            <ul class="flex space-x-4">
                <li class="group">
                    <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 transition-all duration-300">Home</a>
                </li>
                <li class="group">
                    <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 transition-all duration-300">About</a>
                </li>
                <li class="group">
                    <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 transition-all duration-300">Services</a>
                </li>
                <li class="group">
                    <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 transition-all duration-300">Contact</a>
                </li>
            </ul>
        </nav>
        <div class="relative">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="h-10 w-10 rounded-full border-2 border-gray-300 dark:border-gray-600 transition-transform duration-300 transform hover:scale-110" />
        </div>
    </div>
</header>

粗犷主义头部组件

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

打开预览

                <header class="bg-gray-900 text-white p-6">
    <div class="flex justify-between items-center">
        <div class="flex items-center space-x-4">
            <img src="https://picsum.photos/50" alt="Logo" class="w-16 h-16 rounded-full border-4 border-yellow-500">
            <h1 class="text-3xl font-bold">Brutalist Header</h1>
        </div>
        <nav class="flex space-x-6">
            <a href="#" class="text-yellow-300 hover:underline">Home</a>
            <a href="#" class="text-yellow-300 hover:underline">About</a>
            <a href="#" class="text-yellow-300 hover:underline">Services</a>
            <a href="#" class="text-yellow-300 hover:underline">Contact</a>
        </nav>
    </div>
    <div class="mt-4 pt-4 border-t border-yellow-500 flex flex-col space-y-2">
        <h2 class="text-xl font-bold">Welcome to the Brutalist World</h2>
        <p class="text-sm">This is a header component that embodies the raw and bold aesthetics of Brutalism.</p>
    </div>
</header>

<style>
    @media (prefers-color-scheme: dark) {
        header {
            background-color: #1c1917;
            color: #f9fafb;
        }
        a {
            color: #fbbf24;
        }
    }
</style>

类别

标题