Search Components

Footer

Bottom section of the website with contact info, copyright, etc.

Industrial_Candy_Footer_Component

A responsive footer component for a forum/community platform, featuring an 'industrial' aesthetic with 'candy/sweet' color accents. Includes navigation links, social media icons, copyright, and a newsletter signup, with full dark mode support.

Open Preview

                <footer class="bg-zinc-100 dark:bg-zinc-900 text-zinc-900 dark:text-zinc-50 font-sans border-t-4 border-t-pink-500 dark:border-t-pink-700 shadow-lg">
  <div class="container mx-auto px-4 py-12 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12">

    <!-- Section 1: Logo & Tagline -->
    <div class="flex flex-col items-start">
      <a href="#" class="text-4xl lg:text-5xl font-extrabold tracking-tighter text-pink-500 dark:text-pink-400 mb-4 font-mono transform hover:scale-105 transition-transform duration-300">
        FORUM<span class="text-emerald-500 dark:text-emerald-400">HUB</span>
      </a>
      <p class="text-sm text-zinc-700 dark:text-zinc-300 leading-relaxed max-w-xs">
        Your vibrant community for discussions, insights, and connections. Built on solid ground.
      </p>
      <div class="mt-6 flex flex-wrap gap-4 text-zinc-600 dark:text-zinc-400">
        <p class="text-xs font-semibold uppercase tracking-wider">Powered by:</p>
        <span class="text-xs bg-pink-200 dark:bg-pink-800 text-pink-700 dark:text-pink-300 px-2 py-0.5 rounded-full shadow-inner">Gears</span>
        <span class="text-xs bg-emerald-200 dark:bg-emerald-800 text-emerald-700 dark:text-emerald-300 px-2 py-0.5 rounded-full shadow-inner">Circuits</span>
      </div>
    </div>

    <!-- Section 2: Quick Links -->
    <div>
      <h3 class="text-lg font-bold uppercase tracking-wide text-zinc-800 dark:text-zinc-100 mb-6 border-b-2 border-emerald-500 dark:border-emerald-700 pb-2 inline-block">
        Quick Links
      </h3>
      <ul class="space-y-4">
        <li>
          <a href="#" class="text-zinc-700 dark:text-zinc-300 hover:text-pink-500 dark:hover:text-pink-400 transition-colors duration-200 text-base font-medium relative group">
            Home
            <span class="absolute bottom-0 left-0 w-0 h-0.5 bg-emerald-500 dark:bg-emerald-400 group-hover:w-full transition-all duration-300"></span>
          </a>
        </li>
        <li>
          <a href="#" class="text-zinc-700 dark:text-zinc-300 hover:text-pink-500 dark:hover:text-pink-400 transition-colors duration-200 text-base font-medium relative group">
            Forums
            <span class="absolute bottom-0 left-0 w-0 h-0.5 bg-emerald-500 dark:bg-emerald-400 group-hover:w-full transition-all duration-300"></span>
          </a>
        </li>
        <li>
          <a href="#" class="text-zinc-700 dark:text-zinc-300 hover:text-pink-500 dark:hover:text-pink-400 transition-colors duration-200 text-base font-medium relative group">
            Members
            <span class="absolute bottom-0 left-0 w-0 h-0.5 bg-emerald-500 dark:bg-emerald-400 group-hover:w-full transition-all duration-300"></span>
          </a>
        </li>
        <li>
          <a href="#" class="text-zinc-700 dark:text-zinc-300 hover:text-pink-500 dark:hover:text-pink-400 transition-colors duration-200 text-base font-medium relative group">
            Guidelines
            <span class="absolute bottom-0 left-0 w-0 h-0.5 bg-emerald-500 dark:bg-emerald-400 group-hover:w-full transition-all duration-300"></span>
          </a>
        </li>
      </ul>
    </div>

    <!-- Section 3: Resources -->
    <div>
      <h3 class="text-lg font-bold uppercase tracking-wide text-zinc-800 dark:text-zinc-100 mb-6 border-b-2 border-emerald-500 dark:border-emerald-700 pb-2 inline-block">
        Resources
      </h3>
      <ul class="space-y-4">
        <li>
          <a href="#" class="text-zinc-700 dark:text-zinc-300 hover:text-pink-500 dark:hover:text-pink-400 transition-colors duration-200 text-base font-medium relative group">
            FAQ
            <span class="absolute bottom-0 left-0 w-0 h-0.5 bg-emerald-500 dark:bg-emerald-400 group-hover:w-full transition-all duration-300"></span>
          </a>
        </li>
        <li>
          <a href="#" class="text-zinc-700 dark:text-zinc-300 hover:text-pink-500 dark:hover:text-pink-400 transition-colors duration-200 text-base font-medium relative group">
            Support
            <span class="absolute bottom-0 left-0 w-0 h-0.5 bg-emerald-500 dark:bg-emerald-400 group-hover:w-full transition-all duration-300"></span>
          </a>
        </li>
        <li>
          <a href="#" class="text-zinc-700 dark:text-zinc-300 hover:text-pink-500 dark:hover:text-pink-400 transition-colors duration-200 text-base font-medium relative group">
            Privacy Policy
            <span class="absolute bottom-0 left-0 w-0 h-0.5 bg-emerald-500 dark:bg-emerald-400 group-hover:w-full transition-all duration-300"></span>
          </a>
        </li>
        <li>
          <a href="#" class="text-zinc-700 dark:text-zinc-300 hover:text-pink-500 dark:hover:text-pink-400 transition-colors duration-200 text-base font-medium relative group">
            Terms of Service
            <span class="absolute bottom-0 left-0 w-0 h-0.5 bg-emerald-500 dark:bg-emerald-400 group-hover:w-full transition-all duration-300"></span>
          </a>
        </li>
      </ul>
    </div>

    <!-- Section 4: Newsletter & Social -->
    <div>
      <h3 class="text-lg font-bold uppercase tracking-wide text-zinc-800 dark:text-zinc-100 mb-6 border-b-2 border-emerald-500 dark:border-emerald-700 pb-2 inline-block">
        Stay Connected
      </h3>
      <p class="text-zinc-700 dark:text-zinc-300 mb-4 text-sm">
        Join our newsletter for community updates and exclusive content.
      </p>
      <form class="flex flex-col sm:flex-row gap-2 mb-8">
        <input
          type="email"
          placeholder="Your email..."
          aria-label="Email for newsletter"
          class="flex-grow px-4 py-2 rounded-lg bg-zinc-200 dark:bg-zinc-800 text-zinc-900 dark:text-zinc-50 placeholder-zinc-500 dark:placeholder-zinc-400
                 border-2 border-zinc-300 dark:border-zinc-700 focus:outline-none focus:border-pink-500 dark:focus:border-pink-400
                 transition-colors duration-200 shadow-inner text-sm"
        />
        <button
          type="submit"
          aria-label="Subscribe to newsletter"
          class="bg-pink-500 dark:bg-pink-600 hover:bg-pink-600 dark:hover:bg-pink-700 text-white font-semibold py-2 px-5 rounded-lg
                 transition-all duration-300 ease-in-out transform hover:scale-105 active:scale-95
                 focus:outline-none focus:ring-2 focus:ring-pink-400 dark:focus:ring-pink-500 focus:ring-opacity-75 relative overflow-hidden text-sm"
        >
          <span class="relative z-10">Subscribe</span>
          <span class="absolute top-0 left-0 w-full h-full bg-pink-700 dark:bg-pink-800 opacity-0 hover:opacity-10 transition-opacity duration-300"></span>
        </button>
      </form>

      <h4 class="text-md font-bold uppercase tracking-wide text-zinc-800 dark:text-zinc-100 mb-4">Follow Us</h4>
      <div class="flex space-x-6">
        <a href="#" aria-label="Follow us on Facebook" class="text-zinc-700 dark:text-zinc-300 hover:text-emerald-500 dark:hover:text-emerald-400 transition-colors duration-200 text-2xl transform hover:scale-125 transition-transform duration-200">
          <svg fill="currentColor" viewBox="0 0 24 24" width="1em" height="1em"><path d="M12 2.04C6.54 2.04 2 6.51 2 11.94c0 5.09 3.69 9.35 8.5 10.32v-7.31H7.81v-3.01h2.69V8.58c0-2.6 1.59-4.01 3.88-4.01 1.11 0 2.06.08 2.34.12v2.78h-1.64c-1.29 0-1.55.61-1.55 1.51v1.98h3.08l-.5 3.01h-2.58V22.26c4.98-.97 8.5-5.23 8.5-10.32 0-5.43-4.54-9.9-10.04-9.9z"></path></svg>
        </a>
        <a href="#" aria-label="Follow us on Twitter" class="text-zinc-700 dark:text-zinc-300 hover:text-emerald-500 dark:hover:text-emerald-400 transition-colors duration-200 text-2xl transform hover:scale-125 transition-transform duration-200">
          <svg fill="currentColor" viewBox="0 0 24 24" width="1em" height="1em"><path d="M22.46 6c-.77.34-1.6.56-2.46.66.89-.53 1.57-1.37 1.89-2.37-.83.49-1.74.85-2.73 1.05C18.18 4.3 17.06 4 15.89 4c-3.3 0-5.99 2.68-5.99 5.99 0 .47.05.93.13 1.37-4.98-.25-9.39-2.64-12.34-6.28-.52.87-.82 1.87-.82 2.94 0 2.07 1.05 3.89 2.64 4.97-.8-.02-1.55-.24-2.2-.6v.07c0 2.9 2.06 5.31 4.79 5.86-.47.13-.96.2-1.47.2-.36 0-.71-.03-1.05-.1.76 2.37 2.97 4.1 5.6 4.14-2.05 1.61-4.64 2.57-7.44 2.57-.49 0-.96-.03-1.43-.09 2.64 1.7 5.77 2.7 9.17 2.7 10.99 0 17.02-9.12 17.02-17.02 0-.26-.01-.52-.02-.78.73-.53 1.36-1.19 1.86-1.92z"></path></svg>
        </a>
        <a href="#" aria-label="Follow us on Instagram" class="text-zinc-700 dark:text-zinc-300 hover:text-emerald-500 dark:hover:text-emerald-400 transition-colors duration-200 text-2xl transform hover:scale-125 transition-transform duration-200">
          <svg fill="currentColor" viewBox="0 0 24 24" width="1em" height="1em"><path d="M7.8 2h8.4C19.4 2 22 4.6 22 7.8v8.4c0 3.2-2.6 5.8-5.8 5.8H7.8C4.6 22 2 19.4 2 16.2V7.8C2 4.6 4.6 2 7.8 2zm-.2 2A2.8 2.8 0 005 6.8v8.4C5 17.1 6.9 19 9.2 19h8.4c2.3 0 4.2-1.9 4.2-4.2V7.8A2.8 2.8 0 0019.2 5H7.6zm9.2-.7h.8v.8h-.8v-.8zm-5.4 2.2c-3.1 0-5.7 2.5-5.7 5.7s2.5 5.7 5.7 5.7 5.7-2.5 5.7-5.7-2.6-5.7-5.7-5.7zm0 2c2 0 3.7 1.6 3.7 3.7S14 17.7 12 17.7 8.3 16.1 8.3 14 10 10.3 12 10.3z"></path></svg>
        </a>
        <a href="#" aria-label="Follow us on LinkedIn" class="text-zinc-700 dark:text-zinc-300 hover:text-emerald-500 dark:hover:text-emerald-400 transition-colors duration-200 text-2xl transform hover:scale-125 transition-transform duration-200">
          <svg fill="currentColor" viewBox="0 0 24 24" width="1em" height="1em"><path d="M20.5 2h-17A1.5 1.5 0 002 3.5v17A1.5 1.5 0 003.5 22h17a1.5 1.5 0 001.5-1.5v-17A1.5 1.5 0 0020.5 2zm-12 17.5h-3v-7h3zM6.91 9.4c-1.12 0-2-.82-2-1.99 0-1.18.88-2 2-2.01 1.12 0 2 .82 2 1.99S8.03 9.4 6.91 9.4zm13.11 10.1h-3.05a.5.5 0 01-.5-.5v-4.38c0-.77-.07-1.46-.86-1.46-.72 0-1.22.49-1.42 1.05-.09.25-.13.58-.13.91v4.08a.5.5 0 01-.5.5h-2.91a.5.5 0 01-.5-.5V12c0-1.3.01-2.6.01-3.69-.01-.72-.08-1.39-.77-1.39-.71 0-1.22.49-1.42 1.05-.09.25-.13.59-.13.92v6.62a.5.5 0 01-.5.5h-3.05a.5.5 0 01-.5-.5v-7h3v1.27a.5.5 0 01.12.33c.48-.68 1.18-1.22 2.76-1.22 3.12 0 5.48 2.05 5.48 6.46v5.82a.5.5 0 01-.5.5zM12 11h-3v-2h3v2z"></path></svg>
        </a>
      </div>
    </div>
  </div>

  <!-- Bottom Bar: Copyright & Theme Toggle (Placeholder) -->
  <div class="bg-zinc-200 dark:bg-zinc-800 py-6 border-t border-t-zinc-300 dark:border-t-zinc-700">
    <div class="container mx-auto px-4 flex flex-col md:flex-row justify-between items-center text-sm text-zinc-600 dark:text-zinc-400">
      <p>&copy; 2023 ForumHub. All rights reserved. Built with <span class="text-pink-500 dark:text-pink-400">&hearts;</span> by Community Devs.</p>
      <div class="mt-4 md:mt-0 flex items-center space-x-4">
        <span class="font-semibold">Industrial Charm, Sweet Vibes.</span>
        <!-- Placeholder for a real theme toggle: -->
        <button
          aria-label="Toggle dark mode"
          class="bg-zinc-300 dark:bg-zinc-700 text-zinc-800 dark:text-zinc-200 px-3 py-1 rounded-full
                 hover:bg-zinc-400 dark:hover:bg-zinc-600 transition-colors duration-200 text-xs font-bold shadow-sm"
        >
          Toggle Theme
        </button>
      </div>
    </div>
  </div>
</footer>

Luxury_Pastel_Government_Footer

An elegant, responsive footer component for government or public service websites, featuring a luxurious design with a pastel color scheme and dark mode support. Includes navigation links, contact info, social media, and copyright.

Open Preview

                <footer class="bg-gradient-to-r from-teal-50 to-blue-50 text-gray-700 dark:from-gray-900 dark:to-gray-950 dark:text-gray-300 py-12 px-4 shadow-inner border-t border-gray-200 dark:border-gray-800">
  <div class="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-10">

    <!-- Logo & Description -->
    <div class="flex flex-col items-start">
      <a href="#" class="flex items-center space-x-3 rtl:space-x-reverse mb-4">
        <svg class="w-8 h-8 text-teal-600 dark:text-teal-400" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path fill-rule="evenodd" d="M2.25 6a3 3 0 013-3h13.5a3 3 0 013 3v10.5a3 3 0 01-3 3H5.25a3 3 0 01-3-3V6zm3-.75a.75.75 0 00-.75.75v10.5c0 .414.336.75.75.75h13.5a.75.75 0 00.75-.75V6a.75.75 0 00-.75-.75H5.25zM6 9a.75.75 0 01.75-.75h10.5a.75.75 0 01.75.75v4.5a.75.75 0 01-.75.75H6.75a.75.75 0 01-.75-.75V9z" clip-rule="evenodd" />
        </svg>
        <span class="self-center text-3xl font-serif font-semibold whitespace-nowrap text-teal-800 dark:text-teal-200">Government</span>
      </a>
      <p class="text-sm text-gray-600 dark:text-gray-400 leading-relaxed max-w-xs">
        Committed to serving the public with transparency

Cyberpunk Footer Component

A simple, responsive footer component with a futuristic cyberpunk aesthetic using purple/violet tones, suitable for technology/SaaS applications. Includes dark mode support.

Open Preview

                <footer class="bg-black text-gray-300 py-8 px-4 sm:px-6 lg:px-8 shadow-inner shadow-purple-900/50 dark:bg-gray-950">
  <div class="max-w-7xl mx-auto flex flex-col items-center justify-between md:flex-row">
    
    <!-- Logo/Brand Name (Left/Top) -->
    <div class="mb-4 md:mb-0 text-center md:text-left">
      <a href="#" class="text-2xl font-extrabold tracking-tight text-purple-400 hover:text-purple-300 transition duration-300 ease-in-out glow-text">
        SYNAPTIC.AI
      </a>
      <p class="text-xs text-purple-600 mt-1 dark:text-purple-500">Unlocking Future Potential</p>
    </div>

    <!-- Navigation Links (Center) -->
    <nav class="flex flex-wrap justify-center gap-x-6 gap-y-2 mb-4 md:mb-0">
      <a href="#" class="text-sm text-purple-400 hover:text-purple-300 transition duration-300 ease-in-out relative group">
        Products
        <span class="absolute inset-x-0 bottom-0 h-0.5 bg-purple-500 transform scale-x-0 group-hover:scale-x-100 transition-transform origin-left"></span>
      </a>
      <a href="#" class="text-sm text-purple-400 hover:text-purple-300 transition duration-300 ease-in-out relative group">
        Solutions
        <span class="absolute inset-x-0 bottom-0 h-0.5 bg-purple-500 transform scale-x-0 group-hover:scale-x-100 transition-transform origin-left"></span>
      </a>
      <a href="#" class="text-sm text-purple-400 hover:text-purple-300 transition duration-300 ease-in-out relative group">
        Pricing
        <span class="absolute inset-x-0 bottom-0 h-0.5 bg-purple-500 transform scale-x-0 group-hover:scale-x-100 transition-transform origin-left"></span>
      </a>
      <a href="#" class="text-sm text-purple-400 hover:text-purple-300 transition duration-300 ease-in-out relative group">
        Contact
        <span class="absolute inset-x-0 bottom-0 h-0.5 bg-purple-500 transform scale-x-0 group-hover:scale-x-100 transition-transform origin-left"></span>
      </a>
    </nav>

    <!-- Copyright (Right/Bottom) -->
    <div class="text-center md:text-right">
      <p class="text-xs text-purple-700 dark:text-purple-600">&copy; 2077 SYNAPTIC.AI. All rights reserved.</p>
    </div>
  </div>
</footer>

<style>
  /* This style block is for demonstration and not part of the standard Tailwind CSS utility approach.
     It's meant to achieve a 'neon glow' effect which is typically done with custom CSS 
     or by extending Tailwind's config with plugins. For pure utility classes, 
     consider alternatives like shadow-lg with a colored shadow.
     For this specific request, a minimal custom CSS for the 'glow' is used. */
  .glow-text {
    text-shadow: 0 0 5px rgba(192, 132, 252, 0.7),
                 0 0 10px rgba(192, 132, 252, 0.5),
                 0 0 15px rgba(192, 132, 252, 0.3);
  }
  .dark .glow-text {
    text-shadow: 0 0 5px rgba(168, 85, 247, 0.8),
                 0 0 10px rgba(168, 85, 247, 0.6),
                 0 0 15px rgba(168, 85, 247, 0.4);
  }
</style>

Glassmorphism_Footer_Component

A responsive, glassmorphism-style footer component designed for booking/reservation systems, featuring a complementary color scheme, interactive elements, and full dark mode support.

Open Preview

                <footer class="relative bg-blue-50 dark:bg-gray-900 py-12 px-4 sm:px-6 lg:px-8 overflow-hidden">
  <!-- Background elements for glassmorphism effect -->
  <div class="absolute inset-0 z-0 opacity-20 dark:opacity-10">
    <div class="absolute top-1/4 left-1/4 w-60 h-60 bg-purple-300 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob dark:bg-purple-700"></div>
    <div class="absolute top-1/2 right-1/4 w-80 h-80 bg-orange-300 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-2000 dark:bg-orange-700"></div>
    <div class="absolute bottom-1/4 left-1/2 w-72 h-72 bg-blue-300 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-4000 dark:bg-blue-700"></div>
  </div>

  <div class="relative z-10 max-w-7xl mx-auto backdrop-filter backdrop-blur-lg bg-white bg-opacity-20 dark:bg-gray-800 dark:bg-opacity-20 rounded-xl shadow-lg p-8 transform transition-all duration-300 hover:shadow-2xl">
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 text-gray-800 dark:text-gray-200">

      <!-- Company Info / Logo -->
      <div class="space-y-4">
        <a href="#" class="flex items-center space-x-2 text-2xl font-bold text-gray-900 dark:text-white">
          <svg class="h-8 w-8 text-orange-500 dark:text-orange-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2zm3-11h.01M12 11h.01M15 11h.01M8 15h.01M12 15h.01M15 15h.01"></path>
          </svg>
          <span>BookNow</span>
        </a>
        <p class="text-sm text-gray-700 dark:text-gray-300">
          Simplify your bookings with ease. Reserve your spot instantly!
        </p>
        <div class="flex space-x-4">
          <a href="#" class="text-gray-600 dark:text-gray-400 hover:text-orange-500 dark:hover:text-orange-400 transition-colors duration-200">
            <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              <path fill-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33V22c4.781-.75 8.438-4.887 8.438-9.879z" clip-rule="evenodd"></path>
            </svg>
          </a>
          <a href="#" class="text-gray-600 dark:text-gray-400 hover:text-orange-500 dark:hover:text-orange-400 transition-colors duration-200">
            <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              <path d="M8.29 20.251c-1.413.385-2.827.601-4.22-.601C2.5 19 1 17.5 1 15v-5c0-1.5.5-3 1.5-4C3 5.5 4.5 5 6 5h1c1.5 0 2.5.5 3 1.5 1 3 2 5 4 5h7c1.5 0 2.5.5 3 1.5s.5 2.5.5 4v2c0 2-1 3.5-3 4-1.5.5-3-.5-4-1.5-1-1-2-1.5-4-1h-6.71z"/>
              <linearGradient id="twitter-gradient" x1="0%" y1="0%" x2="100%" y2="100%">
                <stop offset="0%" stop-color="#1DA1F2"/>
                <stop offset="100%" stop-color="#8A3AB9"/>
              </linearGradient>
              <path d="M22.46 6c-.73.33-1.51.55-2.32.65.84-.5 1.48-1.29 1.78-2.25-.79.47-1.67.81-2.61.99-.75-.8-1.82-1.3-3.02-1.3-2.29 0-4.15 1.86-4.15 4.15 0 .32.04.63.11.93-3.45-.17-6.5-1.82-8.54-4.3-.36.62-.56 1.35-.56 2.12 0 1.44.73 2.7 1.84 3.45-.68-.02-1.32-.2-1.88-.52v.05c0 2.01 1.43 3.69 3.32 4.07-.35.1-.71.15-1.09.15-.27 0-.53-.03-.79-.07.53 1.64 2.06 2.84 3.89 2.87-1.42 1.11-3.21 1.77-5.15 1.77-.33 0-.66-.02-.98-.06 1.83 1.17 3.99 1.86 6.32 1.86 7.58 0 11.72-6.28 11.72-11.72 0-.18-.01-.36-.01-.54.81-.58 1.52-1.3 2.08-2.13z" fill="url(#twitter-gradient)"></path>
            </svg>
          </a>
          <a href="#" class="text-gray-600 dark:text-gray-400 hover:text-orange-500 dark:hover:text-orange-400 transition-colors duration-200">
            <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              <path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.529 2.341 1.088 2.91.829.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.93 0-1.088.384-1.979 1.024-2.678-.103-.253-.446-1.263.098-2.648 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.702.115 2.504.337 1.909-1.296 2.747-1.026 2.747-1.026.546 1.385.202 2.395.099 2.648.64.699 1.023 1.59 1.023 2.678 0 3.827-2.336 4.673-4.565 4.92.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2Z" clip-rule="evenodd"></path>
            </svg>
          </a>
        </div>
      </div>

      <!-- Quick Links -->
      <div>
        <h3 class="text-lg font-semibold mb-4 text-gray-900 dark:text-white">Quick Links</h3>
        <ul class="space-y-2">
          <li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-orange-500 dark:hover:text-orange-400 transition-colors duration-200">Home</a></li>
          <li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-orange-500 dark:hover:text-orange-400 transition-colors duration-200">Services</a></li>
          <li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-orange-500 dark:hover:text-orange-400 transition-colors duration-200">About Us</a></li>
          <li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-orange-500 dark:hover:text-orange-400 transition-colors duration-200">Contact</a></li>
        </ul>
      </div>

      <!-- Booking Categories -->
      <div>
        <h3 class="text-lg font-semibold mb-4 text-gray-900 dark:text-white">Booking Categories</h3>
        <ul class="space-y-2">
          <li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-orange-500 dark:hover:text-orange-400 transition-colors duration-200">Restaurant Reservations</a></li>
          <li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-orange-500 dark:hover:text-orange-400 transition-colors duration-200">Medical Appointments</a></li>
          <li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-orange-500 dark:hover:text-orange-400 transition-colors duration-200">Beauty & Spa Services</a></li>
          <li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-orange-500 dark:hover:text-orange-400 transition-colors duration-200">Event Tickets</a></li>
        </ul>
      </div>

      <!-- Contact Info / Newsletter -->
      <div>
        <h3 class="text-lg font-semibold mb-4 text-gray-900 dark:text-white">Contact & Newsletter</h3>
        <p class="text-gray-700 dark:text-gray-300 mb-2">
          123 Booking St, Suite 400, Reserville, BOOK 12345
        </p>
        <p class="text-gray-700 dark:text-gray-300 mb-2">
          Email: <a href="mailto:[email protected]" class="hover:text-orange-500 dark:hover:text-orange-400 transition-colors duration-200">[email protected]</a>
        </p>
        <p class="text-gray-700 dark:text-gray-300 mb-4">
          Phone: <a href="tel:+1-800-555-BOOK" class="hover:text-orange-500 dark:hover:text-orange-400 transition-colors duration-200">+1-800-555-BOOK</a>
        </p>

        <form class="flex flex-col sm:flex-row gap-2">
          <input type="email" placeholder="Your Email" aria-label="Your Email" class="flex-grow p-3 rounded-lg border border-gray-300 dark:border-gray-600 bg-white bg-opacity-50 dark:bg-gray-700 dark:bg-opacity-50 text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400 focus:ring-2 focus:ring-orange-400 focus:border-transparent outline-none transition-all duration-200">
          <button type="submit" class="p-3 rounded-lg bg-orange-500 text-white font-semibold hover:bg-orange-600 dark:bg-purple-600 dark:hover:bg-purple-700 transition-colors duration-200 shadow-md transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-orange-400 focus:ring-offset-2 dark:focus:ring-purple-400 dark:focus:ring-offset-gray-900">
            Subscribe
          </button>
        </form>
      </div>

    </div>

    <!-- Copyright and Policies -->
    <div class="mt-12 pt-8 border-t border-gray-300 dark:border-gray-700 text-center text-sm text-gray-600 dark:text-gray-400">
      <p>&copy; 2023 BookNow. All rights reserved.</p>
      <div class="mt-2 space-x-4">
        <a href="#" class="hover:text-orange-500 dark:hover:text-orange-400 transition-colors duration-200">Privacy Policy</a>
        <a href="#" class="hover:text-orange-500 dark:hover:text-orange-400 transition-colors duration-200">Terms of Service</a>
        <a href="#" class="hover:text-orange-500 dark:hover:text-orange-400 transition-colors duration-200">Cookie Policy</a>
      </div>
    </div>
  </div>
  
  <!-- Tailwind CSS animation keyframes for blob -->
  <style>
    @keyframes blob {
      0% { transform: translate(0px, 0px) scale(1); }
      33% { transform: translate(30px, -50px) scale(1.1); }
      66% { transform: translate(-20px, 20px) scale(0.9); }
      100% { transform: translate(0px, 0px) scale(1); }
    }
    .animate-blob {
      animation: blob 7s infinite;
    }
    .animation-delay-2000 {
      animation-delay: 2s;
    }
    .animation-delay-4000 {
      animation-delay: 4s;
    }
  </style>
</footer>

Organic_Nature_Inspired_Real_Estate_Footer

A complex, nature-inspired, and complementary-colored footer component for real estate platforms, featuring flowing lines, natural forms, multiple interactive elements, and full responsiveness with dark mode support.

Open Preview

                <footer class="bg-gradient-to-br from-green-50 to-blue-50 text-gray-800 py-12 dark:from-green-950 dark:to-blue-950 dark:text-gray-200 overflow-hidden relative">
  <!-- Background organic shapes - these are visual only and might need careful positioning -->
  <div class="absolute -bottom-20 -left-20 w-80 h-80 rounded-full bg-green-200 opacity-30 blur-3xl dark:bg-green-700 dark:opacity-20 transition-all duration-500 ease-in-out"></div>
  <div class="absolute -top-10 -right-10 w-96 h-96 rounded-full bg-blue-200 opacity-30 blur-3xl dark:bg-blue-700 dark:opacity-20 transition-all duration-500 ease-in-out"></div>
  <div class="absolute bottom-1/4 left-1/4 w-60 h-60 rounded-full bg-green-100 opacity-20 blur-2xl dark:bg-green-800 dark:opacity-10 transition-all duration-500 ease-in-out"></div>

  <div class="container mx-auto px-4 relative z-10">
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-10 lg:gap-12">

      <!-- Company Info / Logo -->
      <div class="lg:col-span-2 flex flex-col items-start">
        <a href="#" class="flex items-center space-x-3 mb-6 transition-transform hover:scale-105 duration-300">
          <img src="https://picsum.photos/id/10/50/50" alt="Nature Estate Logo" class="rounded-full shadow-lg border-2 border-green-400 dark:border-green-600">
          <span class="font-extrabold text-3xl text-green-700 dark:text-green-300 font-serif">NatureNest</span>
        </a>
        <p class="text-base leading-relaxed text-gray-700 dark:text-gray-300 mb-6 max-w-sm">
          Discover your dream home nestled in harmony with nature. We connect you to serene properties that breathe life into your living.
        </p>
        <form class="w-full max-w-sm relative group">
          <input type="email" placeholder="Your email for updates..." class="w-full p-3 rounded-full bg-white bg-opacity-70 border-2 border-green-300 dark:bg-gray-800 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-transparent dark:border-green-700 pr-12 transition-all duration-300 group-focus-within:shadow-lg group-focus-within:border-blue-400">
          <button type="submit" class="absolute right-2 top-1/2 -translate-y-1/2 p-2 bg-green-500 rounded-full text-white hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-blue-400 dark:bg-green-600 dark:hover:bg-green-700 transition-all duration-300">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M10.293 15.707a1 1 0 010-1.414L14.586 10l-4.293-4.293a1 1 0 111.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd" />
              <path fill-rule="evenodd" d="M4.293 15.707a1 1 0 010-1.414L8.586 10l-4.293-4.293a1 1 0 111.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd" />
            </svg>
          </button>
        </form>
      </div>

      <!-- Quick Links -->
      <div>
        <h3 class="text-xl font-bold mb-6 text-green-700 dark:text-green-300 border-b-2 border-green-400 pb-2 inline-block transition-colors duration-300">Quick Links</h3>
        <ul class="space-y-4">
          <li><a href="#" class="hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2 text-blue-500 dark:text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" /></svg>Properties</a></li>
          <li><a href="#" class="hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2 text-blue-500 dark:text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" /></svg>About Us</a></li>
          <li><a href="#" class="hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2 text-blue-500 dark:text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" /></svg>Contact</a></li>
          <li><a href="#" class="hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2 text-blue-500 dark:text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" /></svg>Blog</a></li>
          <li><a href="#" class="hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2 text-blue-500 dark:text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" /></svg>Careers</a></li>
        </ul>
      </div>

      <!-- Services -->
      <div>
        <h3 class="text-xl font-bold mb-6 text-green-700 dark:text-green-300 border-b-2 border-green-400 pb-2 inline-block transition-colors duration-300">Services</h3>
        <ul class="space-y-4">
          <li><a href="#" class="hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2 text-blue-500 dark:text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" /></svg>Buy Property</a></li>
          <li><a href="#" class="hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2 text-blue-500 dark:text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" /></svg>Sell Property</a></li>
          <li><a href="#" class="hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2 text-blue-500 dark:text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" /></svg>Property Valuation</a></li>
          <li><a href="#" class="hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2 text-blue-500 dark:text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" /></svg>Mortgage Advice</a></li>
          <li><a href="#" class="hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2 text-blue-500 dark:text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" /></svg>Rental Management</a></li>
        </ul>
      </div>

      <!-- Contact Info -->
      <div>
        <h3 class="text-xl font-bold mb-6 text-green-700 dark:text-green-300 border-b-2 border-green-400 pb-2 inline-block transition-colors duration-300">Connect</h3>
        <ul class="space-y-4">
          <li class="flex items-start">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-3 mt-1 text-blue-500 dark:text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.727A8 8 0 016.343 7.273L7.757 8.687a6 6 0 008.486 8.486l1.414 1.414z" />
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.172 7.273a4 4 0 115.656 5.656L10 17.657 4.343 12zm0 0L4.343 7.273m0 0L9.172 2.445" />
            </svg>
            <address class="not-italic text-gray-700 dark:text-gray-300">
              123 EcoLane, Green Oasis City, GO 45678
            </address>
          </li>
          <li class="flex items-center">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-3 text-blue-500 dark:text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684L10.5 9.071c.325.399.075.95-.476 1.113l-1.424.378a12.013 12.013 0 008.68-8.68l.377-1.425c.164-.551.715-.801 1.113-.476l4.045 1.554A1 1 0 0121 16.72V19a2 2 0 01-2 2H5a2 2 0 01-2-2v-5.28a1 1 0 01.684-.948l1.554-4.045z" />
            </svg>
            <a href="tel:+1234567890" class="hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200">+1 (234) 567-890</a>
          </li>
          <li class="flex items-center">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-3 text-blue-500 dark:text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26c.73.48 1.67.48 2.4 0L21 8m-18 8V6a2 2 0 012-2h14a2 2 0 012 2v10a2 2 0 01-2 2H5a2 2 0 01-2-2z" />
            </svg>
            <a href="mailto:[email protected]" class="hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200">[email protected]</a>
          </li>
        </ul>
      </div>

    </div>

    <div class="mt-12 pt-8 border-t border-green-300 dark:border-green-700 flex flex-col md:flex-row items-center justify-between text-sm text-gray-600 dark:text-gray-400">
      <p class="mb-4 md:mb-0">&copy; 2023 NatureNest. All rights reserved. <span class="hidden md:inline">|</span> <br class="md:hidden"> Designed with nature in mind.</p>
      <div class="flex space-x-6">
        <a href="#" class="hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200">Privacy Policy</a>
        <a href="#" class="hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200">Terms of Service</a>
        <a href="#" class="hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200">Sitemap</a>
      </div>
    </div>
  </div>
</footer>

Watercolor/Artistic Neon Footer

A simple, responsive footer component with a watercolor/artistic aesthetic and a vibrant neon color scheme, suitable for a portfolio website. Includes dark mode support.

Open Preview

                <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>

Portfolio-Minimalist-Triadic-Complex-Footer

A complex, minimalist-style footer for a portfolio website, using a triadic color scheme. Includes navigation links, social media icons, copyright, and a call-to-action for contact, with full responsiveness and dark mode support.

Open Preview

                <footer class="bg-blue-50 dark:bg-gray-950 text-gray-800 dark:text-gray-100 py-12 px-4 sm:px-6 lg:px-8">
  <div class="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-4 lg:grid-cols-5 gap-8">
    
    <div class="col-span-full lg:col-span-1 flex flex-col items-center md:items-start mb-6 md:mb-0">
      <a href="#" class="text-2xl font-bold tracking-tight text-orange-600 dark:text-teal-400 mb-4">
        Your Portfolio
      </a>
      <p class="text-center md:text-left text-sm text-gray-600 dark:text-gray-400 leading-relaxed">
        Showcasing creative work and innovative solutions.
      </p>
    </div>

    <div class="col-span-full md:col-span-1 lg:col-span-1">
      <h3 class="text-lg font-semibold text-orange-600 dark:text-teal-400 mb-4 text-center md:text-left">Quick Links</h3>
      <ul class="space-y-3 text-center md:text-left">
        <li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-orange-500 dark:hover:text-teal-300 transition-colors duration-200">Home</a></li>
        <li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-orange-500 dark:hover:text-teal-300 transition-colors duration-200">Projects</a></li>
        <li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-orange-500 dark:hover:text-teal-300 transition-colors duration-200">Services</a></li>
        <li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-orange-500 dark:hover:text-teal-300 transition-colors duration-200">About Me</a></li>
      </ul>
    </div>

    <div class="col-span-full md:col-span-1 lg:col-span-1">
      <h3 class="text-lg font-semibold text-orange-600 dark:text-teal-400 mb-4 text-center md:text-left">Resources</h3>
      <ul class="space-y-3 text-center md:text-left">
        <li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-orange-500 dark:hover:text-teal-300 transition-colors duration-200">Blog</a></li>
        <li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-orange-500 dark:hover:text-teal-300 transition-colors duration-200">Case Studies</a></li>
        <li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-orange-500 dark:hover:text-teal-300 transition-colors duration-200">Client Testimonials</a></li>
        <li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-orange-500 dark:hover:text-teal-300 transition-colors duration-200">FAQs</a></li>
      </ul>
    </div>

    <div class="col-span-full md:col-span-1 lg:col-span-1">
      <h3 class="text-lg font-semibold text-orange-600 dark:text-teal-400 mb-4 text-center md:text-left">Get in touch</h3>
      <div class="text-center md:text-left space-y-3">
        <p class="text-gray-700 dark:text-gray-300">123 Creative Studio, City, Country</p>
        <p class="text-gray-700 dark:text-gray-300">[email protected]</p>
        <p class="text-gray-700 dark:text-gray-300">+1 (555) 123-4567</p>
      </div>
    </div>

    <div class="col-span-full md:col-span-4 lg:col-span-1 flex flex-col items-center lg:items-end justify-between">
      <h3 class="text-lg font-semibold text-orange-600 dark:text-teal-400 mb-4">Socials</h3>
      <div class="flex space-x-6 mb-8 lg:mb-0">
        <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-orange-500 dark:hover:text-teal-300 transition-colors duration-200">
          <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path fill-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.502 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33V22C17.361 21.088 22 16.991 22 12z" clip-rule="evenodd" />
          </svg>
          <span class="sr-only">Facebook</span>
        </a>
        <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-orange-500 dark:hover:text-teal-300 transition-colors duration-200">
          <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path fill-rule="evenodd" d="M12.315 2c2.43 0 2.784.002 3.797.048.85.04 1.488.165 1.802.272.937.333 1.404 1.093 1.487 2.305.047.508.09 1.109.09 3.003v.404c0 2.441-.001 2.784-.048 3.797-.04.85-.165 1.487-.272 1.802-.333.937-1.093 1.404-2.305 1.488-.508.047-1.109.09-3.003.09h-.404c-2.441 0-2.784-.001-3.797-.048-.85-.04-1.487-.165-1.802-.272-.937-.333-1.404-1.093-1.488-2.305-.047-.508-.09-1.109-.09-3.003v-.404c0-2.43.001-2.784.048-3.797.04-.85.165-1.488.272-1.802.333-.937 1.093-1.404 2.305-1.488.508-.047 1.109-.09 3.003-.09h.404ZM12 2.163c-3.178 0-3.578.013-4.858.077-.975.051-1.666.241-2.185.421-.504.179-.902.439-1.302.839-.399.4-.659.798-.839 1.302-.18.519-.37 1.21-.421 2.185-.064 1.28-.076 1.679-.076 4.858 0 3.178.013 3.577.076 4.858.051.975.241 1.667.421 2.186.179.504.439.902.839 1.302.4.399.798.659 1.302.839.519.18 1.21.37 2.185.421 1.28.064 1.679.076 4.858.076 3.178 0 3.577-.013 4.858-.076.975-.051 1.668-.241 2.186-.421.504-.179.902-.439 1.302-.839.399-.4.659-.798.839-1.302.18-.519.37-1.21.421-2.186.064-1.28.076-1.678.076-4.858 0-3.178-.013-3.578-.076-4.858-.051-.975-.241-1.666-.421-2.185-.179-.504-.439-.902-.839-1.302-.4-.399-.798-.659-1.302-.839-.519-.18-1.21-.37-2.186-.421C15.577 2.176 15.178 2.163 12 2.163Zm0 3.024c3.484 0 6.31 2.825 6.31 6.31 0 3.484-2.826 6.31-6.31 6.31-3.484 0-6.31-2.826-6.31-6.31 0-3.485 2.826-6.31 6.31-6.31Zm0 1.938c-2.486 0-4.5 2.014-4.5 4.5 0 2.485 2.014 4.5 4.5 4.5 2.485 0 4.5-2.015 4.5-4.5 0-2.486-2.015-4.5-4.5-4.5Zm6.55-.992a1.08 1.08 0 1 0 0 2.16 1.08 1.08 0 0 0 0-2.16Z" clip-rule="evenodd" />
          </svg>
          <span class="sr-only">Instagram</span>
        </a>
        <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-orange-500 dark:hover:text-teal-300 transition-colors duration-200">
          <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path d="M8.29 20.251c-.034.004-.067.006-.101.006C7.062 20.251 2 15.188 2 8.79C2 4.717 5.5.94 10.366 2.083c3.085.736 5.8 3.513 6.942 6.784L21.2 21.4c-.032.096-.064.192-.096.288L22 22.428V20h-4c-2.209 0-4-1.791-4-4V6h4V4H6v2H2c0 2.209 1.791 4 4 4h4v4h4v4h4Z" />
          </svg>
          <span class="sr-only">LinkedIn</span>
        </a>
        <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-orange-500 dark:hover:text-teal-300 transition-colors duration-200">
          <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path d="M12 2C6.475 2 2 6.475 2 12c0 4.296 2.65 7.914 6.36 9.387.52.09.712-.224.712-.49v-1.72c-2.434.529-2.956-1.173-2.956-1.173-.424-1.077-1.034-1.36-1.034-1.36-.84-.576.064-.565.064-.565.93.065 1.417.95 1.417.95.824 1.41 2.156 1.004 2.684.767.085-.597.322-1.004.587-1.233-2.052-.232-4.212-1.026-4.212-4.577 0-1.008.358-1.83.945-2.472-.095-.232-.41-1.174.09-2.447 0 0 .77-.247 2.52.945.73-.204 1.5-.31 2.29-.31.79 0 1.56.106 2.29.31 1.75-1.192 2.52-.945 2.52-.945.5 1.273.187 2.215.093 2.447.587.642.945 1.464.945 2.472 0 3.56-2.164 4.343-4.223 4.57.34.293.645.867.645 1.758v2.59c0 .267.19.58.716.49C19.35 19.914 22 16.296 22 12c0-5.525-4.475-10-10-10Z" />
          </svg>
          <span class="sr-only">GitHub</span>
        </a>
      </div>
    </div>

  </div>
  
  <div class="border-t border-gray-200 dark:border-gray-700 mt-12 pt-8 text-center">
    <p class="text-sm text-gray-600 dark:text-gray-400">&copy; 2023 Your Portfolio. All rights reserved.</p>
  </div>
</footer>

Luxury SaaS Footer

An elegant and sophisticated footer component for a SaaS application, featuring multiple navigation sections, a newsletter signup, social media links, and copyright information. Designed with an ocean/blue color palette, full responsiveness, and dark mode support.

Open Preview

                <footer class="bg-gradient-to-r from-blue-900 to-indigo-900 text-blue-200 dark:from-gray-950 dark:to-gray-800 dark:text-gray-300 py-12 md:py-16 lg:py-20">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-8 md:gap-12 lg:gap-16">

      <!-- Company Info & Logo -->
      <div class="lg:col-span-2 space-y-6">
        <a href="#" class="flex items-center space-x-3">
          <svg class="h-8 w-8 text-blue-400 dark:text-indigo-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-1.25-3M15 10V5m0 0l-3 3m3-3l3 3M6.75 20h10.5c.75 0 1.5-.75 1.5-1.5V11.25c0-1.25-1-2.25-2.25-2.25H6.75C5.5 9 4.5 10.25 4.5 11.25v7.25c0 .75.75 1.5 1.5 1.5z" />
          </svg>
          <span class="text-3xl font-extrabold tracking-tight text-white dark:text-gray-100">AQUA</span><span class="text-3xl font-extrabold tracking-tight text-blue-300 dark:text-blue-400">DRIFT</span>
        </a>
        <p class="text-blue-300 dark:text-gray-400 leading-relaxed text-sm lg:text-base pr-8">
          Revolutionizing the way you manage and scale your digital presence with cutting-edge cloud solutions.
        </p>
        <div class="flex space-x-4">
          <a href="#" class="text-blue-300 hover:text-blue-100 dark:text-gray-400 dark:hover:text-gray-100 transition duration-300 ease-in-out">
            <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              <path fill-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.79c0-2.508 1.493-3.89 3.776-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33V22H12c5.523 0 10-4.477 10-10z" clip-rule="evenodd" />
            </svg>
          </a>
          <a href="#" class="text-blue-300 hover:text-blue-100 dark:text-gray-400 dark:hover:text-gray-100 transition duration-300 ease-in-out">
            <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              <path d="M8.29 20.251c-.03.01-.06.02-.09.03-.46.163-1.02.242-1.59.242-2.24 0-4.06-1.803-4.06-4.025 0-.75.21-1.427.67-2.008C3.77 14.1 4.7 15.657 6.24 16.7L7.2 16.27c.45.16 1 .25 1.56.25 2.23 0 4.04-1.79 4.04-4S10.55 8.25 8.32 8.25c-.56 0-1.12.09-1.57.25l-.94-.4.07-.1c.3-.59.7-1.15 1.18-1.6L8.29 20.251zm-5.75-8.5v.02c.03-.01.06-.02.09-.03.46-.163 1.02-.242 1.59-.242 2.24 0 4.06 1.803 4.06 4.025 0 .75-.21 1.427-.67 2.008-1.1.9-2.03 2.457-3.57 3.55l-1.05.47c-.45-.16-1-.25-1.56-.25-2.23 0-4.04 1.79-4.04 4S10.55 8.25 8.32 8.25c-.56 0-1.12.09-1.57.25l-.94-.4.07-.1c.3-.59.7-1.15 1.18-1.6L8.29 20.251z" />
              <path d="M8 0c4.417 0 8 3.582 8 8s-3.583 8-8 8-8-3.582-8-8 3.583-8 8-8zm0 2.2C4.1 2.2 1 5.3 1 9.2s3.1 7 7 7 7-3.1 7-7S11.9 2.2 8 2.2z" fill="#1da1f2" />
              <path d="M17.448 3.858c-.851.378-1.748.636-2.613.743.975-.583 1.724-1.503 2.072-2.593-.91.54-1.921.93-3.003 1.15a5.59 5.59 0 00-9.605 5.093c-4.664-.22-8.78-2.455-11.542-5.836C.68 6.968 1 8.878 2.2 9.489c-.7.01-1.35-.21-1.9-.53v.07c0 2.12 1.5 3.89 3.5 4.3c-.3.08-.6.12-.9.12-.2 0-.4 0-.6-.05.5 1.7 2.1 2.9 3.9 2.94-1.5 1.2-3.4 1.9-5.4 1.9-.3 0-.6 0-.8-.04C2.5 21.2 4.7 22 7.1 22c8.6 0 13-7.1 13-13 0-.2 0-.4 0-.6.9-2 1.7-4 2.2-6.1z" />
            </svg>
          </a>
          <a href="#" class="text-blue-300 hover:text-blue-100 dark:text-gray-400 dark:hover:text-gray-100 transition duration-300 ease-in-out">
            <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              <path fill-rule="evenodd" d="M12.315 2c2.43 0 2.784.013 3.715.056 8.903.417 10.579 2.083 10.998 10.998.043.93.056 1.286.056 3.715 0 2.43-.013 2.784-.056 3.715-.417 8.903-2.083 10.579-10.998 10.998-.93.043-1.286.056-3.715.056-2.43 0-2.784-.013-3.715-.056-8.903-.417-10.579-2.083-10.998-10.998-.043-.93-.056-1.286-.056-3.715 0-2.43.013-2.784.056-3.715.417-8.903 2.083-10.579 10.998-10.998.93-.043 1.286-.056 3.715-.056zm0 2.18c-2.427 0-2.753.011-3.693.051-7.16 0-8.498 1.4-8.89 8.89-.04.94-.051 1.266-.051 3.693 0 2.427.011 2.753.051 3.693.392 7.16 1.73 8.498 8.89 8.89.94.04 1.266.051 3.693.051 2.427 0 2.753-.011 3.693-.051 7.16-.392 8.498-1.73 8.89-8.89.04-.94.051-1.266.051-3.693 0-2.427-.011-2.753-.051-3.693-.392-7.16-1.73-8.498-8.89-8.89zM12.315 9.255c-1.68 0-3.056 1.376-3.056 3.056s1.376 3.056 3.056 3.056 3.056-1.376 3.056-3.056-1.376-3.056-3.056-3.056zm0 5.011c-1.076 0-1.955-.879-1.955-1.955s.879-1.955 1.955-1.955 1.955.879 1.955 1.955-.879 1.955-1.955 1.955zm6.606-5.87a1.442 1.442 0 100-2.884 1.442 1.442 0 000 2.884z" clip-rule="evenodd" />
            </svg>
          </a>
          <a href="#" class="text-blue-300 hover:text-blue-100 dark:text-gray-400 dark:hover:text-gray-100 transition duration-300 ease-in-out">
            <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              <path d="M12 0c-6.627 0-12 5.372-12 12 0 5.308 3.435 9.799 8.203 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.016-2.03-3.338.724-4.042-1.61-4.042-1.61-.546-1.387-1.334-1.758-1.334-1.758-1.09-.744.08-.729.08-.729 1.205.086 1.838 1.238 1.838 1.238 1.07 1.833 2.809 1.303 3.492.996.108-.775.419-1.303.762-1.602-2.665-.304-5.467-1.334-5.467-5.932 0-1.31.465-2.383 1.235-3.22-.124-.303-.535-1.52.117-3.176 0 0 1.008-.323 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.046.138 3.003.404 2.292-1.553 3.3-1.23 3.3-1.23.653 1.656.242 2.873.118 3.176.77.837 1.233 1.91 1.233 3.22 0 4.61-2.809 5.624-5.474 5.922.43.37.817 1.109.817 2.23 0 1.61-.015 2.904-.015 3.29 0 .322.218.698.827.576C20.565 21.795 24 17.308 24 12 24 5.372 18.627 0 12 0z" />
            </svg>
          </a>
        </div>
      </div>

      <!-- Navigation Sections -->
      <div class="space-y-6">
        <h3 class="text-lg font-semibold text-white dark:text-gray-100">Product</h3>
        <ul class="space-y-3">
          <li><a href="#" class="text-blue-300 hover:text-blue-100 dark:text-gray-400 dark:hover:text-gray-100 transition duration-300 ease-in-out text-sm">Features</a></li>
          <li><a href="#" class="text-blue-300 hover:text-blue-100 dark:text-gray-400 dark:hover:text-gray-100 transition duration-300 ease-in-out text-sm">Pricing</a></li>
          <li><a href="#" class="text-blue-300 hover:text-blue-100 dark:text-gray-400 dark:hover:text-gray-100 transition duration-300 ease-in-out text-sm">Integrations</a></li>
          <li><a href="#" class="text-blue-300 hover:text-blue-100 dark:text-gray-400 dark:hover:text-gray-100 transition duration-300 ease-in-out text-sm">Testimonials</a></li>
        </ul>
      </div>

      <div class="space-y-6">
        <h3 class="text-lg font-semibold text-white dark:text-gray-100">Company</h3>
        <ul class="space-y-3">
          <li><a href="#" class="text-blue-300 hover:text-blue-100 dark:text-gray-400 dark:hover:text-gray-100 transition duration-300 ease-in-out text-sm">About Us</a></li>
          <li><a href="#" class="text-blue-300 hover:text-blue-100 dark:text-gray-400 dark:hover:text-gray-100 transition duration-300 ease-in-out text-sm">Careers</a></li>
          <li><a href="#" class="text-blue-300 hover:text-blue-100 dark:text-gray-400 dark:hover:text-gray-100 transition duration-300 ease-in-out text-sm">Blog</a></li>
          <li><a href="#" class="text-blue-300 hover:text-blue-100 dark:text-gray-400 dark:hover:text-gray-100 transition duration-300 ease-in-out text-sm">Press</a></li>
        </ul>
      </div>

      <div class="space-y-6">
        <h3 class="text-lg font-semibold text-white dark:text-gray-100">Support</h3>
        <ul class="space-y-3">
          <li><a href="#" class="text-blue-300 hover:text-blue-100 dark:text-gray-400 dark:hover:text-gray-100 transition duration-300 ease-in-out text-sm">Help Center</a></li>
          <li><a href="#" class="text-blue-300 hover:text-blue-100 dark:text-gray-400 dark:hover:text-gray-100 transition duration-300 ease-in-out text-sm">Contact Us</a></li>
          <li><a href="#" class="text-blue-300 hover:text-blue-100 dark:text-gray-400 dark:hover:text-gray-100 transition duration-300 ease-in-out text-sm">API Docs</a></li>
          <li><a href="#" class="text-blue-300 hover:text-blue-100 dark:text-gray-400 dark:hover:text-gray-100 transition duration-300 ease-in-out text-sm">Status</a></li>
        </ul>
      </div>

      <!-- Newsletter Signup -->
      <div class="lg:col-span-1 space-y-6 md:col-span-2">
        <h3 class="text-lg font-semibold text-white dark:text-gray-100">Stay Updated</h3>
        <p class="text-blue-300 dark:text-gray-400 text-sm">Subscribe to our newsletter for the latest news and updates.</p>
        <form class="flex flex-col sm:flex-row gap-3">
          <label for="email-address" class="sr-only">Email address</label>
          <input id="email-address" name="email" type="email" autocomplete="email" required class="min-w-0 flex-auto rounded-md border-0 bg-blue-800/50 dark:bg-gray-700/50 px-3.5 py-2 text-white dark:text-gray-200 shadow-sm ring-1 ring-inset ring-blue-700/50 dark:ring-gray-600 focus:ring-2 focus:ring-inset focus:ring-blue-400 dark:focus:ring-indigo-400 sm:text-sm sm:leading-6 placeholder:text-blue-300/80 dark:placeholder:text-gray-400" placeholder="Enter your email">
          <button type="submit" class="flex-none rounded-md bg-blue-500 dark:bg-indigo-600 px-4 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-blue-600 dark:hover:bg-indigo-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-400 dark:focus-visible:outline-indigo-500 transition duration-300 ease-in-out">
            Subscribe
          </button>
        </form>
      </div>
    </div>

    <!-- Divider -->
    <div class="mt-12 md:mt-16 lg:mt-20 border-t border-blue-700/50 dark:border-gray-700 pt-8">
      <div class="flex flex-col md:flex-row items-center justify-between text-blue-400 dark:text-gray-500 text-sm space-y-4 md:space-y-0">
        <p>&copy; 2023 AquaDrift. All rights reserved.</p>
        <div class="flex space-x-6">
          <a href="#" class="hover:text-blue-100 dark:hover:text-gray-300 transition duration-300 ease-in-out">Privacy Policy</a>
          <a href="#" class="hover:text-blue-100 dark:hover:text-gray-300 transition duration-300 ease-in-out">Terms of Service</a>
          <a href="#" class="hover:text-blue-100 dark:hover:text-gray-300 transition duration-300 ease-in-out">Cookies Settings</a>
        </div>
      </div>
    </div>
  </div>
</footer>

Footer Component

A minimalist footer component with complementary colors, moderate complexity, and social media integration. Features responsive design and dark mode support.

Open Preview

                <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>

Glassmorphism Monochromatic Footer

A simple, monochromatic glassmorphism footer component for a blog, with responsive design and dark mode support.

Open Preview

                
<footer class="backdrop-blur-md bg-white/30 dark:bg-gray-800/30 text-gray-800 dark:text-gray-200 p-6">
  <div class="container mx-auto flex flex-col items-center justify-between md:flex-row">
    <div class="mb-4 md:mb-0 text-center md:text-left">
      <p>&copy; 2023 Blog Name. All rights reserved.</p>
    </div>
    <div class="flex space-x-4">
      <a href="#" class="hover:text-gray-600 dark:hover:text-gray-400 transition-colors duration-200">Privacy Policy</a>
      <a href="#" class="hover:text-gray-600 dark:hover:text-gray-400 transition-colors duration-200">Terms of Service</a>
      <a href="#" class="hover:text-gray-600 dark:hover:text-gray-400 transition-colors duration-200">Contact</a>
    </div>
  </div>
</footer>