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

패션/뷰티 브랜드를 위해 설계된 따뜻하고 일몰에서 영감을 받은 색 구성표가 있는 간단하고 반응이 빠른 바닥글 탐색 구성 요소입니다. 미묘한 호버 효과와 다크 모드 지원이 특징입니다.

열다

Footer Navigation 구성 요소

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

열다

Glassmorphism 바닥글 탐색

Glassmorphism 스타일, 생생한 색 구성표 및 대시보드 목적을 위한 복잡한 레이아웃이 있는 바닥글 탐색 구성 요소. Tailwind CSS를 사용하여 다크 모드를 지원하는 반응형 디자인.

열다