CCHub Logo CCHub Tailwind Collection
구성 요소 고정 탐색 Sticky Navigation 구성 요소

Sticky Navigation 구성 요소

소셜 미디어 인터페이스에 적합한 브루탈리즘 스타일의 끈적끈적한 탐색 구성 요소로, 대담한 고대비 디자인과 다크 모드 지원을 특징으로 합니다.

미리 보기

HTML 코드 

<nav class="bg-blue-600 dark:bg-blue-900 fixed top-0 w-full z-30 p-4 shadow-lg">
    <div class="container mx-auto flex justify-between items-center">
        <div class="flex items-center">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
            <h1 class="text-white text-lg font-bold">Social Media</h1>
        </div>
        <ul class="flex space-x-8">
            <li><a href="#" class="text-white hover:text-yellow-400 dark:hover:text-yellow-300 transition duration-150 ease-in-out">Home</a></li>
            <li><a href="#" class="text-white hover:text-yellow-400 dark:hover:text-yellow-300 transition duration-150 ease-in-out">Profile</a></li>
            <li><a href="#" class="text-white hover:text-yellow-400 dark:hover:text-yellow-300 transition duration-150 ease-in-out">Messages</a></li>
            <li><a href="#" class="text-white hover:text-yellow-400 dark:hover:text-yellow-300 transition duration-150 ease-in-out">Settings</a></li>
        </ul>
    </div>
</nav>

<header class="mt-16 p-4 bg-gray-100 dark:bg-gray-800">
    <div class="container mx-auto">
        <h2 class="text-2xl text-gray-900 dark:text-white font-bold">Welcome to Our Network</h2>
        <p class="text-gray-700 dark:text-gray-300">Connect with friends and the world around you!</p>
    </div>
</header>

<main class="mt-4 p-4 container mx-auto">
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div class="bg-white dark:bg-gray-700 rounded-lg p-5 shadow-lg">
            <img src="https://picsum.photos/400/200" alt="Random Image" class="rounded-lg mb-4">
            <h3 class="text-lg font-bold text-gray-900 dark:text-white">Post Title 1</h3>
            <p class="text-gray-600 dark:text-gray-300">This is a sample post content. It can be about anything interesting happening on the network.</p>
        </div>
        <div class="bg-white dark:bg-gray-700 rounded-lg p-5 shadow-lg">
            <img src="https://picsum.photos/400/201" alt="Random Image" class="rounded-lg mb-4">
            <h3 class="text-lg font-bold text-gray-900 dark:text-white">Post Title 2</h3>
            <p class="text-gray-600 dark:text-gray-300">Another sample post content with some engaging information for users.</p>
        </div>
    </div>
</main>

관련 구성 요소

Sticky Navigation 구성 요소

미니멀한 평면 디자인, 비즈니스/기업 웹사이트를 위한 단색 색 구성표가 있는 끈적한 탐색 구성 요소입니다. 디자인에는 여러 대화형 요소가 포함되어 있으며 어두운 테마를 지원합니다.

열다

Sticky Navigation 구성 요소

대시보드에 대한 Neumorphism 디자인, 보색 구성표, 적당한 복잡성 및 반응형 어두운 테마 지원을 제공하는 고정 탐색 구성 요소입니다. 이 디자인은 뉴모피즘(Neumorphism) 효과를 위해 부드러운 그림자를 통합하고 보색을 사용하여 시각적으로 매력적인 인터페이스를 만듭니다. 데이터 시각화 및 제어판을 제공하는 대시보드에 적합합니다.

열다

Sticky Navigation 구성 요소

Tailwind CSS를 사용하여 머티리얼 디자인 원칙에 따라 스타일링된 반응형 고정 탐색 구성 요소로, 어두운 테마를 특징으로 하며 임의의 자리 표시자 이미지와 아바타를 포함합니다.

열다