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

3D 헤더 구성 요소

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

미리 보기

HTML 코드 

<header class="bg-white dark:bg-gray-800 shadow-lg rounded-lg p-4 flex items-center justify-between">
    <div class="flex items-center">
        <img src="https://picsum.photos/50/50" alt="Logo" class="rounded-full shadow-lg">
        <h1 class="ml-3 text-gray-800 dark:text-white text-xl font-bold">Social Media App</h1>
    </div>
    <div class="flex-grow mx-4">
        <input type="text" placeholder="Search..." class="bg-gray-200 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg px-4 py-2 w-full focus:outline-none focus:ring-2 focus:ring-gray-500 dark:focus:ring-gray-400 transition-shadow duration-300 shadow-md dark:shadow-lg" />
    </div>
    <div class="flex items-center">
        <button class="bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors duration-300 p-2 rounded-lg shadow-md dark:shadow-lg mr-2">
            <img src="https://randomuser.me/api/portraits/men/10.jpg" alt="Avatar" class="rounded-full w-8 h-8">
        </button>
        <button class="bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors duration-300 p-2 rounded-lg shadow-md dark:shadow-lg">
            <img src="https://randomuser.me/api/portraits/women/10.jpg" alt="Avatar" class="rounded-full w-8 h-8">
        </button>
    </div>
</header>

관련 구성 요소

Brutalist 헤더 구성 요소

Tailwind CSS로 디자인된 원시적이고 대담한 헤더 구성 요소로, 밝은 테마와 어두운 테마 모두에 적합한 높은 대비와 특이한 레이아웃을 특징으로 합니다.

열다

머티리얼 디자인 비즈니스 헤더

Material Design은 비즈니스 웹 사이트를 위한 보색 구성표가 있는 간단한 헤더 구성 요소에 영감을 주었습니다. 어두운 테마를 지원하는 반응형 디자인.

열다

복잡한 대시보드 헤더

3D 디자인 요소, 흙색 색 구성표가 있는 복잡하고 반응이 빠른 헤더 구성 요소로, 대시보드용으로 설계되었습니다. Tailwind CSS를 사용하는 어두운 테마 지원을 포함하며 데모 이미지/아바타에 picsum.photos 및 randomuser.me 사용합니다.

열다