标题 | Code Components Hub

拟物化三分法简单作品集头部组件

拟物化三元色简单作品集头部组件

                <header class="bg-gradient-to-b from-gray-200 to-gray-400 via-gray-300 dark:from-gray-800 dark:to-gray-900 dark:via-gray-700 p-6 shadow-xl">
  <div class="container mx-auto flex justify-between items-center">
    </div>
</header>

页眉组件

一个极简主义的扁平设计头部组件，专为投资组合设计，特色是响应式设计，支持深色主题和多个互动元素。

打开预览

                <header class="bg-white dark:bg-gray-800 shadow-md">
    <div class="container mx-auto px-4 py-4 flex justify-between items-center">
        <div class="flex items-center">
            <img src="https://picsum.photos/50" alt="Logo" class="h-10 w-10 rounded-full">
            <h1 class="ml-3 text-gray-800 dark:text-white text-xl font-bold">My Portfolio</h1>
        </div>
        <nav class="hidden md:flex space-x-8">
            <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100">Home</a>
            <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100">About</a>
            <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100">Projects</a>
            <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100">Contact</a>
        </nav>
        <div class="relative md:hidden">
            <button class="text-gray-600 dark:text-gray-300 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>
</header>
<div class="block md:hidden bg-gray-100 dark:bg-gray-700">
    <div class="container mx-auto px-4 py-2">
        <div class="flex flex-col space-y-2">
            <a href="#" class="block text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100">Home</a>
            <a href="#" class="block text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100">About</a>
            <a href="#" class="block text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100">Projects</a>
            <a href="#" class="block text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100">Contact</a>
        </div>
    </div>
</div>

社交媒体头部

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

打开预览

                <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>

标题组件

一个响应式页头组件，采用极简主义风格，具有淡色配色方案，适用于博客或内容网站，并包含深色主题支持。

打开预览

                <header class="bg-pastel-100 dark:bg-gray-800 p-6 flex items-center justify-between">
    <div class="flex items-center space-x-3">
        <img src="https://picsum.photos/50/50" alt="Logo" class="rounded-full">
        <h1 class="text-xl font-bold text-gray-900 dark:text-white">My Blog</h1>
    </div>
    <nav class="space-x-4">
        <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition duration-300">Home</a>
        <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition duration-300">About</a>
        <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition duration-300">Blog</a>
        <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition duration-300">Contact</a>
    </nav>
    <div class="flex items-center space-x-2">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
        <span class="text-gray-900 dark:text-white">Username</span>
    </div>
</header>

<style>
    @tailwind base;
    @tailwind components;
    @tailwind utilities;

    @layer base {
        /* Define pastel colors */
        .bg-pastel-100 {
            background-color: #F9D7C1;
        }
    }
</style>

头部组件

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

打开预览

                <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的简单头部组件，配有互补色彩方案，适用于商业网站。响应式设计，支持深色主题。

打开预览

                <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>

暗三元简单商业头部

适用于商业网站的响应式头部组件，支持黑暗模式

打开预览

                <header class="bg-gray-900 text-gray-300 dark:bg-gray-dark dark:text-gray-light shadow-md">
  <div class="container mx-auto px-6 py-4">
    <div class="flex items-center justify-between">
      <div class="text-xl font-bold text-white dark:text-white">Business Name</div>
      <nav class="space-x-4">
        <a href="#" class="hover:text-white dark:hover:text-white">Home</a>
        <a href="#" class="hover:text-white dark:hover:text-white">About</a>
        <a href="#" class="hover:text-white dark:hover:text-white">Services</a>
        <a href="#" class="hover:text-white dark:hover:text-white">Contact</a>
      </nav>
    </div>
  </div>
</header>

3D标题组件

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

打开预览

                <header class="bg-white dark:bg-gray-800 shadow-lg rounded-lg p-4 flex items-center justify-between">
    <div class="flex items-center">
        <img src="https://picsum.photos/50/50" alt="Logo" class="rounded-full shadow-lg">
        <h1 class="ml-3 text-gray-800 dark:text-white text-xl font-bold">Social Media App</h1>
    </div>
    <div class="flex-grow mx-4">
        <input type="text" placeholder="Search..." class="bg-gray-200 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg px-4 py-2 w-full focus:outline-none focus:ring-2 focus:ring-gray-500 dark:focus:ring-gray-400 transition-shadow duration-300 shadow-md dark:shadow-lg" />
    </div>
    <div class="flex items-center">
        <button class="bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors duration-300 p-2 rounded-lg shadow-md dark:shadow-lg mr-2">
            <img src="https://randomuser.me/api/portraits/men/10.jpg" alt="Avatar" class="rounded-full w-8 h-8">
        </button>
        <button class="bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors duration-300 p-2 rounded-lg shadow-md dark:shadow-lg">
            <img src="https://randomuser.me/api/portraits/women/10.jpg" alt="Avatar" class="rounded-full w-8 h-8">
        </button>
    </div>
</header>

头部组件

一个具有玻璃态设计的响应式头部组件，配备有磨砂玻璃状的透明元素和暗黑主题支持。

打开预览

                <header class="bg-white bg-opacity-30 backdrop-blur-lg dark:bg-gray-800 dark:bg-opacity-60 shadow-lg p-4 flex justify-between items-center">
    <div class="flex items-center">
        <img src="https://picsum.photos/50/50" alt="Logo" class="rounded-full mr-2">
        <h1 class="text-xl font-bold text-gray-900 dark:text-white">My Website</h1>
    </div>
    <nav class="space-x-4">
        <a href="#" class="text-gray-800 dark:text-gray-200 hover:underline">Home</a>
        <a href="#" class="text-gray-800 dark:text-gray-200 hover:underline">About</a>
        <a href="#" class="text-gray-800 dark:text-gray-200 hover:underline">Services</a>
        <a href="#" class="text-gray-800 dark:text-gray-200 hover:underline">Contact</a>
    </nav>
    <div class="flex items-center">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="rounded-full w-10 h-10">
    </div>
</header>

3D设计标题

一个具有 3D 设计元素和支持深色模式的响应式头部组件。

打开预览

                <header class="bg-white shadow-lg dark:bg-gray-800">
  <div class="container mx-auto px-6 py-4">
    <div class="flex items-center justify-between">
      <div class="text-xl font-semibold text-gray-700 dark:text-white">3D Header</div>
      <div class="hidden md:block">
        <nav>
          <a href="#" class="text-gray-600 hover:text-gray-800 dark:text-gray-300 dark:hover:text-white px-4">Home</a>
          <a href="#" class="text-gray-600 hover:text-gray-800 dark:text-gray-300 dark:hover:text-white px-4">About</a>
          <a href="#" class="text-gray-600 hover:text-gray-800 dark:text-gray-300 dark:hover:text-white px-4">Contact</a>
        </nav>
      </div>
    </div>
  </div>
</header>

类别

标题