CCHub Logo CCHub Tailwind Collection
구성 요소 바닥글 바닥글 구성 요소

바닥글 구성 요소

보색, 적당한 복잡성 및 소셜 미디어 통합을 갖춘 미니멀한 바닥글 구성 요소입니다. 반응형 디자인과 다크 모드 지원이 특징입니다.

미리 보기

HTML 코드 

<footer class="bg-gray-100 dark:bg-gray-900 py-8">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="flex flex-wrap justify-between items-center">
      <div class="w-full md:w-1/3 text-center md:text-left mb-4 md:mb-0">
        <p class="text-gray-600 dark:text-gray-400 text-sm">&copy; 2023 SocialApp. All rights reserved.</p>
      </div>
      <div class="w-full md:w-1/3 flex justify-center mb-4 md:mb-0">
        <ul class="flex space-x-6">
          <li><a href="#" class="text-blue-600 dark:text-orange-400 hover:text-blue-800 dark:hover:text-orange-500 text-sm">Privacy Policy</a></li>
          <li><a href="#" class="text-blue-600 dark:text-orange-400 hover:text-blue-800 dark:hover:text-orange-500 text-sm">Terms of Service</a></li>
        </ul>
      </div>
      <div class="w-full md:w-1/3 flex justify-center md:justify-end">
        <ul class="flex space-x-4">
          <li><a href="#" class="text-blue-600 dark:text-orange-400 hover:text-blue-800 dark:hover:text-orange-500"><i class="fab fa-facebook-f"></i></a></li>
          <li><a href="#" class="text-blue-600 dark:text-orange-400 hover:text-blue-800 dark:hover:text-orange-500"><i class="fab fa-twitter"></i></a></li>
          <li><a href="#" class="text-blue-600 dark:text-orange-400 hover:text-blue-800 dark:hover:text-orange-500"><i class="fab fa-instagram"></i></a></li>
          <li><a href="#" class="text-blue-600 dark:text-orange-400 hover:text-blue-800 dark:hover:text-orange-500"><i class="fab fa-linkedin-in"></i></a></li>
        </ul>
      </div>
    </div>
  </div>
</footer>

관련 구성 요소

Skeuomorphic Footer 컴포넌트

스큐어모픽 디자인, 유사한 색 구성표(녹색, 청록색) 및 비즈니스 웹 사이트에 적합한 적당한 복잡성을 갖춘 반응형 바닥글 구성 요소. 링크, 로고 플레이스홀더, 그림자와 그라디언트로 얻은 미묘한 스큐어모픽 효과가 포함됩니다. 밝은 모드와 어두운 모드를 지원합니다.

열다

바닥글 구성 요소

Tailwind CSS를 사용하여 반응형 효과와 어두운 테마를 지원하는 Brutalism 스타일의 바닥글 구성 요소입니다.

열다

Glassmorphism 바닥글 구성 요소

흐림 효과가 있는 젖빛 유리와 같은 반투명 요소를 특징으로 하는 glassmorphism 스타일의 반응형 바닥글 구성 요소이며 어두운 테마를 지원합니다.

열다