CCHub Logo CCHub Tailwind Collection
구성 요소 머리글 스큐어모픽 헤더 컴포넌트

스큐어모픽 헤더 컴포넌트

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

미리 보기

HTML 코드 

<header class="bg-white dark:bg-gray-800 shadow-lg border-b border-gray-300 dark:border-gray-700 p-4">
    <div class="container mx-auto flex justify-between items-center">
        <div class="flex items-center space-x-4">
            <img src="https://picsum.photos/50/50" alt="Logo" class="rounded-full shadow-md">
            <h1 class="text-2xl font-bold text-gray-900 dark:text-white">ShopName</h1>
        </div>
        <nav class="flex space-x-4">
            <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-gray-200">Home</a>
            <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-gray-200">Products</a>
            <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-gray-200">About Us</a>
            <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-gray-200">Contact</a>
        </nav>
        <div class="relative">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-8 h-8 rounded-full shadow-md">
            <span class="absolute top-0 right-0 bg-red-500 rounded-full h-2 w-2 border-2 border-white dark:border-gray-800"></span>
        </div>
    </div>
</header>

관련 구성 요소

E-commerce Header 구성 요소

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

열다

헤더 구성 요소

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

열다

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

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

열다