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

사이드바 구성 요소

전자상거래 애플리케이션용으로 설계된 반응형 사이드바 구성 요소로, 머티리얼 디자인 요소와 파스텔 색상 구성표가 있으며 다크 모드를 지원합니다.

미리 보기

HTML 코드 

<aside class="bg-white dark:bg-gray-800 h-full w-64 p-5 shadow-lg  transition-transform duration-300 transform lg:translate-x-0 lg:fixed lg:left-0 lg:top-0 lg:h-full">
    <div class="flex items-center mb-5">
        <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
        <h2 class="ml-3 text-gray-800 dark:text-white font-semibold">User Name</h2>
    </div>
    <nav>
        <ul>
            <li class="mb-3">
                <a class="block p-2 rounded transition-colors duration-200 hover:bg-pink-100 dark:hover:bg-gray-700" href="#">Home</a>
            </li>
            <li class="mb-3">
                <a class="block p-2 rounded transition-colors duration-200 hover:bg-pink-100 dark:hover:bg-gray-700" href="#">Shop</a>
            </li>
            <li class="mb-3">
                <a class="block p-2 rounded transition-colors duration-200 hover:bg-pink-100 dark:hover:bg-gray-700" href="#">Orders</a>
            </li>
            <li class="mb-3">
                <a class="block p-2 rounded transition-colors duration-200 hover:bg-pink-100 dark:hover:bg-gray-700" href="#">Wishlist</a>
            </li>
            <li class="mb-3">
                <a class="block p-2 rounded transition-colors duration-200 hover:bg-pink-100 dark:hover:bg-gray-700" href="#">Profile</a>
            </li>
            <li class="mb-3">
                <a class="block p-2 rounded transition-colors duration-200 hover:bg-pink-100 dark:hover:bg-gray-700" href="#">Settings</a>
            </li>
            <li>
                <a class="block p-2 rounded transition-colors duration-200 hover:bg-pink-100 dark:hover:bg-gray-700" href="#">Logout</a>
            </li>
        </ul>
    </nav>
    <div class="mt-5">
        <h3 class="text-gray-600 dark:text-gray-400 font-semibold">Featured Products</h3>
        <div class="mt-3">
            <img class="w-full h-24 object-cover rounded-lg shadow-md" src="https://picsum.photos/200/100?random=1" alt="Product 1">
            <img class="w-full h-24 object-cover rounded-lg shadow-md mt-2" src="https://picsum.photos/200/100?random=2" alt="Product 2">
        </div>
    </div>
</aside>

관련 구성 요소

사이드바 구성 요소

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

열다

사이드바 구성 요소

대시보드를 위한 복잡하고 반응이 빠른 Glassmorphism 스타일의 사이드바 구성 요소로, 어스 톤과 다크 모드를 지원합니다.

열다

사이드바 구성 요소

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

열다