레트로 빈티지 헤더 구성 요소
레트로/빈티지 스타일의 반응형 헤더 구성 요소로, 어두운 테마를 지원하는 대시보드에 맞게 조정됩니다.
HTML 코드
<header class="bg-gradient-to-r from-purple-700 via-pink-500 to-yellow-500 dark:bg-gradient-to-r dark:from-purple-900 dark:via-pink-700 dark:to-yellow-700 p-5">
<div class="flex justify-between items-center">
<div class="flex items-center">
<img src="https://picsum.photos/50" alt="Logo" class="rounded-full mr-3">
<h1 class="text-white text-3xl font-bold">My Dashboard</h1>
</div>
<nav class="space-x-4">
<a href="#" class="text-white transition duration-300 ease-in-out hover:text-yellow-300">Home</a>
<a href="#" class="text-white transition duration-300 ease-in-out hover:text-yellow-300">Reports</a>
<a href="#" class="text-white transition duration-300 ease-in-out hover:text-yellow-300">Settings</a>
</nav>
</div>
<div class="mt-4">
<input type="text" placeholder="Search..." class="p-2 rounded-md bg-white dark:bg-gray-800 text-gray-800 dark:text-white focus:outline-none focus:ring-2 focus:ring-yellow-500 w-full max-w-md">
</div>
<div class="mt-4 flex items-center space-x-3">
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="rounded-full h-8 w-8">
<span class="ml-2 text-white">John Doe</span>
</div>
<button class="bg-yellow-500 text-white px-4 py-2 rounded-md hover:bg-yellow-400 transition duration-300">Logout</button>
</div>
</header>