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

사이드바 구성 요소

매력적인 마이크로 인터랙션과 보색 구성표가 있는 포트폴리오 항목을 보여주기 위한 반응형 사이드바 구성 요소로, 다크 모드를 지원합니다.

미리 보기

HTML 코드 

<aside class="w-64 h-full bg-white dark:bg-gray-800 shadow-lg transition-transform duration-300 ease-in-out transform hover:scale-105">  
    <div class="p-4">    
        <h2 class="text-xl font-semibold text-gray-800 dark:text-white">Portfolio</h2>    
        <div class="mt-4">            
            <a href="#" class="block py-2 text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 transition-colors duration-200">Home</a>            
            <a href="#" class="block py-2 text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 transition-colors duration-200">Projects</a>            
            <a href="#" class="block py-2 text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 transition-colors duration-200">About Me</a>            
            <a href="#" class="block py-2 text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 transition-colors duration-200">Contact</a>        
        </div>  
    </div>  
    <div class="flex flex-col items-center px-4 py-4">    
        <img src="https://picsum.photos/80/80" alt="Portfolio Avatar" class="rounded-full border-2 border-blue-500 dark:border-blue-400 mb-2" />    
        <h3 class="text-lg font-medium text-gray-800 dark:text-white">John Doe</h3>    
        <p class="text-sm text-gray-600 dark:text-gray-400">Web Developer</p>  
    </div>  
</aside>

관련 구성 요소

RetroRealEstate사이드바

레트로/빈티지 미학, 따뜻한 중성 색상 구성표를 갖춘 간단하고 반응이 빠른 사이드바 구성 요소로, 부동산 플랫폼을 위해 설계되었습니다. 다크 모드 지원이 포함됩니다.

열다

Neumorphism Sidebar 구성 요소

Neumorphism 디자인, Earth tones 색 구성표 및 단순한 복잡성을 갖춘 반응형 사이드바 구성 요소로 블로그 또는 콘텐츠 소비에 적합합니다. 다크 모드 지원이 포함됩니다.

열다

Gradient Agriculture 사이드바

단색 그라디언트 디자인의 간단하고 반응이 빠른 사이드바 구성 요소로 농업 및 농업 웹사이트에 적합합니다. 다크 모드 지원이 포함됩니다.

열다