CCHub Logo CCHub Tailwind Collection
구성 요소 항행 Navigation 구성 요소

Navigation 구성 요소

Tailwind CSS를 사용하여 다크 모드에 맞게 스타일링된 반응형 탐색 구성 요소입니다.

미리 보기

HTML 코드 

<nav class="bg-gray-900 text-white p-4">
    <div class="container mx-auto flex justify-between items-center">
        <div class="flex items-center space-x-4">
            <a href="#" class="text-lg font-semibold">Brand</a>
            <a href="#" class="hidden md:block">Home</a>
            <a href="#" class="hidden md:block">About</a>
            <a href="#" class="hidden md:block">Services</a>
            <a href="#" class="hidden md:block">Contact</a>
        </div>
        <div class="flex items-center space-x-4">
            <input type="text" placeholder="Search..." class="bg-gray-800 text-white p-2 rounded-md" />
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full"/>
        </div>
    </div>
</nav>

<main class="bg-gray-800 min-h-screen p-4">
    <h1 class="text-3xl mb-4">Welcome to Our Website</h1>
    <img src="https://picsum.photos/800/300" alt="Placeholder" class="w-full rounded-lg mb-4" />
    <p class="text-gray-300">This is a simple layout demo for the Navigation Component.</p>
</main>

<footer class="bg-gray-900 text-white p-4">
    <div class="container mx-auto text-center">
        <p>© 2023 Navigation Component. All rights reserved.</p>
    </div>
</footer>

관련 구성 요소

Glassmorphism Navigation 컴포넌트

전자 상거래 사이트를 위한 glassmorphism 스타일의 탐색 구성 요소로, 단색 색상, 반응형 디자인 및 Tailwind CSS를 사용한 다크 모드 지원을 특징으로 합니다.

열다

Navigation 구성 요소

마이크로 인터랙션과 파스텔 색 구성표가 있는 블로그를 위해 설계된 간단한 탐색 구성 요소입니다. 반응형 레이아웃과 어두운 테마 지원이 특징입니다.

열다

Responsive Navigation 구성 요소

Responsive Navigation Component with Microinteractions, Grayscale color scheme, and Simple complexity(마이크로인터랙션, 그레이스케일 색 구성표, 단순 복잡성).

열다