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

Footer Navigation 구성 요소

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

미리 보기

HTML 코드 

<footer class="bg-blue-100 dark:bg-blue-900">
  <div class="container mx-auto px-6 py-8">
    <div class="flex flex-col items-center text-center">
      <div class="flex flex-wrap justify-center -mx-4">
        <a href="#" class="mx-4 text-sm text-blue-800 dark:text-blue-200 hover:text-blue-600 dark:hover:text-blue-400 transition duration-300 ease-in-out transform hover:scale-110">About</a>
        <a href="#" class="mx-4 text-sm text-red-800 dark:text-red-200 hover:text-red-600 dark:hover:text-red-400 transition duration-300 ease-in-out transform hover:scale-110">Blog</a>
        <a href="#" class="mx-4 text-sm text-yellow-800 dark:text-yellow-200 hover:text-yellow-600 dark:hover:text-yellow-400 transition duration-300 ease-in-out transform hover:scale-110">Careers</a>
        <a href="#" class="mx-4 text-sm text-blue-800 dark:text-blue-200 hover:text-blue-600 dark:hover:text-blue-400 transition duration-300 ease-in-out transform hover:scale-110">Contact Us</a>
      </div>
      <p class="mt-4 text-sm text-blue-800 dark:text-blue-200">&copy; 2023 Dashboard Inc. All rights reserved.</p>
    </div>
  </div>
</footer>

관련 구성 요소

Footer Navigation 구성 요소

Material Design을 사용한 전자 상거래를 위한 바닥글 탐색 구성 요소 - 반응형 및 다크 모드를 지원하는 간단한 구성 요소로, 보색 구성표를 특징으로 합니다.

열다

Footer Navigation 구성 요소

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

열다

Footer Navigation 구성 요소

80년대와 90년대의 미학에서 영감을 받은 레트로/빈티지 스타일로 디자인된 바닥글 탐색 구성 요소입니다. 어두운 테마를 지원하며 완벽하게 반응합니다.

열다