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

Retro Sidebar 구성 요소

작업이나 제품을 전시하기 위한 레트로/빈티지 디자인의 반응형 사이드바 구성 요소로, 그레이스케일 색 구성표와 Tailwind CSS 클래스를 활용하여 다크 모드를 지원합니다.

미리 보기

HTML 코드 

<div class="flex flex-col h-screen bg-white dark:bg-gray-800">
    <div class="flex items-center justify-center p-4 bg-gray-200 dark:bg-gray-700">
        <h1 class="text-2xl font-bold text-gray-800 dark:text-white">My Portfolio</h1>
    </div>
    <div class="flex-grow p-4">
        <div class="flex flex-col space-y-4">
            <a href="#" class="flex items-center p-2 bg-gray-300 dark:bg-gray-600 rounded hover:bg-gray-400 dark:hover:bg-gray-500 transition ease-in-out duration-200">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User" class="w-10 h-10 rounded-full mr-2">
                <span class="text-gray-700 dark:text-gray-200">Home</span>
            </a>
            <a href="#" class="flex items-center p-2 bg-gray-300 dark:bg-gray-600 rounded hover:bg-gray-400 dark:hover:bg-gray-500 transition ease-in-out duration-200">
                <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User" class="w-10 h-10 rounded-full mr-2">
                <span class="text-gray-700 dark:text-gray-200">About</span>
            </a>
            <a href="#" class="flex items-center p-2 bg-gray-300 dark:bg-gray-600 rounded hover:bg-gray-400 dark:hover:bg-gray-500 transition ease-in-out duration-200">
                <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="User" class="w-10 h-10 rounded-full mr-2">
                <span class="text-gray-700 dark:text-gray-200">Projects</span>
            </a>
            <a href="#" class="flex items-center p-2 bg-gray-300 dark:bg-gray-600 rounded hover:bg-gray-400 dark:hover:bg-gray-500 transition ease-in-out duration-200">
                <img src="https://randomuser.me/api/portraits/men/4.jpg" alt="User" class="w-10 h-10 rounded-full mr-2">
                <span class="text-gray-700 dark:text-gray-200">Contact</span>
            </a>
        </div>
    </div>
    <div class="p-4 text-center bg-gray-200 dark:bg-gray-700">
        <p class="text-gray-600 dark:text-gray-300">© 2023 My Portfolio. All rights reserved.</p>
    </div>
</div>

관련 구성 요소

Consulting_Sidebar_Dark_Candy_Complex

컨설팅/서비스를 위한 복잡하고 반응이 빠른 사이드바 구성 요소로, 캔디/달콤한 색상으로 포인트를 준 다크 모드 UI를 특징으로 합니다. 탐색, 사용자 프로필 및 빠른 링크가 포함됩니다.

열다

Neon_Glow_Grayscale_Sports_Sidebar

스포츠/피트니스 애플리케이션을 위한 복잡하고 반응이 빠른 사이드바 구성 요소로, 그레이스케일 색 구성표 내에서 네온/글로우 효과를 제공합니다. 다크 모드 지원과 프로필, 탐색, 팀 및 설정과 같은 대화형 요소가 포함됩니다.

열다

사이드바 구성 요소

보색 구성표가 있는 Glassmorphism 스타일의 사이드바 구성 요소로, 중간 정도의 복잡성을 가진 포트폴리오 웹 사이트를 위해 설계되었습니다. 반응형이며 Tailwind CSS를 사용하여 다크 모드를 지원합니다.

열다