CCHub Logo CCHub Tailwind Collection
구성 요소 바닥글 Skeuomorphic Footer 컴포넌트

Skeuomorphic Footer 컴포넌트

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

미리 보기

HTML 코드 

<footer class="bg-gradient-to-b from-gray-200 to-gray-300 dark:from-gray-800 dark:to-gray-900 text-gray-800 dark:text-gray-200 py-12">
  <div class="container mx-auto px-4">
    <div class="flex flex-wrap justify-between items-center">
      <div class="w-full md:w-1/4 mb-6 md:mb-0">
        <!-- Logo Placeholder with Skeuomorphic effect -->
        <div class="w-24 h-24 bg-gradient-to-br from-gray-300 to-gray-400 dark:from-gray-700 dark:to-gray-800 rounded-lg shadow-xl dark:shadow-xl-dark flex items-center justify-center">
          <svg class="w-12 h-12 text-gray-600 dark:text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21v-2a4 4 0 00-4-4H9a4 4 0 00-4 4v2m16 0h-3.586a1 1 0 01-.707-.293l-.031-.032A1.5 1.5 0 0015 18a1.5 1.5 0 00-2.121-1.06l-.032-.032A1 1 0 0112.586 17H9.414a1 1 0 01-.707.293l-.031.032A1.5 1.5 0 006 18a1.5 1.5 0 00-2.121-1.06l-.032-.032A1 1 0 013.586 19H1"></path></svg>
        </div>
      </div>
      <div class="w-full md:w-1/4 mb-6 md:mb-0">
        <h4 class="text-lg font-semibold mb-4">Quick Links</h4>
        <ul class="space-y-2">
          <li><a href="#" class="hover:text-gray-600 dark:hover:text-gray-400 transition duration-300 ease-in-out">Home</a></li>
          <li><a href="#" class="hover:text-gray-600 dark:hover:text-gray-400 transition duration-300 ease-in-out">About Us</a></li>
          <li><a href="#" class="hover:text-gray-600 dark:hover:text-gray-400 transition duration-300 ease-in-out">Services</a></li>
          <li><a href="#" class="hover:text-gray-600 dark:hover:text-gray-400 transition duration-300 ease-in-out">Contact</a></li>
        </ul>
      </div>
      <div class="w-full md:w-1/4 mb-6 md:mb-0">
        <h4 class="text-lg font-semibold mb-4">Resources</h4>
        <ul class="space-y-2">
          <li><a href="#" class="hover:text-gray-600 dark:hover:text-gray-400 transition duration-300 ease-in-out">Blog</a></li>
          <li><a href="#" class="hover:text-gray-600 dark:hover:text-gray-400 transition duration-300 ease-in-out">Support</a></li>
          <li><a href="#" class="hover:text-gray-600 dark:hover:text-gray-400 transition duration-300 ease-in-out">Privacy Policy</a></li>
          <li><a href="#" class="hover:text-gray-600 dark:hover:text-gray-400 transition duration-300 ease-in-out">Terms of Service</a></li>
        </ul>
      </div>
      <div class="w-full md:w-1/4">
        <h4 class="text-lg font-semibold mb-4">Contact Us</h4>
        <p class="mb-2">123 Business Lane, Corporate City</p>
        <p class="mb-2">Email: [email protected]</p>
        <p>Phone: (123) 456-7890</p>
      </div>
    </div>
    <hr class="my-8 border-gray-400 dark:border-gray-600">
    <div class="text-center text-sm">
      &copy; 2023 Your Business. All rights reserved.
    </div>
  </div>
</footer>

관련 구성 요소

Glassmorphism 바닥글 구성 요소

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

열다

기업 예약 바닥글

예약/예약 시스템용으로 설계된 복잡하고 반응이 빠른 기업 바닥글 구성 요소로, 시맨틱 HTML 및 Tailwind CSS를 사용하여 웜 뉴트럴 및 다크 모드 지원을 제공합니다.

열다

Finance 바닥글 구성 요소

금융 및 은행 인터페이스를 위한 반응형 바닥글 구성 요소로, 보색 구성표, Material Design 원칙 및 완전한 다크 모드 지원을 특징으로 합니다. 탐색 링크, 소셜 미디어 아이콘 및 저작권 고지가 포함됩니다.

열다