구성 요소 머리글 레트로헤더 컴포넌트

레트로헤더 컴포넌트

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

미리 보기

HTML 코드

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

관련 구성 요소

복잡한 대시보드 헤더

3D 디자인 요소, 흙색 색 구성표가 있는 복잡하고 반응이 빠른 헤더 구성 요소로, 대시보드용으로 설계되었습니다. Tailwind CSS를 사용하는 어두운 테마 지원을 포함하며 데모 이미지/아바타에 picsum.photos 및 randomuser.me 사용합니다.

열다

헤더 구성 요소

다크 모드를 지원하는 반응형 헤더 구성 요소로, 로고, 탐색 링크 및 클릭 유도문안 버튼을 제공합니다. 이 디자인은 눈의 피로를 줄이기 위해 어두운 배경을 사용합니다.

열다

헤더 구성 요소

다크 모드를 지원하는 소셜 미디어를 위한 간단하고 반응이 빠른 헤더 구성 요소입니다. 로고, 검색창, 사용자 아바타가 특징입니다. 회색 음영 색 구성표를 사용합니다.

열다