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

Footer Navigation 구성 요소

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

미리 보기

HTML 코드 

<footer class="bg-gray-200 text-gray-700 py-8 dark:bg-gray-800 dark:text-gray-200">
  <div class="container mx-auto px-4">
    <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
      <div>
        <h3 class="text-lg font-semibold mb-4">Shop</h3>
        <ul>
          <li class="mb-2"><a href="#" class="hover:text-gray-900 dark:hover:text-gray-50">Men's</a></li>
          <li class="mb-2"><a href="#" class="hover:text-gray-900 dark:hover:text-gray-50">Women's</a></li>
          <li class="mb-2"><a href="#" class="hover:text-gray-900 dark:hover:text-gray-50">Kids'</a></li>
          <li class="mb-2"><a href="#" class="hover:text-gray-900 dark:hover:text-gray-50">Sale</a></li>
        </ul>
      </div>
      <div>
        <h3 class="text-lg font-semibold mb-4">About Us</h3>
        <ul>
          <li class="mb-2"><a href="#" class="hover:text-gray-900 dark:hover:text-gray-50">Our Story</a></li>
          <li class="mb-2"><a href="#" class="hover:text-gray-900 dark:hover:text-gray-50">Careers</a></li>
          <li class="mb-2"><a href="#" class="hover:text-gray-900 dark:hover:text-gray-50">Press</a></li>
        </ul>
      </div>
      <div>
        <h3 class="text-lg font-semibold mb-4">Customer Service</h3>
        <ul>
          <li class="mb-2"><a href="#" class="hover:text-gray-900 dark:hover:text-gray-50">Contact Us</a></li>
          <li class="mb-2"><a href="#" class="hover:text-gray-900 dark:hover:text-gray-50">Shipping Information</a></li>
          <li class="mb-2"><a href="#" class="hover:text-gray-900 dark:hover:text-gray-50">Returns & Exchanges</a></li>
          <li class="mb-2"><a href="#" class="hover:text-gray-900 dark:hover:text-gray-50">FAQs</a></li>
        </ul>
      </div>
    </div>
    <div class="mt-8 text-center text-sm">
      <p>&copy; 2023 Your E-commerce Store. All rights reserved.</p>
    </div>
  </div>
</footer>

관련 구성 요소

Footer Navigation 구성 요소

반투명 유리와 같은 반투명 요소와 흐림 효과를 특징으로 하는 glassmorphism 스타일을 사용한 반응형 바닥글 탐색 구성 요소입니다. 다크 모드를 지원하며 자리 표시자 이미지를 포함합니다.

열다

Footer Navigation 구성 요소

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

열다

Footer Navigation 구성 요소

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

열다