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>
관련 구성 요소
E-commerce Header 구성 요소
머티리얼 디자인 원칙과 함께 Tailwind CSS를 사용하여 구축된 반응형 전자 상거래 헤더 구성 요소입니다. 단색 색 구성표(파란색 음영), 검색 기능, 탐색 메뉴, 장바구니 및 사용자 프로필이 특징입니다. 헤더에는 그림자와 같은 깊이 효과가 포함되며 어두운 모드를 지원합니다. 이 구성 요소는 모바일 햄버거 메뉴로 완벽하게 반응합니다.