CCHub Logo CCHub Tailwind Collection
구성 요소 사이드바 탐색 사이드바 탐색

사이드바 탐색

반응형 사이드바 탐색 구성 요소에는 아날로그 색 구성표와 어두운 테마 지원을 포함한 마이크로 인터랙션이 있습니다.

미리 보기

HTML 코드 

<div class="flex h-screen bg-gray-100 dark:bg-gray-800">

    <!-- Sidebar -->
    <div class="w-64 bg-teal-500 dark:bg-teal-700 text-white flex flex-col">
        <div class="p-4 text-center text-2xl font-bold">Dashboard</div>
        <nav class="mt-6">
            <a href="#" class="block py-2 px-4 text-teal-100 hover:bg-teal-600 dark:hover:bg-teal-800 transition duration-300 ease-in-out">Home</a>
            <a href="#" class="block py-2 px-4 text-teal-100 hover:bg-teal-600 dark:hover:bg-teal-800 transition duration-300 ease-in-out">Analytics</a>
            <a href="#" class="block py-2 px-4 text-teal-100 hover:bg-teal-600 dark:hover:bg-teal-800 transition duration-300 ease-in-out">Reports</a>
            <a href="#" class="block py-2 px-4 text-teal-100 hover:bg-teal-600 dark:hover:bg-teal-800 transition duration-300 ease-in-out">Settings</a>
        </nav>
    </div>

    <!-- Content area -->
    <div class="flex-1 p-10 text-gray-800 dark:text-gray-200">
        <h1 class="text-3xl font-bold mb-6">Welcome to the Dashboard</h1>
        <p>This is the main content area.</p>
    </div>

</div>

관련 구성 요소

E-commerce Sidebar 내비게이션

전자 상거래 웹 사이트를 위한 간단하고 반응이 빠른 사이드바 탐색 구성 요소로, 트라이어드 색 구성표, 호버링의 마이크로 인터랙션, 다크 모드 지원을 특징으로 하며 Tailwind CSS로 구축되었습니다.

열다

Sidebar Navigation 구성 요소

소셜 미디어 응용 프로그램을 위한 간단하고 반응이 빠른 사이드바 탐색으로, 유사한 색 구성표로 어두운 모드에 최적화되어 있습니다. 여기에는 아바타와 사용자 이름이 있는 프로필 섹션과 탐색 링크가 포함됩니다. 이 디자인은 스타일링과 응답성을 위해 Tailwind CSS를 사용하며 Tailwind의 내장 dark: 접두사를 통해 다크 모드를 지원합니다.

열다

Sidebar Navigation 구성 요소

다크 모드를 지원하는 반응형 사이드바 탐색 구성 요소. 미니멀리스트/플랫 디자인, 단색 색 구성표, 포트폴리오를 위한 복잡한 인터페이스. Tailwind CSS, picsum.photos 및 randomuser.me 를 사용합니다. 자바스크립트가 없습니다.

열다