CCHub Logo CCHub Tailwind Collection
구성 요소 바닥글 탐색 Footer Navigation 구성 요소

Footer Navigation 구성 요소

반응형 Footer Navigation 구성 요소는 전자 상거래에 적합한 대화형 요소를 특징으로 하는 스큐어모픽 스타일로 디자인되었습니다. 트라이어드 색 구성표를 따르며 다크 모드를 지원합니다.

미리 보기

HTML 코드 

<footer class="bg-gray-100 dark:bg-gray-900 p-4 shadow-lg rounded-lg">
    <div class="container mx-auto flex flex-col md:flex-row justify-between items-center">
        <div class="flex items-center mb-4 md:mb-0">
            <img src="https://picsum.photos/50" alt="Logo" class="rounded-full mr-2">
            <h2 class="text-xl font-semibold dark:text-white">Shop Logo</h2>
        </div>
        <nav class="flex flex-col md:flex-row text-gray-600 dark:text-gray-300">
            <a href="#" class="mx-2 transition-colors duration-300 hover:text-blue-500 dark:hover:text-blue-400">Home</a>
            <a href="#" class="mx-2 transition-colors duration-300 hover:text-blue-500 dark:hover:text-blue-400">Products</a>
            <a href="#" class="mx-2 transition-colors duration-300 hover:text-blue-500 dark:hover:text-blue-400">About Us</a>
            <a href="#" class="mx-2 transition-colors duration-300 hover:text-blue-500 dark:hover:text-blue-400">Contact</a>
        </nav>
    </div>
    <div class="mt-4 text-center text-gray-600 dark:text-gray-300">
        <p>&copy; 2023 E-Commerce. All rights reserved.</p>
    </div>
</footer>

관련 구성 요소

Footer Navigation 구성 요소

마켓플레이스를 위한 유기적/자연에서 영감을 받은 바닥글 탐색 구성 요소로, 유선, 유사한 색 구성표, 여러 섹션 및 다크 모드를 지원하는 반응형 디자인을 특징으로 합니다.

열다

수채화 예술적 바닥글 탐색 구성 요소

비영리/자선 웹사이트를 위해 설계된 복잡하고 반응이 빠른 바닥글 탐색 구성 요소로, 부드러운 세피아/갈색 톤과 다크 모드를 지원하는 수채화 예술적 스타일을 특징으로 합니다. 여러 탐색 링크, 소셜 미디어 아이콘 및 저작권 섹션이 포함됩니다.

열다

Footer Navigation 구성 요소

반투명 유리와 같은 반투명 요소와 흐림 효과를 특징으로 하는 glassmorphism 스타일을 사용한 반응형 바닥글 탐색 구성 요소입니다. 다크 모드를 지원하며 자리 표시자 이미지를 포함합니다.

열다