CCHub Logo CCHub Tailwind Collection
구성 요소 바닥글 수채화/예술적 네온 바닥글

수채화/예술적 네온 바닥글

수채화/예술적 미학과 생생한 네온 색 구성표가 있는 간단하고 반응이 빠른 바닥글 구성 요소로 포트폴리오 웹사이트에 적합합니다. 다크 모드 지원이 포함됩니다.

미리 보기

HTML 코드 

<footer class="relative bg-gradient-to-br from-purple-100 via-pink-100 to-blue-100 text-gray-800 py-8 px-4 sm:px-6 lg:px-8 overflow-hidden dark:from-gray-950 dark:via-gray-900 dark:to-gray-800 dark:text-gray-200">
  <!-- Artistic Overlays (Simulated watercolor effect with gradients) -->
  <div class="absolute inset-0 z-0 opacity-40 mix-blend-multiply">
    <div class="absolute -top-1/4 -left-1/4 w-1/2 h-1/2 bg-blue-400 rounded-full filter blur-3xl opacity-60 dark:bg-blue-600"></div>
    <div class="absolute -bottom-1/4 -right-1/4 w-1/2 h-1/2 bg-pink-400 rounded-full filter blur-3xl opacity-60 dark:bg-pink-600"></div>
    <div class="absolute top-1/4 right-0 w-1/3 h-1/3 bg-lime-300 rounded-full filter blur-3xl opacity-60 dark:bg-lime-500"></div>
  </div>

  <div class="relative z-10 max-w-7xl mx-auto flex flex-col md:flex-row items-center justify-between gap-4 text-center md:text-left">
    <div class="flex flex-col items-center md:items-start space-y-2">
      <p class="text-3xl font-extrabold tracking-tight text-transparent bg-clip-text bg-gradient-to-r from-blue-600 via-pink-600 to-lime-600 dark:from-blue-400 dark:via-pink-400 dark:to-lime-400">
        [Your Name/Studio]
      </p>
      <p class="text-sm text-gray-600 dark:text-gray-400">
        &copy; <span id="current-year"></span> All rights reserved.
      </p>
    </div>

    <nav class="flex flex-wrap justify-center md:justify-end gap-x-6 gap-y-2">
      <a href="#" class="text-sm font-medium hover:text-blue-500 transition duration-300 dark:hover:text-blue-300">Home</a>
      <a href="#" class="text-sm font-medium hover:text-pink-500 transition duration-300 dark:hover:text-pink-300">Portfolio</a>
      <a href="#" class="text-sm font-medium hover:text-lime-500 transition duration-300 dark:hover:text-lime-300">About</a>
      <a href="#" class="text-sm font-medium hover:text-purple-500 transition duration-300 dark:hover:text-purple-300">Contact</a>
    </nav>
  </div>

  <script>
    document.getElementById('current-year').textContent = new Date().getFullYear();
  </script>
</footer>

관련 구성 요소

Industrial_Candy_Footer_Component

포럼/커뮤니티 플랫폼을 위한 반응형 바닥글 구성 요소로, '사탕/달콤한' 색상 액센트가 있는 '산업적' 미학을 특징으로 합니다. 탐색 링크, 소셜 미디어 아이콘, 저작권 및 뉴스레터 구독이 포함되며 완전한 다크 모드가 지원됩니다.

열다

럭셔리 SaaS 바닥글

SaaS 애플리케이션을 위한 우아하고 정교한 바닥글 구성 요소로, 여러 탐색 섹션, 뉴스레터 구독, 소셜 미디어 링크 및 저작권 정보를 제공합니다. 바다/파란색 팔레트, 완전한 반응성 및 다크 모드 지원으로 설계되었습니다.

열다

사이버펑크 바닥글 구성 요소

기술/SaaS 애플리케이션에 적합한 보라색/보라색 톤을 사용하는 미래형 사이버펑크 미학을 가진 간단하고 반응이 빠른 바닥글 구성 요소입니다. 다크 모드 지원이 포함됩니다.

열다