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 구성 요소

소셜 미디어 인터페이스를 위한 삼궁 색 구성표가 있는 브루탈리즘 스타일로 설계된 간단한 바닥글 탐색 구성 요소입니다. 여기에는 다크 모드를 지원하는 링크와 아바타 이미지가 포함됩니다.

열다

Retro_Earth_Tone_Portfolio_Footer

포트폴리오 웹사이트를 위한 반응형 복고풍 테마의 바닥글 탐색 구성 요소로, 흙색과 다크 모드 지원을 제공합니다. 80/90년대의 미학을 염두에 두고 디자인되어 향수를 불러일으키는 느낌을 줍니다.

열다

Footer Navigation 구성 요소

Neumorphism 디자인, 단색 색 구성표, 복잡한 복잡성 및 소셜 미디어 목적을 가진 바닥글 탐색 구성 요소. 어두운 테마를 지원하는 반응형 디자인.

열다