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 사용합니다.
헤더 구성 요소
다크 모드를 지원하는 반응형 헤더 구성 요소로, 로고, 탐색 링크 및 클릭 유도문안 버튼을 제공합니다. 이 디자인은 눈의 피로를 줄이기 위해 어두운 배경을 사용합니다.
헤더 구성 요소
다크 모드를 지원하는 소셜 미디어를 위한 간단하고 반응이 빠른 헤더 구성 요소입니다. 로고, 검색창, 사용자 아바타가 특징입니다. 회색 음영 색 구성표를 사용합니다.