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

헤더 구성 요소

Neumorphism 스타일의 헤더 구성 요소는 어두운 테마, 반응형 디자인, 여러 대화형 요소를 포함하는 포트폴리오를 위한 것입니다.

미리 보기

HTML 코드 

<header class="bg-gray-100 dark:bg-gray-800 shadow-lg rounded-lg p-6 flex flex-col md:flex-row items-center justify-between space-y-4 md:space-y-0">
    <div class="flex items-center space-x-4">
        <img src="https://picsum.photos/60" alt="Logo" class="h-10 w-10 rounded-full shadow-lg">
        <h1 class="text-2xl font-bold text-gray-900 dark:text-white">My Portfolio</h1>
    </div>
    <nav class="flex space-x-4">
        <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition duration-200">Home</a>
        <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition duration-200">About</a>
        <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition duration-200">Projects</a>
        <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition duration-200">Contact</a>
    </nav>
    <div class="flex items-center space-x-2">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="h-10 w-10 rounded-full shadow-lg">
        <button class="bg-blue-500 dark:bg-blue-700 text-white font-semibold py-2 px-4 rounded-lg transition duration-200 hover:bg-blue-600 dark:hover:bg-blue-800">Get In Touch</button>
    </div>
</header>

관련 구성 요소

헤더 구성 요소

다크 모드를 지원하는 반응형 헤더 구성 요소로, 로고, 탐색 링크 및 클릭 유도문안 버튼을 제공합니다. 이 디자인은 눈의 피로를 줄이기 위해 어두운 배경을 사용합니다.

열다

E-commerce Header 구성 요소

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

열다

헤더 구성 요소

생생한 색상의 Neumorphism 스타일을 사용하여 설계된 간단한 헤더 구성 요소로, 블로그/콘텐츠 웹 페이지에 적합합니다. 반응형 디자인을 위한 다크 모드 지원이 특징입니다.

열다