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

헤더 구성 요소

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

미리 보기

HTML 코드 

<header class="p-4 bg-gray-200 dark:bg-gray-800 rounded-lg shadow-md flex justify-between items-center">
    <div class="flex items-center">
        <img src="https://picsum.photos/50" alt="Logo" class="rounded-full shadow-md" />
        <h1 class="text-2xl font-bold text-gray-800 dark:text-white ml-2">My Blog</h1>
    </div>
    <nav class="flex space-x-4">
        <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 transition duration-200">Home</a>
        <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 transition duration-200">About</a>
        <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 transition duration-200">Contact</a>
    </nav>
</header>

관련 구성 요소

헤더 구성 요소

반응형 헤더 구성 요소는 Tailwind CSS를 사용하여 작고 매력적인 애니메이션 및 어두운 테마 지원과 함께 마이크로 상호 작용을 제공합니다.

열다

스큐어모픽 헤더 컴포넌트

스큐어모픽 스타일의 전자 상거래 웹 사이트를 위해 설계된 간단하고 반응이 빠른 헤더 구성 요소로, 회색조 색 구성표를 사용하고 다크 모드를 지원합니다.

열다

헤더 구성 요소

포트폴리오를 위한 미니멀하고 평평한 디자인 헤더 구성 요소로, 어두운 테마 지원과 여러 대화형 요소가 있는 반응형 디자인을 특징으로 합니다.

열다