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

Footer Navigation 구성 요소

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

미리 보기

HTML 코드 

<footer class="bg-white bg-opacity-40 backdrop-blur-lg p-6 rounded-lg shadow-lg dark:bg-gray-800 dark:bg-opacity-50">
    <div class="container mx-auto flex flex-col sm:flex-row justify-between items-center">
        <div class="text-center sm:text-left">
            <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Shop with Us</h2>
            <p class="text-sm text-gray-600 dark:text-gray-400">Your online shopping experience starts here.</p>
        </div>
        <div class="mt-4 sm:mt-0">
            <ul class="flex space-x-4">
                <li><a href="#" class="text-gray-800 dark:text-gray-200 hover:text-blue-500">Home</a></li>
                <li><a href="#" class="text-gray-800 dark:text-gray-200 hover:text-blue-500">Products</a></li>
                <li><a href="#" class="text-gray-800 dark:text-gray-200 hover:text-blue-500">About Us</a></li>
                <li><a href="#" class="text-gray-800 dark:text-gray-200 hover:text-blue-500">Contact</a></li>
            </ul>
        </div>
    </div>
    <div class="mt-6 text-center text-sm text-gray-600 dark:text-gray-400">
        <p>&copy; 2023 Your E-commerce. All rights reserved.</p>
    </div>
</footer>

관련 구성 요소

Footer Navigation 구성 요소

어두운 테마를 지원하는 대시보드를 위한 반응형 바닥글 탐색 구성 요소로, 트라이어딕 색상과 복잡한 요소를 사용하여 링크 호버에 대한 마이크로 인터랙션을 제공합니다. JavaScript는 없으며 Tailwind CSS가 있는 HTML만 있습니다.

열다

Footer Navigation 구성 요소

반응형이고 복잡한 Neumorphism 스타일의 Footer Navigation Component는 다크 모드를 지원하는 그레이스케일 색 구성표를 사용하는 기업 웹 사이트를 위한 것입니다. 자바스크립트가 없습니다.

열다

Footer Navigation 구성 요소

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

열다