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

Industrial_Rainbow_Footer_Navigation

산업적 미학, 노출된 요소, 금융/은행 인터페이스에 맞게 조정된 다색 무지개 그라데이션 배경을 갖춘 간단하고 반응이 빠른 바닥글 탐색 구성 요소입니다. 다크 모드 지원이 포함됩니다.

미리 보기

HTML 코드 

<footer class="bg-gradient-to-r from-red-500 via-yellow-500 to-blue-500 dark:from-gray-900 dark:via-zinc-800 dark:to-stone-700 p-4 text-white uppercase tracking-wider font-mono shadow-inner border-t-2 border-l-2 border-r-2 border-b-8 border-gray-700 dark:border-gray-950">
  <div class="container mx-auto flex flex-col md:flex-row justify-between items-center space-y-4 md:space-y-0">
    <div class="text-sm text-gray-100 dark:text-gray-400 opacity-80">
      <p>&copy; 2023 Nexus Bank Co. All Rights Reserved.</p>
      <p class="mt-1">Built with raw power and precision.</p>
    </div>
    <nav class="flex flex-wrap justify-center space-x-4 sm:space-x-6">
      <a href="#" class="text-sm hover:text-gray-200 dark:hover:text-gray-300 transition-colors duration-200
                          border-b border-white hover:border-gray-200 dark:border-gray-500 dark:hover:border-gray-300
                          pb-1">About Us</a>
      <a href="#" class="text-sm hover:text-gray-200 dark:hover:text-gray-300 transition-colors duration-200
                          border-b border-white hover:border-gray-200 dark:border-gray-500 dark:hover:border-gray-300
                          pb-1">Services</a>
      <a href="#" class="text-sm hover:text-gray-200 dark:hover:text-gray-300 transition-colors duration-200
                          border-b border-white hover:border-gray-200 dark:border-gray-500 dark:hover:border-gray-300
                          pb-1">Pricing</a>
      <a href="#" class="text-sm hover:text-gray-200 dark:hover:text-gray-300 transition-colors duration-200
                          border-b border-white hover:border-gray-200 dark:border-gray-500 dark:hover:border-gray-300
                          pb-1">Security</a>
      <a href="#" class="text-sm hover:text-gray-200 dark:hover:text-gray-300 transition-colors duration-200
                          border-b border-white hover:border-gray-200 dark:border-gray-500 dark:hover:border-gray-300
                          pb-1">Support</a>
    </nav>
  </div>
</footer>

관련 구성 요소

레트로/빈티지 전자상거래 바닥글

레트로/빈티지 바닥글 탐색 구성 요소는 전자 상거래를 위해 어스 톤, 단순한 레이아웃, 반응형 디자인 및 어두운 테마를 지원합니다.

열다

Footer Navigation 구성 요소

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

열다

Skeuomorphic_Grayscale_Business_Footer

비즈니스/기업 웹사이트를 위한 반응형 스큐어모픽 그레이스케일 바닥글 탐색 구성 요소로, 다크 모드를 지원합니다.

열다