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

사이드바 구성 요소

Glassmorphism 효과와 보색 구성표로 설계된 반응형 사이드바 구성 요소로, 블로그 또는 콘텐츠 소비에 적합합니다.

미리 보기

HTML 코드 

<aside class="bg-white bg-opacity-30 backdrop-blur-lg shadow-md rounded-lg p-4 w-64 dark:bg-gray-800 dark:bg-opacity-30">
    <div class="flex items-center mb-4">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full mr-3">
        <h2 class="text-lg font-semibold text-gray-800 dark:text-white">User Name</h2>
    </div>
    <nav>
        <ul class="space-y-2">
            <li>
                <a href="#" class="block px-3 py-2 rounded-md text-gray-900 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700 transition">Home</a>
            </li>
            <li>
                <a href="#" class="block px-3 py-2 rounded-md text-gray-900 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700 transition">About</a>
            </li>
            <li>
                <a href="#" class="block px-3 py-2 rounded-md text-gray-900 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700 transition">Blog</a>
            </li>
            <li>
                <a href="#" class="block px-3 py-2 rounded-md text-gray-900 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700 transition">Contact</a>
            </li>
        </ul>
    </nav>
    <div class="mt-4">
        <h3 class="text-md font-semibold text-gray-800 dark:text-white">Featured Posts</h3>
        <ul class="space-y-2">
            <li>
                <a href="#" class="block px-3 py-2 rounded-md text-gray-900 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700 transition">Post Title 1</a>
            </li>
            <li>
                <a href="#" class="block px-3 py-2 rounded-md text-gray-900 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700 transition">Post Title 2</a>
            </li>
            <li>
                <a href="#" class="block px-3 py-2 rounded-md text-gray-900 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700 transition">Post Title 3</a>
            </li>
        </ul>
    </div>
    <div class="mt-4">
        <img src="https://picsum.photos/300/200" alt="Sample Image" class="rounded-lg shadow-md">
    </div>
</aside>

관련 구성 요소

사이드바 구성 요소

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

열다

Neon_Glow_Grayscale_Sports_Sidebar

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

열다

Neumorphism Sidebar 구성 요소

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

열다