검색 구성 요소

카테고리

머리글

웹 사이트의 상단 섹션으로, 일반적으로 로고와 탐색이 포함되어 있습니다.

헤더 구성 요소

블로그 또는 콘텐츠 사이트를 위한 파스텔 색 구성표가 있는 Brutalism 스타일로 디자인된 반응형 헤더 구성 요소로, 어두운 테마 지원을 통합합니다.

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

헤더 구성 요소

생생한 색상의 Neumorphism 스타일을 사용하여 설계된 간단한 헤더 구성 요소로, 블로그/콘텐츠 웹 페이지에 적합합니다. 반응형 디자인을 위한 다크 모드 지원이 특징입니다.

열다 미리 보기

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

다크TriadicSimpleBusinessHeader

비즈니스 웹 사이트를 위한 다크 모드 지원이 있는 반응형 헤더 구성 요소

열다 미리 보기

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

헤더 구성 요소

반투명 유리와 같은 반투명 요소와 어두운 테마를 지원하는 Glassmorphism 디자인을 특징으로 하는 반응형 헤더 구성 요소입니다.

열다 미리 보기

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

레트로 빈티지 헤더 구성 요소

레트로/빈티지 디자인 스타일의 반응형 헤더 구성 요소로, 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>

스케우오 헤더 컴포넌트

Skeuomorphism 디자인, 어두운 테마 지원 및 탐색 모음이 있는 반응형 헤더 구성 요소입니다.

열다 미리 보기

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

레트로헤더 컴포넌트

반응형 효과와 어두운 테마를 지원하는 Retro/Vintage 헤더 구성 요소.

열다 미리 보기

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