소셜미디어헤더
소셜 미디어 인터페이스를 위한 반응형 헤더 구성 요소로, 트라이어딕 색 구성표와 최소한의 요소를 사용하는 어두운 모드 UI로 설계되었습니다. 여기에는 사이트 제목, 검색 창 및 사용자 프로필 링크가 포함되며 Tailwind CSS를 사용하여 다크 모드에 맞게 조정된 스타일이 있습니다.
HTML 코드
<header class="bg-gray-900 text-gray-200 py-4 px-6 shadow-md">
<div class="container mx-auto flex flex-wrap items-center justify-between">
<div class="text-xl font-bold">SocialNet</div>
<div class="flex-grow mx-4 max-w-md">
<input type="text" placeholder="Search..." class="w-full px-3 py-2 bg-gray-800 text-gray-200 rounded-md focus:outline-none focus:ring focus:border-blue-300 dark:bg-gray-700 dark:text-gray-100 dark:focus:border-blue-600">
</div>
<nav>
<a href="#" class="px-3 py-2 hover:text-blue-400 dark:hover:text-blue-500">Profile</a>
</nav>
</div>
</header>