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

Footer Navigation 구성 요소

다크 모드의 비즈니스/기업 웹사이트를 위해 설계된 반응형 바닥글 탐색 구성 요소로, 트라이어드 색 구성표와 대화형 기능을 통한 중간 복잡성을 특징으로 합니다.

미리 보기

HTML 코드 

<footer class="bg-gray-800 text-gray-200 py-6">
    <div class="container mx-auto flex justify-between items-center flex-wrap">
        <div class="flex flex-col w-full md:w-1/3 mb-4">
            <h4 class="font-bold text-lg">Company Info</h4>
            <p class="text-sm">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum.</p>
        </div>
        <div class="flex flex-col w-full md:w-1/3 mb-4">
            <h4 class="font-bold text-lg">Quick Links</h4>
            <ul>
                <li><a href="#" class="text-gray-400 hover:text-gray-100 transition">Home</a></li>
                <li><a href="#" class="text-gray-400 hover:text-gray-100 transition">About Us</a></li>
                <li><a href="#" class="text-gray-400 hover:text-gray-100 transition">Services</a></li>
                <li><a href="#" class="text-gray-400 hover:text-gray-100 transition">Contact</a></li>
            </ul>
        </div>
        <div class="flex flex-col w-full md:w-1/3 mb-4">
            <h4 class="font-bold text-lg">Contact Us</h4>
            <div class="flex items-center mb-2">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2">
                <div class="text-sm">
                    <p>John Doe</p>
                    <p>[email protected]</p>
                </div>
            </div>
            <p class="text-sm">Reach out to us for any inquiries.</p>
        </div>
    </div>
    <div class="bg-gray-700 text-center py-4 mt-4">
        <p class="text-sm">&copy; 2023 Company Name. All rights reserved.</p>
    </div>
</footer>

관련 구성 요소

Footer Navigation 구성 요소

단색 색 구성표가 있는 Glassmorphism 스타일로 설계된 간단한 바닥글 탐색 구성 요소입니다. 반응형이고 다크 모드를 지원하며 전자 상거래 웹 사이트에 적합합니다.

열다

Footer Navigation 구성 요소

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

열다

Footer Navigation 구성 요소

포트폴리오 웹 사이트에 적합한 어두운 테마의 반응형 바닥글 탐색 구성 요소입니다. 단일 색상의 다양한 음영이 있는 단색 색 구성표, 일부 대화형 기능이 있는 중간 복잡성을 특징으로 하며 dark: 접두사를 사용한 다크 모드 지원을 포함하여 스타일링에 Tailwind CSS를 사용합니다.

열다