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>

관련 구성 요소

Neumorphism 사이드바

Tailwind CSS를 사용하여 반응형 디자인과 어두운 테마를 지원하는 Neumorphism 스타일의 사이드바 구성 요소입니다.

열다

Neumorphism Sidebar 구성 요소

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

열다

사이드바 구성 요소

전자 상거래를 위한 반응형이고 미니멀한 사이드바 구성 요소이며 다크 모드를 지원합니다. 제품 카테고리와 장바구니 아이콘이 있는 간단한 레이아웃이 특징입니다.

열다