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>

관련 구성 요소

Glassmorphism 사이드바(다크 모드 포함)

glassmorphism 디자인 및 Tailwind CSS를 사용하는 다크 모드 지원이 있는 반응형 사이드바 구성 요소입니다. 여기에는 로고, 사이트 이름, 탐색 링크 및 사용자 프로필 섹션이 포함됩니다.

열다

사이드바 구성 요소 27

레트로/빈티지 스타일의 사이드바 구성 요소로, 반응형 효과와 어두운 테마 지원을 제공합니다.

열다

Simple Vibrant Blog 사이드바

블로그 콘텐츠를 위한 간단하고 반응형이 빠른 사이드바 구성 요소로, Tailwind CSS를 사용하여 생생한 색상과 재질과 같은 느낌으로 디자인되었습니다. 탐색 링크와 사용자 프로필 섹션이 포함되어 있습니다. Tailwind의 dark: 접두사를 사용하여 다크 모드를 지원합니다. 큰 화면에서는 고정되고 작은 화면에서는 숨겨집니다.

열다