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

Sidebar Navigation 구성 요소

대시보드를 위해 설계된 간단하고 반응이 빠른 사이드바 탐색 구성 요소로, 매력적인 애니메이션과 흙빛 색 구성표를 특징으로 합니다. 다크 모드를 지원합니다.

미리 보기

HTML 코드 

<div class="flex flex-col h-screen bg-gray-200 dark:bg-gray-800 border-r border-gray-300 dark:border-gray-700 shadow-lg transition-transform duration-300 ease-in-out">
    <div class="flex items-center justify-center h-16 border-b border-gray-300 dark:border-gray-700 bg-green-600 dark:bg-green-800">
        <h1 class="text-xl text-white font-bold">Dashboard</h1>
    </div>
    <nav class="flex-1 p-4">
        <ul class="space-y-2">
            <li>
                <a href="#" class="flex items-center p-2 text-gray-700 dark:text-gray-300 hover:bg-green-500 dark:hover:bg-green-700 rounded transition-all duration-300 ease-in-out">
                    <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-2">
                    <span>Profile</span>
                </a>
            </li>
            <li>
                <a href="#" class="flex items-center p-2 text-gray-700 dark:text-gray-300 hover:bg-green-500 dark:hover:bg-green-700 rounded transition-all duration-300 ease-in-out">
                    <img src="https://picsum.photos/seed/pic1/30/30" alt="Image 1" class="w-8 h-8 rounded-full mr-2">
                    <span>Reports</span>
                </a>
            </li>
            <li>
                <a href="#" class="flex items-center p-2 text-gray-700 dark:text-gray-300 hover:bg-green-500 dark:hover:bg-green-700 rounded transition-all duration-300 ease-in-out">
                    <img src="https://picsum.photos/seed/pic2/30/30" alt="Image 2" class="w-8 h-8 rounded-full mr-2">
                    <span>Settings</span>
                </a>
            </li>
        </ul>
    </nav>
    <div class="p-4 border-t border-gray-300 dark:border-gray-700">
        <a href="#" class="block text-center text-gray-700 dark:text-gray-300 hover:bg-green-500 dark:hover:bg-green-700 rounded p-2 transition-all duration-300 ease-in-out">Logout</a>
    </div>
</div>

관련 구성 요소

Organic_Nature_Sepia_Healthcare_Sidebar_Navigation_Component

세피아/브라운 톤을 사용하여 자연에서 영감을 받은 유기적인 디자인의 간단하고 반응이 빠른 사이드바 탐색 구성 요소로, 의료 및 의료 분야에 적합합니다. 다크 모드 지원이 포함됩니다.

열다

E-commerce Sidebar 내비게이션

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

열다

Glassmorphism Sidebar Navigation 구성 요소

블로그를 위한 Glassmorphism 스타일의 사이드바 탐색 구성 요소로, 단색 색 구성표를 특징으로 합니다. HTML 및 Tailwind CSS만 사용하는 다크 모드를 지원하는 단순하고 반응이 빠른 디자인입니다. 사이드바에는 사이트 제목, 탐색 링크 및 프로필 섹션이 포함되어 있습니다.

열다