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

Footer Navigation 구성 요소

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

미리 보기

HTML 코드 

<footer class="bg-gray-200 dark:bg-gray-800 py-8 px-4">
  <div class="container mx-auto grid grid-cols-1 md:grid-cols-3 gap-8">
    <div class="neumorphic-card p-6 rounded-lg">
      <h3 class="text-xl font-bold mb-4 text-gray-800 dark:text-white">About Us</h3>
      <p class="text-gray-600 dark:text-gray-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et est in justo feugiat consectetur.</p>
    </div>
    <div class="neumorphic-card p-6 rounded-lg">
      <h3 class="text-xl font-bold mb-4 text-gray-800 dark:text-white">Quick Links</h3>
      <ul class="space-y-2">
        <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white">Home</a></li>
        <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white">About</a></li>
        <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white">Services</a></li>
        <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white">Contact</a></li>
      </ul>
    </div>
    <div class="neumorphic-card p-6 rounded-lg">
      <h3 class="text-xl font-bold mb-4 text-gray-800 dark:text-white">Follow Us</h3>
      <div class="flex space-x-4">
        <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white"><i class="fab fa-facebook-f"></i></a>
        <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white"><i class="fab fa-twitter"></i></a>
        <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white"><i class="fab fa-instagram"></i></a>
        <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white"><i class="fab fa-linkedin-in"></i></a>
      </div>
    </div>
  </div>
  <div class="mt-8 text-center text-gray-600 dark:text-gray-300">
    &copy; 2023 Your Company. All rights reserved.
  </div>

  <style>
    .neumorphic-card {
      background: #e0e0e0;
      box-shadow: 7px 7px 15px #bebebe, -7px -7px 15px #ffffff;
    }
    .dark .neumorphic-card {
        background: #333333;
        box-shadow: 7px 7px 15px #222222, -7px -7px 15px #444444;
    }
  </style>
</footer>

관련 구성 요소

Footer Navigation 구성 요소

대시보드용으로 설계된 반응형 바닥글 탐색 구성 요소로, 생생한 색상의 Skeuomorphic 스타일을 특징으로 합니다. 여기에는 탐색 링크, 로고 및 소셜 미디어 아이콘이 포함되며 Tailwind CSS를 사용하여 완전한 다크 모드를 지원합니다. 이 디자인은 대화형 호버 효과를 사용하여 중간 정도의 복잡성을 목표로 합니다.

열다

미니멀리스트 바닥글 탐색

반응형 디자인과 다크 모드를 지원하는 블로그를 위한 미니멀한 바닥글 탐색 구성 요소입니다.

열다

Footer Navigation 구성 요소

머티리얼 디자인(Material Design) 원칙과 비즈니스/기업 웹사이트를 위한 유사한 색 구성표로 스타일이 지정된 간단한 바닥글 탐색 구성 요소입니다. 다크 모드를 지원하며 반응형입니다.

열다