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>

관련 구성 요소

Glassmorphism 사이드바 탐색

Glassmorphism 디자인, 다크 모드 지원 및 Tailwind CSS를 사용하는 반응형 Sidebar Navigation Component입니다. 흐림 효과가 있는 젖빛 유리와 같은 반투명 요소가 특징입니다.

열다

Sidebar Navigation 구성 요소

마켓플레이스 UI를 위한 복잡하고 반응이 빠른 사이드바 탐색 구성 요소로, 생생한 색상과 다크 모드 지원을 제공합니다. 여러 섹션, 대화형 요소 및 사용자 프로필이 포함됩니다.

열다

Sidebar Navigation 구성 요소

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

열다