CCHub Logo CCHub Tailwind Collection
구성 요소 머리글 헤더 구성 요소

헤더 구성 요소

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

미리 보기

HTML 코드 

<header class="bg-white bg-opacity-30 backdrop-blur-lg dark:bg-gray-800 dark:bg-opacity-60 shadow-lg p-4 flex justify-between items-center">
    <div class="flex items-center">
        <img src="https://picsum.photos/50/50" alt="Logo" class="rounded-full mr-2">
        <h1 class="text-xl font-bold text-gray-900 dark:text-white">My Website</h1>
    </div>
    <nav class="space-x-4">
        <a href="#" class="text-gray-800 dark:text-gray-200 hover:underline">Home</a>
        <a href="#" class="text-gray-800 dark:text-gray-200 hover:underline">About</a>
        <a href="#" class="text-gray-800 dark:text-gray-200 hover:underline">Services</a>
        <a href="#" class="text-gray-800 dark:text-gray-200 hover:underline">Contact</a>
    </nav>
    <div class="flex items-center">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="rounded-full w-10 h-10">
    </div>
</header>

관련 구성 요소

E-commerce Header 구성 요소

머티리얼 디자인에서 영감을 받은 반응형의 생동감 넘치는 전자상거래 웹사이트를 위한 헤더 컴포넌트로, 탐색, 검색, 사용자 액션을 제공합니다. 다크 모드를 지원합니다.

열다

소셜 미디어 헤더 구성 요소

미니멀한 디자인과 보색 구성표를 갖춘 복잡한 다크 모드 반응형 헤더 구성 요소로, 소셜 미디어 인터페이스를 위해 설계되었습니다.

열다

레트로 빈티지 헤더 구성 요소

레트로/빈티지 디자인 스타일의 반응형 헤더 구성 요소로, 80년대와 90년대에서 영감을 받은 다크 모드와 향수를 불러일으키는 미학을 지원합니다.

열다