CCHub Logo CCHub Tailwind Collection
구성 요소 머리글 소셜미디어헤더

소셜미디어헤더

소셜 미디어 인터페이스를 위한 반응형 헤더 구성 요소로, 트라이어딕 색 구성표와 최소한의 요소를 사용하는 어두운 모드 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>

관련 구성 요소

헤더 구성 요소

반투명 유리와 같은 반투명 요소와 어두운 테마를 지원하는 Glassmorphism 디자인을 특징으로 하는 반응형 헤더 구성 요소입니다.

열다

E-commerce Header 구성 요소

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

열다

3D 헤더 구성 요소

회색조 색상의 3D 스타일을 사용하는 소셜 미디어 인터페이스용으로 설계된 복잡한 대화형 헤더 구성 요소입니다. 여기에는 로고, 검색 창, 사용자 아바타 및 작업 버튼이 포함되며 반응형 동작 및 다크 모드를 지원합니다.

열다