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

사이드바 구성 요소

포트폴리오를 위한 반응형 사이드바 구성 요소로, 어두운 테마의 3D 디자인 스타일을 특징으로 하며, 작품이나 제품을 전시하는 데 적합하며, 일부 대화형 요소와 유사한 색 구성표가 있습니다.

미리 보기

HTML 코드 

<aside class="bg-gray-800 dark:bg-gray-900 w-64 h-screen shadow-lg transform transition-transform duration-300 relative hover:translate-x-1 hover:shadow-2xl">
    <div class="flex items-center justify-center h-16 border-b border-gray-700 dark:border-gray-600">
        <h1 class="text-white text-lg font-bold">My Portfolio</h1>
    </div>
    <nav class="flex flex-col p-4">
        <a href="#" class="flex items-center p-2 mb-2 text-gray-300 rounded hover:bg-gray-700 dark:hover:bg-gray-800 transition">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2">
            <span>Home</span>
        </a>
        <a href="#" class="flex items-center p-2 mb-2 text-gray-300 rounded hover:bg-gray-700 dark:hover:bg-gray-800 transition">
            <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2">
            <span>About</span>
        </a>
        <a href="#" class="flex items-center p-2 mb-2 text-gray-300 rounded hover:bg-gray-700 dark:hover:bg-gray-800 transition">
            <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2">
            <span>Projects</span>
        </a>
        <a href="#" class="flex items-center p-2 mb-2 text-gray-300 rounded hover:bg-gray-700 dark:hover:bg-gray-800 transition">
            <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2">
            <span>Contact</span>
        </a>
    </nav>
    <footer class="absolute bottom-0 left-0 w-full border-t border-gray-700 dark:border-gray-600 p-4">
        <p class="text-gray-500 text-sm text-center">© 2023 My Portfolio</p>
    </footer>
</aside>

관련 구성 요소

Skeuomorphic Pastel 사이드바

스큐어모픽 디자인과 파스텔 색상의 단순하고 반응이 빠른 사이드바 구성 요소로, 블로그 또는 콘텐츠 사이트에 적합합니다. 다크 모드 지원이 포함됩니다.

열다

Simple Vibrant Blog 사이드바

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

열다

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

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

열다