CCHub Logo CCHub Tailwind Collection
구성 요소 머리글 레트로 빈티지 헤더 구성 요소

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

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

미리 보기

HTML 코드 

<header class="bg-gradient-to-r from-purple-500 to-pink-500 dark:from-purple-800 dark:to-pink-700 p-6">
    <div class="container mx-auto flex justify-between items-center">
        <div class="flex items-center space-x-4">
            <img src="https://picsum.photos/40/40?random=1" alt="Logo" class="rounded-full">
            <h1 class="text-white text-3xl font-bold font-mono tracking-widest">Retro Header</h1>
        </div>
        <nav>
            <ul class="flex space-x-6 text-white">
                <li><a href="#" class="hover:text-pink-200 transition duration-300">Home</a></li>
                <li><a href="#" class="hover:text-pink-200 transition duration-300">About</a></li>
                <li><a href="#" class="hover:text-pink-200 transition duration-300">Gallery</a></li>
                <li><a href="#" class="hover:text-pink-200 transition duration-300">Contact</a></li>
            </ul>
        </nav>
    </div>
    <div class="mt-4 text-center">
        <img src="https://picsum.photos/800/200?random=1" alt="Header Image" class="rounded-lg shadow-lg mx-auto">
    </div>
</header>

<style>
    /* Dark Theme Support */
    @media (prefers-color-scheme: dark) {
        body {
            background-color: #1a1a2e;
        }
    }
</style>

관련 구성 요소

헤더 구성 요소

microinteractions 및 어두운 테마를 지원하는 반응형 헤더 구성 요소입니다.

열다

E-commerce Header 구성 요소

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

열다

Brutalist 헤더 구성 요소

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

열다