Search Components

Footer

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

Bauhaus Monochromatic Healthcare Footer

A simple, functional footer component for healthcare applications, inspired by Bauhaus design principles. Features a monochromatic color scheme, responsive layout, and dark mode support.

Open Preview

                <footer class="bg-gray-100 py-6 dark:bg-gray-900 border-t border-gray-200 dark:border-gray-800">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex flex-col items-center text-center">
    <div class="mb-4">
      <a href="#" class="text-gray-800 dark:text-gray-200 text-2xl font-bold tracking-tight">MediCare</a>
    </div>
    <nav class="flex flex-wrap justify-center space-x-4 sm:space-x-6 mb-4">
      <a href="#" class="text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100 transition-colors duration-200 text-sm">Privacy Policy</a>
      <a href="#" class="text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100 transition-colors duration-200 text-sm">Terms of Service</a>
      <a href="#" class="text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100 transition-colors duration-200 text-sm">Contact Us</a>
    </nav>
    <p class="text-gray-500 dark:text-gray-500 text-xs sm:text-sm">&copy; 2023 MediCare. All rights reserved.</p>
  </div>
</footer>

Finance Footer Component

A responsive footer component for finance and banking interfaces, featuring a complementary color scheme, Material Design principles, and full dark mode support. Includes navigation links, social media icons, and a copyright notice.

Open Preview

                <footer class="bg-blue-900 text-blue-100 py-8 dark:bg-gray-950 dark:text-gray-300">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 gap-8 border-b border-blue-700 pb-8 dark:border-gray-800">
      <div class="col-span-full lg:col-span-1">
        <h3 class="text-2xl font-bold text-orange-400 mb-4 dark:text-orange-500">FinTechBank</h3>
        <p class="text-sm text-blue-200 dark:text-gray-400 leading-relaxed">Innovating your financial future with secure and intelligent banking solutions.</p>
      </div>

      <div>
        <h4 class="text-lg font-semibold mb-4 text-white dark:text-gray-100">Company</h4>
        <ul class="space-y-3">
          <li><a href="#" class="text-blue-200 hover:text-orange-400 transition-colors duration-300 dark:text-gray-400 dark:hover:text-orange-500 text-sm">About Us</a></li>
          <li><a href="#" class="text-blue-200 hover:text-orange-400 transition-colors duration-300 dark:text-gray-400 dark:hover:text-orange-500 text-sm">Careers</a></li>
          <li><a href="#" class="text-blue-200 hover:text-orange-400 transition-colors duration-300 dark:text-gray-400 dark:hover:text-orange-500 text-sm">Press & Media</a></li>
          <li><a href="#" class="text-blue-200 hover:text-orange-400 transition-colors duration-300 dark:text-gray-400 dark:hover:text-orange-500 text-sm">Partner Program</a></li>
        </ul>
      </div>

      <div>
        <h4 class="text-lg font-semibold mb-4 text-white dark:text-gray-100">Products</h4>
        <ul class="space-y-3">
          <li><a href="#" class="text-blue-200 hover:text-orange-400 transition-colors duration-300 dark:text-gray-400 dark:hover:text-orange-500 text-sm">Personal Banking</a></li>
          <li><a href="#" class="text-blue-200 hover:text-orange-400 transition-colors duration-300 dark:text-gray-400 dark:hover:text-orange-500 text-sm">Business Accounts</a></li>
          <li><a href="#" class="text-blue-200 hover:text-orange-400 transition-colors duration-300 dark:text-gray-400 dark:hover:text-orange-500 text-sm">Lending Solutions</a></li>
          <li><a href="#" class="text-blue-200 hover:text-orange-400 transition-colors duration-300 dark:text-gray-400 dark:hover:text-orange-500 text-sm">Investment Services</a></li>
        </ul>
      </div>

      <div>
        <h4 class="text-lg font-semibold mb-4 text-white dark:text-gray-100">Support</h4>
        <ul class="space-y-3">
          <li><a href="#" class="text-blue-200 hover:text-orange-400 transition-colors duration-300 dark:text-gray-400 dark:hover:text-orange-500 text-sm">Help Center</a></li>
          <li><a href="#" class="text-blue-200 hover:text-orange-400 transition-colors duration-300 dark:text-gray-400 dark:hover:text-orange-500 text-sm">Contact Us</a></li>
          <li><a href="#" class="text-blue-200 hover:text-orange-400 transition-colors duration-300 dark:text-gray-400 dark:hover:text-orange-500 text-sm">FAQs</a></li>
          <li><a href="#" class="text-blue-200 hover:text-orange-400 transition-colors duration-300 dark:text-gray-400 dark:hover:text-orange-500 text-sm">Security</a></li>
        </ul>
      </div>

      <div>
        <h4 class="text-lg font-semibold mb-4 text-white dark:text-gray-100">Legal</h4>
        <ul class="space-y-3">
          <li><a href="#" class="text-blue-200 hover:text-orange-400 transition-colors duration-300 dark:text-gray-400 dark:hover:text-orange-500 text-sm">Privacy Policy</a></li>
          <li><a href="#" class="text-blue-200 hover:text-orange-400 transition-colors duration-300 dark:text-gray-400 dark:hover:text-orange-500 text-sm">Terms of Service</a></li>
          <li><a href="#" class="text-blue-200 hover:text-orange-400 transition-colors duration-300 dark:text-gray-400 dark:hover:text-orange-500 text-sm">Cookie Policy</a></li>
          <li><a href="#" class="text-blue-200 hover:text-orange-400 transition-colors duration-300 dark:text-gray-400 dark:hover:text-orange-500 text-sm">Disclosures</a></li>
        </ul>
      </div>
    </div>

    <div class="flex flex-col sm:flex-row items-center justify-between pt-6 text-sm">
      <p class="mb-4 sm:mb-0 text-blue-300 dark:text-gray-500 text-center sm:text-left">© 2023 FinTechBank. All rights reserved.</p>
      <div class="flex space-x-6">
        <a href="#" aria-label="Facebook" class="text-blue-300 hover:text-orange-400 transition-colors duration-300 dark:text-gray-500 dark:hover:text-orange-500">
          <svg class="h-6 w-6 fill-current" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2C6.477 2 2 6.477 2 12c0 5.016 3.655 9.182 8.375 9.94v-7.042H7.078v-2.9h1.921V9.58c0-1.906 1.164-2.955 2.868-2.955 1.096 0 2.036.196 2.308.283v2.55h-1.55c-.752 0-.901.358-.901.884v1.168h2.89l-.47 2.9h-2.42V22c5.016-.818 8.875-5.024 8.875-9.94 0-5.523-4.477-10-10-10z"/></svg>
        </a>
        <a href="#" aria-label="Twitter" class="text-blue-300 hover:text-orange-400 transition-colors duration-300 dark:text-gray-500 dark:hover:text-orange-500">
          <svg class="h-6 w-6 fill-current" viewBox="0 0 24 24" aria-hidden="true"><path d="M22.46 6c-.77.35-1.6.58-2.46.69.88-.53 1.56-1.37 1.88-2.37-.8.47-1.68.8-2.6.98C17.26 4.24 16.21 4 15.15 4c-2.36 0-4.29 1.93-4.29 4.29 0 .34.04.67.11.98C7.54 9.17 4.14 7.37 1.81 4.5c-.37.64-.58 1.39-.58 2.19 0 1.49.75 2.81 1.89 3.59-.7-.02-1.37-.21-1.95-.5v.06c0 2.09 1.48 3.82 3.44 4.21-.36.1-.73.15-1.11.15-.27 0-.53-.02-.79-.08.55 1.71 2.13 2.96 4.01 2.99-1.47 1.15-3.33 1.84-5.36 1.84-.35 0-.69-.02-1.03-.06 1.9 1.22 4.16 1.93 6.6 1.93 7.92 0 12.26-6.55 12.26-12.26 0-.19-.01-.39-.01-.58.84-.6 1.56-1.36 2.14-2.22z"/></svg>
        </a>
        <a href="#" aria-label="LinkedIn" class="text-blue-300 hover:text-orange-400 transition-colors duration-300 dark:text-gray-500 dark:hover:text-orange-500">
          <svg class="h-6 w-6 fill-current" viewBox="0 0 24 24" aria-hidden="true"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.273V9.09h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.073a2.464 2.464 0 0 1-2.464-2.464c0-1.363 1.09-2.464 2.464-2.464 1.373 0 2.464 1.1 2.464 2.464 0 1.363-1.091 2.464-2.464 2.464zm1.785 13.38H3.551V9.09h3.571v11.363zM12 2C6.478 2 2 6.478 2 12s4.478 10 10 10 10-4.478 10-10S17.522 2 12 2z"/></svg>
        </a>
        <a href="#" aria-label="Instagram" class="text-blue-300 hover:text-orange-400 transition-colors duration-300 dark:text-gray-500 dark:hover:text-orange-500">
          <svg class="h-6 w-6 fill-current" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.204-.012 3.584-.07 4.85-1.325 3.252-1.691 4.77-4.919 4.919-1.266.058-1.644.069-4.85.069s-3.583-.012-4.85-.07c-3.251-.149-4.77-1.691-4.919-4.919-.058-1.265-.069-1.644-.069-4.85 0-3.204.012-3.584.07-4.85 1.326-3.252 1.69-4.771 4.919-4.919 1.265-.058 1.644-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072C2.79 0 2.039.264 1.22 1.083s-.82 1.57-.902 2.836c-.059 1.28-.073 1.688-.073 4.948 0 3.26.014 3.668.072 4.948.082 1.266.347 2.017 1.166 2.836S2.79 23.992 4.056 24c1.28.058 1.688.072 4.948.072s3.668-.014 4.948-.072c1.265-.082 2.017-.347 2.836-1.166s.82-1.57.902-2.836c.058-1.28.072-1.688.072-4.948s-.014-3.667-.072-4.947c-.082-1.266-.347-2.017-1.166-2.836S21.21 0 19.944 0c-1.28-.058-1.687-.072-4.947-.072H12zm0 6a6 6 0 1 0 0 12 6 6 0 0 0 0-12zm0 10a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm6.5-11.5a1.5 1.5 0 1 0-3 0 1.5 1.5 0 0 0 3 0z"/></svg>
        </a>
      </div>
    </div>
  </div>
</footer>

Corporate Booking Footer

A complex, responsive corporate footer component designed for booking/reservation systems, featuring warm neutrals and dark mode support, using semantic HTML and Tailwind CSS.

Open Preview

                <footer class="bg-stone-100 dark:bg-stone-900 text-stone-700 dark:text-stone-300 py-12 md:py-16">
  <div class="container mx-auto px-4 sm:px-6 lg:px-8">
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mb-12">
      <!-- Company Info / Logo -->
      <div class="flex flex-col items-start">
        <a href="#" class="text-2xl font-bold text-stone-800 dark:text-stone-100 mb-4 tracking-tight">
          <span class="text-amber-600 dark:text-amber-400">Book</span>Corp
        </a>
        <p class="text-sm mb-4 leading-relaxed max-w-xs">Your trusted partner for seamless bookings and reservations. Excellence in every appointment.</p>
        <div class="flex space-x-4">
          <a href="#" class="text-stone-600 dark:text-stone-400 hover:text-amber-600 dark:hover:text-amber-400 transition-colors duration-200">
            <svg class="w-6 h-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.33V22C17.34 21.128 22 16.991 22 12z" clip-rule="evenodd" />
            </svg>
            <span class="sr-only">Facebook</span>
          </a>
          <a href="#" class="text-stone-600 dark:text-stone-400 hover:text-amber-600 dark:hover:text-amber-400 transition-colors duration-200">
            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              <path d="M8.29 20.251c-.03.01-.06-.02-.09-.036l-2.126-1.643-.092-.073-.016.035c-.443.916-1.077 1.636-1.897 2.164a7.994 7.994 0 01-.845.41c-.24.088-.476.162-.714.22h-.032c-.08-.009-.16-.017-.238-.024l-.168-.005a.75.75 0 01-.132-.016 10.022 10.022 0 01-1.74-1.218c-.894-.78-1.558-1.765-1.92-2.883-.178-.54-.287-1.11-.32-1.696-.016-.277-.023-.556-.023-.836 0-3.328 2.672-6 6-6h2v-2h-3C6.672 5 4 7.672 4 10.999c0 .28.007.559.023.836.033.586.142 1.156.32 1.696.363 1.117 1.027 2.102 1.92 2.883 1.01 1.008 2.247 1.624 3.6 1.838.08.012.16.026.24.037.03.004.06.006.09.006v.05zM22 12c0-3.328-2.672-6-6-6h-2v2h3c2.203 0 4 1.797 4 4 0 .28-.007.559-.023.836-.033.586-.142 1.156-.32 1.696-.363 1.117-1.027 2.102-1.92 2.883-1.01 1.008-2.247 1.624-3.6 1.838-.08.012-.16.026-.24.037-.03.004-.06.006-.09.006v.05z" fill="currentColor" />
              <path d="M12 9a3 3 0 100 6 3 3 0 000-6z" fill="currentColor" />
              <path d="M12 11a1 1 110-2 1 1 0 000 2z" fill="currentColor" />
              <circle cx="12" cy="12" r="3" opacity="0" />
            </svg>
            <span class="sr-only">Instagram</span>
          </a>
          <a href="#" class="text-stone-600 dark:text-stone-400 hover:text-amber-600 dark:hover:text-amber-400 transition-colors duration-200">
            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              <path d="M.057 1.7L.023 1.644l.01-.01c.148-.12.296-.24.444-.36l.01-.008L.5.5C.42-.5.5-.5.42-.5.42-.5.25.5-.5.5c-.75 0 1.25-.5 1.25-.5.2-.2.2-.2-.2-.2C1.72.1-.22-.2-.22-.2.02-.2-.22-.2.2-.2Z" fill="none"/>
              <path d="M19.5 0h-15C2.239 0 0 2.239 0 4.999v14.002C0 21.761 2.239 24 4.5 24h15c2.761 0 5-2.239 5-4.999V4.999C24 2.239 21.761 0 19.5 0zm-4.053 2.164c.731.066 1.34.195 1.776.326.438.132.898.396 1.35.792.45.396.792.898 1.032 1.488.24.59.396 1.296.486 2.088.09.792.108 1.692.054 2.652-.054.96-.216 1.956-.486 2.94-.27.984-.666 1.836-1.188 2.556-.522.72-1.188 1.278-1.998 1.68-.81.402-1.692.684-2.61.846-1.22.216-2.592.29-4.104.22-.648-.027-1.314-.09-2.022-.189-.708-.099-1.395-.234-2.034-.396-.639-.162-1.224-.396-1.728-.693-.504-.297-.936-.666-1.296-1.107-.36-.441-.6-1-.72-1.68-.12-.68-.198-1.476-.234-2.388-.036-.912-.009-1.872.081-2.88.09-.96.252-1.896.486-2.796.234-.9.567-1.71.999-2.43.432-.72 1.008-1.278 1.728-1.68.72-.402 1.548-.684 2.484-.846 1.08-.18 2.304-.252 3.672-.216.702.018 1.413.081 2.115.195.702.114 1.377.261 2.016.486zm-.05-.008z" fill="currentColor"/>
            </svg>
            <span class="sr-only">LinkedIn</span>
          </a>
        </div>
      </div>

      <!-- Quick Links -->
      <div>
        <h3 class="text-lg font-semibold text-stone-800 dark:text-stone-100 mb-4">Quick Links</h3>
        <nav class="flex flex-col space-y-3">
          <a href="#" class="text-sm hover:text-amber-600 dark:hover:text-amber-400 transition-colors duration-200">About Us</a>
          <a href="#" class="text-sm hover:text-amber-600 dark:hover:text-amber-400 transition-colors duration-200">Services</a>
          <a href="#" class="text-sm hover:text-amber-600 dark:hover:text-amber-400 transition-colors duration-200">Pricing</a>
          <a href="#" class="text-sm hover:text-amber-600 dark:hover:text-amber-400 transition-colors duration-200">FAQ</a>
          <a href="#" class="text-sm hover:text-amber-600 dark:hover:text-amber-400 transition-colors duration-200">Blog</a>
        </nav>
      </div>

      <!-- Resources -->
      <div>
        <h3 class="text-lg font-semibold text-stone-800 dark:text-stone-100 mb-4">Resources</h3>
        <nav class="flex flex-col space-y-3">
          <a href="#" class="text-sm hover:text-amber-600 dark:hover:text-amber-400 transition-colors duration-200">Support Center</a>
          <a href="#" class="text-sm hover:text-amber-600 dark:hover:text-amber-400 transition-colors duration-200">Developer API</a>
          <a href="#" class="text-sm hover:text-amber-600 dark:hover:text-amber-400 transition-colors duration-200">Terms of Service</a>
          <a href="#" class="text-sm hover:text-amber-600 dark:hover:text-amber-400 transition-colors duration-200">Privacy Policy</a>
          <a href="#" class="text-sm hover:text-amber-600 dark:hover:text-amber-400 transition-colors duration-200">Cookie Policy</a>
        </nav>
      </div>

      <!-- Contact Info / Newsletter -->
      <div>
        <h3 class="text-lg font-semibold text-stone-800 dark:text-stone-100 mb-4">Get in Touch</h3>
        <address class="not-italic text-sm space-y-2 mb-6">
          <p>123 Booking Ave, Suite 400</p>
          <p>Business City, BC 90210</p>
          <p class="mt-2"><a href="tel:+1234567890" class="hover:text-amber-600 dark:hover:text-amber-400 transition-colors duration-200">+1 (234) 567-890</a></p>
          <p><a href="mailto:[email protected]" class="hover:text-amber-600 dark:hover:text-amber-400 transition-colors duration-200">[email protected]</a></p>
        </address>
        <h3 class="text-lg font-semibold text-stone-800 dark:text-stone-100 mb-4">Newsletter</h3>
        <form class="flex flex-col sm:flex-row gap-2">
          <label for="email-address" class="sr-only">Email address</label>
          <input id="email-address" name="email" type="email" autocomplete="email" required
            class="w-full flex-auto rounded-md border border-stone-300 dark:border-stone-700 bg-white/50 dark:bg-stone-800 px-3.5 py-2 text-stone-800 dark:text-stone-200 shadow-sm placeholder:text-stone-400 dark:placeholder:text-stone-500 focus:ring-2 focus:ring-inset focus:ring-amber-500 dark:focus:ring-amber-400 sm:text-sm sm:leading-6"
            placeholder="Enter your email">
          <button type="submit"
            class="flex-none rounded-md bg-amber-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-amber-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-amber-600 dark:bg-amber-500 dark:hover:bg-amber-400 dark:focus-visible:outline-amber-500">
            Subscribe
          </button>
        </form>
      </div>
    </div>

    <div class="border-t border-stone-300 dark:border-stone-700 pt-8 mt-8 text-center text-sm">
      <p>&copy; <span id="current-year"></span> BookCorp. All rights reserved.</p>
    </div>
  </div>
  <script>
    document.getElementById('current-year').textContent = new Date().getFullYear();
  </script>
</footer>

Footer Component

Simple, clean, and trustworthy footer component suitable for corporate/professional booking and reservation systems, featuring a subtle rainbow gradient border and full responsiveness with dark mode support.

Open Preview

                <footer class="bg-gradient-to-r from-gray-50 via-white to-gray-50 dark:from-gray-900 dark:via-gray-950 dark:to-gray-900 transition-colors duration-300 border-t-4 border-l-4 border-r-4 border-b-4 border-image-slice-1 border-image-source-rainbow py-8 sm:py-12 lg:py-16 mt-8 sm:mt-12 lg:mt-16">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="flex flex-col md:flex-row justify-between items-center md:items-start text-center md:text-left gap-8">
      
      <!-- Company Info / Logo -->
      <div class="flex-shrink-0">
        <a href="#" class="inline-flex items-center justify-center font-bold text-2xl tracking-tight text-gray-900 dark:text-white group">
          <svg class="h-8 w-8 mr-2 text-indigo-600 dark:text-indigo-400 group-hover:animate-bounce" 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="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M6.343 17.657l-.707.707M18.907 9.207L12 2m0 20c-3.737 0-6.86-2.585-7.747-6L2 12l2.253-4.747C5.14 3.585 8.263 1 12 1s6.86 2.585 7.747 6L22 12l-2.253 4.747C18.86 19.415 15.737 22 12 22zM12 19a7 7 0 100-14 7 7 0 000 14z"></path>
          </svg>
          <span class="bg-clip-text text-transparent bg-gradient-to-r from-purple-600 via-indigo-600 to-blue-600 dark:from-purple-400 dark:via-indigo-400 dark:to-blue-400">BookFlow</span>
        </a>
        <p class="mt-3 text-sm text-gray-600 dark:text-gray-400 leading-relaxed max-w-xs">
          Your seamless journey from selection to confirmation. Book your next experience today.
        </p>
      </div>

      <!-- Navigation Links -->
      <div class="flex-grow grid grid-cols-2 md:grid-cols-3 gap-8 justify-items-center md:justify-items-start max-w-xl">
        <div>
          <h3 class="text-sm font-semibold text-gray-800 dark:text-white uppercase tracking-wider mb-3">
            Company
          </h3>
          <ul class="space-y-2">
            <li><a href="#" class="text-base text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors duration-200">About Us</a></li>
            <li><a href="#" class="text-base text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors duration-200">Services</a></li>
            <li><a href="#" class="text-base text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors duration-200">Careers</a></li>
          </ul>
        </div>
        <div>
          <h3 class="text-sm font-semibold text-gray-800 dark:text-white uppercase tracking-wider mb-3">
            Support
          </h3>
          <ul class="space-y-2">
            <li><a href="#" class="text-base text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors duration-200">Help Center</a></li>
            <li><a href="#" class="text-base text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors duration-200">Contact Us</a></li>
            <li><a href="#" class="text-base text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors duration-200">FAQ</a></li>
          </ul>
        </div>
        <div class="col-span-2 md:col-span-1">
          <h3 class="text-sm font-semibold text-gray-800 dark:text-white uppercase tracking-wider mb-3">
            Legal
          </h3>
          <ul class="space-y-2">
            <li><a href="#" class="text-base text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors duration-200">Privacy Policy</a></li>
            <li><a href="#" class="text-base text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors duration-200">Terms of Service</a></li>
          </ul>
        </div>
      </div>

    </div>

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

<style>
  /* This is an example of applying the gradient rainbow border using custom CSS for demonstration.
     In a real Tailwind project, you might use a similar approach or a utility plugin for more complex gradients.
     For a simple rainbow, a linear-gradient for border-image-source is effective. */
  .border-image-source-rainbow {
    border-image-source: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
  }
</style>

Footer Component - Swiss Pastel Consulting

A clean, minimalist, and responsive footer component with a Swiss design influence, featuring pastel colors and clear typography, suitable for consulting/services websites. Includes dark mode support.

Open Preview

                <footer class="bg-violet-50 text-violet-800 dark:bg-gray-800 dark:text-gray-200 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 gap-8 informational-footer">
    <!-- About Section -->
    <div class="col-span-1 md:col-span-2 lg:col-span-1">
      <h3 class="text-lg font-semibold mb-4 text-violet-700 dark:text-violet-300">About Us</h3>
      <p class="text-sm leading-relaxed mb-4">Providing expert consulting services to help your business thrive. Our approach is rooted in precision, clarity, and measurable results.</p>
      <div class="flex space-x-4">
        <a href="#" class="text-violet-600 hover:text-violet-800 dark:text-violet-400 dark:hover:text-violet-200 transition-colors duration-200">
          <svg class="w-5 h-5" 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.33v6.988C18.343 21.128 22 16.991 22 12z" clip-rule="evenodd" />
          </svg>
        </a>
        <a href="#" class="text-violet-600 hover:text-violet-800 dark:text-violet-400 dark:hover:text-violet-200 transition-colors duration-200">
          <svg class="w-5 h-5" 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 1.05.056 1.62.231 2.062.409.54.225.9-.475 1.706-1.129 1.16-.677 2.1-1.42 2.574-2.834.786-.289.479-.933.864-1.178.683-.437 1.26-.931 1.785-1.465.526-.534.981-1.077 1.341-1.58.36-.502 1.4-1.745 1.4-1.745s-.192-.613-.192-1.242V8.91c0-2.427-4.997-2.738-4.997-2.738v0h12.518V9.1h6.623V4.492c0-.527-.427-.954-.954-.954H2c-.527 0-.954.427-.954.954V19.508c0,.527.427.954.954.954h20c.527 0 .954-.427.954-.954h.001ZM12 4.41c-4.148 0-7.51 3.362-7.51 7.51s3.362 7.51 7.51 7.51 7.51-3.362 7.51-7.51-3.362-7.51-7.51-7.51Zm0 12.235c-2.612 0-4.725-2.113-4.725-4.725S9.388 7.185 12 7.185s4.725 2.113 4.725 4.725-2.113 4.725-4.725 4.725Z" clip-rule="evenodd" />
          </svg>
        </a>
        <a href="#" class="text-violet-600 hover:text-violet-800 dark:text-violet-400 dark:hover:text-violet-200 transition-colors duration-200">
          <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path d="M8.29 20.89c-.58 0-1.05-.47-1.05-1.05v-5.69c0-.58.47-1.05 1.05-1.05h1.2v1.5H8.29v4.19h8.22v-4.19h-1.2v-1.5h1.2c.58 0 1.05.47 1.05 1.05v5.69c0 .58-.47 1.05-1.05 1.05H8.29zM12 2c-5.52 0-10 4.48-10 10s4.48 10 10 10 10-4.48 10-10-4.48-10-10-10zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-4.75-9.21H8c.28-.48.65-.92 1.08-1.3l-1.33-1.33c-.45.45-.85.95-1.2 1.48zm-1.89-1.89h1.77L12 4.14 17.58 9.5h1.77L12 2zM12 10.5c-1.38 0-2.5 1.12-2.5 2.5s1.12 2.5 2.5 2.5 2.5-1.12 2.5-2.5-1.12-2.5-2.5-2.5zm0 3.5c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1z"/>
          </svg>
        </a>
      </div>
    </div>

    <!-- Services Section -->
    <div>
      <h3 class="text-lg font-semibold mb-4 text-violet-700 dark:text-violet-300">Our Services</h3>
      <ul class="space-y-2 text-sm">
        <li><a href="#" class="hover:text-violet-600 dark:hover:text-violet-400 transition-colors duration-200">Strategy Consulting</a></li>
        <li><a href="#" class="hover:text-violet-600 dark:hover:text-violet-400 transition-colors duration-200">Operations Consulting</a></li>
        <li><a href="#" class="hover:text-violet-600 dark:hover:text-violet-400 transition-colors duration-200">Technology Consulting</a></li>
        <li><a href="#" class="hover:text-violet-600 dark:hover:text-violet-400 transition-colors duration-200">Financial Advisory</a></li>
        <li><a href="#" class="hover:text-violet-600 dark:hover:text-violet-400 transition-colors duration-200">Market Research</a></li>
      </ul>
    </div>

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

    <!-- Contact Info Section -->
    <div>
      <h3 class="text-lg font-semibold mb-4 text-violet-700 dark:text-violet-300">Contact Us</h3>
      <div class="space-y-2 text-sm">
        <p>123 Consulting Rd<br>Suite 100, Business City<br>BC 12345, Country</p>
        <p><a href="tel:+1234567890" class="hover:text-violet-600 dark:hover:text-violet-400 transition-colors duration-200">+1 (234) 567-890</a></p>
        <p><a href="mailto:[email protected]" class="hover:text-violet-600 dark:hover:text-violet-400 transition-colors duration-200">[email protected]</a></p>
        <p>
          <img src="https://picsum.photos/id/1084/100/60" alt="Office map placeholder" class="w-full max-w-xs h-auto rounded-md shadow-sm mt-4 object-cover">
        </p>
      </div>
    </div>
  </div>

  <div class="border-t border-violet-200 dark:border-gray-700 mt-12 pt-8 text-center text-sm">
    <p>&copy; <time datetime="2023">2023</time> Consulting Firm. All rights reserved.</p>
  </div>
</footer>

Corporate_Industrial_Footer_Ocean_Blue

A responsive, corporate and industrial-themed footer component with ocean/blue color scheme, designed for manufacturing companies. Includes navigation links, contact info, social media, and copyright, with full dark mode support.

Open Preview

                <footer class="bg-sky-700 text-white dark:bg-gray-950 py-12">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="grid grid-cols-1 md:grid-cols-4 gap-8 md:gap-12">

      <!-- Company Info / Logo -->
      <div class="col-span-1 md:col-span-1">
        <h3 class="text-2xl font-bold mb-4 text-sky-100 dark:text-sky-400">AeroFab Inc.</h3>
        <p class="text-sky-100 dark:text-gray-400 text-sm leading-relaxed mb-4">
          Leading the future of industrial manufacturing through innovation and precision engineering.
        </p>
        <p class="text-sky-100 dark:text-gray-400 text-sm">
          Building tomorrow's industries, today.
        </p>
      </div>

      <!-- Quick Links -->
      <div class="col-span-1">
        <h4 class="text-lg font-semibold mb-4 text-sky-100 dark:text-sky-400">Quick Links</h4>
        <ul class="space-y-3">
          <li><a href="#" class="text-sky-100 hover:text-sky-300 dark:text-gray-400 dark:hover:text-sky-300 transition duration-300 text-sm">Our Solutions</a></li>
          <li><a href="#" class="text-sky-100 hover:text-sky-300 dark:text-gray-400 dark:hover:text-sky-300 transition duration-300 text-sm">Industries Served</a></li>
          <li><a href="#" class="text-sky-100 hover:text-sky-300 dark:text-gray-400 dark:hover:text-sky-300 transition duration-300 text-sm">Case Studies</a></li>
          <li><a href="#" class="text-sky-100 hover:text-sky-300 dark:text-gray-400 dark:hover:text-sky-300 transition duration-300 text-sm">Careers</a></li>
          <li><a href="#" class="text-sky-100 hover:text-sky-300 dark:text-gray-400 dark:hover:text-sky-300 transition duration-300 text-sm">Blog & News</a></li>
        </ul>
      </div>

      <!-- Contact Info -->
      <div class="col-span-1">
        <h4 class="text-lg font-semibold mb-4 text-sky-100 dark:text-sky-400">Contact Us</h4>
        <div class="space-y-3 text-sky-100 dark:text-gray-400 text-sm">
          <p>
            123 Industrial Way<br>
            Tech City, TX 75001<br>
            USA
          </p>
          <p>
            Email: <a href="mailto:[email protected]" class="hover:text-sky-300 transition duration-300">[email protected]</a>
          </p>
          <p>
            Phone: <a href="tel:+1234567890" class="hover:text-sky-300 transition duration-300">+1 (234) 567-890</a>
          </p>
          <p>
            Fax: +1 (234) 567-891
          </p>
        </div>
      </div>

      <!-- Newsletter & Social Media -->
      <div class="col-span-1">
        <h4 class="text-lg font-semibold mb-4 text-sky-100 dark:text-sky-400">Stay Connected</h4>
        <p class="text-sky-100 dark:text-gray-400 text-sm mb-4">Subscribe to our newsletter for the latest updates.</p>
        <form class="flex flex-col sm:flex-row gap-2 mb-6">
          <input type="email" placeholder="Your email address" class="flex-grow px-4 py-2 rounded-md bg-sky-800 border border-sky-600 text-white placeholder-sky-200 focus:outline-none focus:ring-2 focus:ring-sky-300 dark:bg-gray-800 dark:border-gray-700 dark:placeholder-gray-500 dark:text-gray-200 dark:focus:ring-sky-500 text-sm">
          <button type="submit" class="bg-sky-500 hover:bg-sky-600 text-white px-5 py-2 rounded-md font-semibold transition duration-300 dark:bg-sky-600 dark:hover:bg-sky-700 text-sm">
            Subscribe
          </button>
        </form>
        <div class="flex space-x-4">
          <a href="#" aria-label="Facebook" class="text-sky-100 hover:text-sky-300 dark:text-gray-400 dark:hover:text-sky-300 transition duration-300">
            <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.33V22C17.34 21.128 22 16.991 22 12z" clip-rule="evenodd" />
            </svg>
          </a>
          <a href="#" aria-label="Twitter" class="text-sky-100 hover:text-sky-300 dark:text-gray-400 dark:hover:text-sky-300 transition duration-300">
            <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              <path d="M8.29 20.251c-2.096.166-4.103-.687-5.556-2.18l-.51-.595s4.9-1.928 8-1.57c2.97.337 5.166-.821 5.927-2.36l1.378-2.757-.101-.01c-1.391-.144-2.738-2.09-.766-3.82L20.5 4.3 22 4.3c-.015 2.92-1.306 5.239-3.414 7.02l-1.025.856s-.66-.45-1.527-1.1c-1.284-.967-2.285-2.274-2.868-3.79l.523-1.05s-2.001 1.776-3.078 2.057l-1.12.28s-1.89-1.1-2.903-2.58l.191-.19s-2.92 5.09-2.92 5.09c.677.29 1.579-.9 2.042-1.3l.086.08s-.486 1.13.013 1.96c.49-.69.96-.92 1.341-1.09l.343-2.09s.893.3 1.258.46c.928-.27 1.597-.73 2.158-1.48l-.05.02c.005.006.012.012.019.019.566-.75.766-1.56 1-2.25l-.2-.14s-.2-.16-.3-.3l.04.14s-.5.06-1.05.2c-.44.2-.84.4-1.21.6-.33.1-.6.1-.7.1s-.4-.1-.7-.1c-1.87-1.34-3.1-3.69-3.7-6.22l-1.4 0H4s-.2 1.5.8 2.6c1.65 1.8 1.95 3.5 2.15 4.07l.08.19s-.01.07-.01.12l-.02.04s-.06.27-.06.49c-.06.2-.2.4-.2.4ZM3.109 20.211l-.813-.812c-.524-.523-.972-1.246-1.347-2.09-.38-.85-.689-1.802-.934-2.859-.245-1.057-.42-2.195-.526-3.399-.105-1.204-.158-2.457-.158-3.753 0-1.295.052-2.548.158-3.752.106-1.205.277-2.343.523-3.399.245-1.057.59-2.009 1.05-2.859.458-.85.992-1.574 1.599-2.164.607-.59 1.306-1.042 2.098-1.353.791-.31 1.666-.465 2.624-.465 0 0 1.296-.062 2.618.318 1.488-.309 3.01-.132 4.416.533C19.141 3.32 20.35 4.71 21.08 6.45c.731 1.74 1.1 3.55 1.1 5.43s-.369 3.69-1.1 5.43c-.73 1.74-1.94 3.13-3.46 4.102-1.52.973-3.19 1.459-5.01 1.459-.958 0-1.833-.156-2.624-.465-.792-.31-1.492-.763-2.098-1.353-.607-.59-1.141-1.314-1.599-2.164-.464-.85-.81-1.802-1.055-2.859-.245-1.056-.42-2.194-.526-3.399-.105-1.204-.158-2.457-.158-3.752 0-1.295.052-2.548.158-3.752.106-1.205.277-2.343.523-3.399.245-1.057.59-2.009 1.05-2.859.458-.85.992-1.574 1.599-2.164.607-.59 1.306-1.042 2.098-1.353.791-.31 1.666-.465 2.624-.465 0 0 1.296-.062 2.618.318 1.488-.309 3.01-.132 4.416.533C19.141 3.32 20.35 4.71 21.08 6.45c.731 1.74 1.1 3.55 1.1 5.43s-.369 3.69-1.1 5.43c-.73 1.74-1.94 3.13-3.46 4.102-1.52.973-3.19 1.459-5.01 1.459-.958 0-1.833-.156-2.624-.465-.792-.31-1.492-.763-2.098-1.353-.607-.59-1.141-1.314-1.599-2.164-.464-.85-.81-1.802-1.055-2.859-.245-1.056-.42-2.194-.526-3.399-.105-1.204-.158-2.457-.158-3.752 0-1.295.052-2.548.158-3.752.106-1.205.277-2.343.523-3.399.245-1.057-.015-.018-.031-.035-.047-.05ZM5.2 7A1 1 0 014 7.2L3 13.9C2.7 15.6 3.6 17 5 17s2.3-1.4 2.3-3.1L7 7.2A117 117 0 005.2 7zM18.8 7a1 1 0 00-1.2.2L17 13.9c.3 1.7 1.2 3.1 2.6 3.1s2.3-1.4 2.3-3.1L21 7.2A117 117 0 0118.8 7z" />
            </svg>
          </a>
          <a href="#" aria-label="LinkedIn" class="text-sky-100 hover:text-sky-300 dark:text-gray-400 dark:hover:text-sky-300 transition duration-300">
            <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              <path fill-rule="evenodd" d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z" clip-rule="evenodd" />
            </svg>
          </a>
          <a href="#" aria-label="YouTube" class="text-sky-100 hover:text-sky-300 dark:text-gray-400 dark:hover:text-sky-300 transition duration-300">
            <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              <path fill-rule="evenodd" d="M19.8 4.3c.09-1.07.72-1.93 1.7-2.3C21.8 1.9 23 2.1 24 2.6l-1 2.4c-.09.3-.12.6-.09 1c.09 1.07.72 1.93 1.7 2.3C23.6 8.5 24 7.6 24 6.8c0-.6-.3-.9-1-1.3-.8-.3-1.6-.2-2.3 0-.7.3-1.2.9-1.4 1.7-.2.7-.2 1.5-.1 2.3.1.8.4 1.5.8 2.2l.4.7c.09.2-.03.5-.2.6l-2.4 1c-.3.09-.6.12-1 .09-1.07-.09-1.93-.72-2.3-1.7-.4-1-.1-2.1.2-3.1.2-.8.5-1.5.8-2.2l.4-.7c.09-.2.03-.5-.2-.6l-2.4-1.1c-.3-.09-.6-.12-1-.09-1.07.09-1.93.72-2.3 1.7-.4 1-.1 2.1.2 3.1.2.8.5 1.5.8 2.2l.4.7c.09.2-.03.5-.2.6l-2.4 1c-.3.09-.6.12-1 .09-1.07-.09-1.93-.72-2.3-1.7-.4-1-.1-2.1.2-3.1.2-.8.5-1.5.8-2.2l.4-.7c.09-.2.03-.5-.2-.6l-2.4-1.1c-.3-.09-.6-.12-1-.09-1.07.09-1.93.72-2.3 1.7-.4 1-.1 2.1.2 3.1.2.8.5 1.5.8 2.2l.4.7c.09.2-.03.5-.2.6l-2.4 1c-.3.09-.6.12-1 .09-1.07-.09-1.93-.72-2.3-1.7-.4-1-.1-2.1.2-3.1.2-.8.5-1.5.8-2.2l.4-.7c.09-.2.03-.5-.2-.6L0 7.2c-.3-.09-.6-.12-1-.09-1.07.09-1.93.72-2.3 1.7-.4.9-.1 2 .2 3 .2.8.5 1.5.8 2.2l.4.7c.09.2-.03.5-.2.6l-2.4 1.1c-.3.09-.6.12-1 .09-1.07-.09-1.93-.72-2.3-1.7-.4-1-.1-2.1.2-3.1.2-.8.5-1.5.8-2.2l.4-.7c.09-.2.03-.5-.2-.6L0 7.2c-.3-.09-.6-.12-1-.09-1.07.09-1.93.72-2.3 1.7-.4.9-.1 2 .2 3 .2.8.5 1.5.8 2.2l.4.7c.09.2-.03.5-.2.6l-2.4 1.1c-.3.09-.6.12-1 .09-1.07-.09-1.93-.72-2.3 1.7-.4.9-.1 2 .2 3 .2.8.5 1.5.8 2.2l.4.7c.09.2-.03.5-.2.6L0 7.2c-.3-.09-.6-.12-1-.09-1.07.09-1.93.72-2.3 1.7-.4.9-.1 2 .2 3 .2.8.5 1.5.8 2.2l.4.7c.09.2-.03.5-.2.6L0 7.2c-.3-.09-.6-.12-1-.09-1.07.09-1.93.72-2.3 1.7-.4.9-.1 2 .2 3 .2.8.5 1.5.8 2.2l.4.7c.09.2-.03.5-.2.6L0 7.2c-.3-.09-.6-.12-1-.09-1.07.09-1.93.72-2.3 1.7-.4.9-.1 2 .2 3 .2.8.5 1.5.8 2.2l.4.7c.09.2-.03.5-.2.6L0 7.2c-.3-.09-.6-.12-1-.09-1.07.09-1.93.72-2.3 1.7-.4.9-.1 2 .2 3 .2.8.5 1.5.8 2.2l.4.7c.09.2-.03.5-.2.6L0 7.2c-.3-.09-.6-.12-1-.09-1.07.09-1.93.72-2.3 1.7-.4.9-.1 2 .2 3 .2.8.5 1.5.8 2.2l.4.7c.09.2-.03.5-.2.6L0 7.2c-.3-.09-.6-.12-1-.09-1.07.09-1.93.72-2.3 1.7-.4.9-.1 2 .2 3 .2.8.5 1.5.8 2.2l.4.7c.09.2-.03.5-.2.6L0 7.2c-.3-.09-.6-.12-1-.09-1.07.09-1.93.72-2.3 1.7-.4.9-.1 2 .2 3 .2.8.5 1.5.8 2.2l.4.7c.09.2-.03.5-.2.6L0 7.2c-.3-.09-.6-.12-1-.09-1.07.09-1.93.72-2.3 1.7-.4.9-.1 2 .2 3 .2.8.5 1.5.8 2.2l.4.7c.09.2-.03.5-.2.6L0 7.2c-.3-.09-.6-.12-1-.09-1.07.09-1.93.72-2.3 1.7-.4.9-.1 2 .2 3 .2.8.5 1.5.8 2.2l.4.7c.09.2-.03.5-.2.6L0 7.2c-.3-.09-.6-.12-1-.09-1.07.09-1.93.72-2.3 1.7-.4.9-.1 2 .2 3 .2.8.5 1.5.8 2.2l.4.7c.09.2-.03.5-.2.6L0 7.2c-.3-.09-.6-.12-1-.09-1.07.09-1.93.72-2.3 1.7-.4.9-.1 2 .2 3 .2.8.5 1.5.8 2.2l.4.7c.09.2-.03.5-.2.6L0 7.2c-.3-.09-.6-.12-1-.09-1.07.09-1.93.72-2.3 1.7c-.4.9-.1 2 .2 3 .2.8.5 1.5.8 2.2l.4.7c.09.2-.03.5-.2.6l-2.4 1.1c-.3-.09-.6-.12-1-.09-1.07.09-1.93.72-2.3 1.7-.4 1-.1 2.1.2 3.1.2.8.5 1.5.8 2.2l.4.7c.09.2-.03.5-.2.6l-2.4 1c-.3.09-.6.12-1 .09-1.07-.09-1.93-.72-2.3-1.7-.4-1-.1-2.1.2-3.1.2-.8.5-1.5.8-2.2l.4-.7c.09-.2.03-.5-.2-.6l-2.4-1.1c-.3-.09-.6-.12-1-.09-1.07.09-1.93.72-2.3 1.7-.4 1-.1 2.1.2 3.1.2.8.5 1.5.8 2.2l.4.7c.09.2-.03.5-.2.6L0 7.2c-.3-.09-.6-.12-1-.09-1.07.09-1.93.72-2.3 1.7-.4.9-.1 2 .2 3 .2.8.5 1.5.8 2.2l.4.7c.09.2-.03.5-.2.6l-2.4 1.1c-.3-.09-.6-.12-1-.09z" clip-rule="evenodd" />
            </svg>
          </a>
        </div>
      </div>
    </div>

    <!-- Divider -->
    <hr class="my-8 border-sky-600 dark:border-gray-700">

    <!-- Copyright / Bottom Text -->
    <div class="text-center text-sky-100 dark:text-gray-400 text-sm">
      &copy; 2023 AeroFab Inc. All rights reserved. | <a href="#" class="hover:text-sky-300 dark:hover:text-sky-300 transition duration-300">Privacy Policy</a> | <a href="#" class="hover:text-sky-300 dark:hover:text-sky-300 transition duration-300">Terms of Service</a>
    </div>
  </div>
</footer>

Luxury_Premium_Crypto_Footer

An elegant, responsive footer component for cryptocurrency/blockchain applications, featuring a limited number of links, copyright, and social media icons. Uses a corporate blue color scheme with dark mode support.

Open Preview

                <footer class="bg-gradient-to-r from-blue-900 to-blue-700 text-white py-12 dark:from-gray-950 dark:to-gray-800">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="flex flex-col md:flex-row items-center justify-between space-y-8 md:space-y-0">
      <!-- Logo / Brand Name -->
      <div class="flex-shrink-0">
        <a href="#" class="text-3xl font-bold tracking-tight text-white dark:text-blue-300 font-serif">
          Crypto<span class="text-blue-300 dark:text-blue-500">Ledger</span>
        </a>
      </div>

      <!-- Navigation Links -->
      <nav class="flex flex-wrap justify-center gap-x-8 gap-y-4 text-lg font-medium">
        <a href="#" class="hover:text-blue-200 transition-colors duration-300 dark:hover:text-blue-400">Home</a>
        <a href="#" class="hover:text-blue-200 transition-colors duration-300 dark:hover:text-blue-400">Products</a>
        <a href="#" class="hover:text-blue-200 transition-colors duration-300 dark:hover:text-blue-400">About Us</a>
        <a href="#" class="hover:text-blue-200 transition-colors duration-300 dark:hover:text-blue-400">Contact</a>
      </nav>

      <!-- Social Media Icons (simplified for a simple design) -->
      <div class="flex space-x-6">
        <a href="#" class="text-white hover:text-blue-200 transition-colors duration-300 dark:hover:text-blue-400">
          <svg class="h-6 w-6 fill-current" 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.388 21.125 22 16.592 22 12z" clip-rule="evenodd" />
          </svg>
        </a>
        <a href="#" class="text-white hover:text-blue-200 transition-colors duration-300 dark:hover:text-blue-400">
          <svg class="h-6 w-6 fill-current" viewBox="0 0 24 24" aria-hidden="true">
            <path d="M8.29 20.31c9 0 13.92-7.46 13.92-13.97 0-.21-.01-.42-.01-.63A10.02 10.02 0 0024 4.31a9.91 9.91 0 01-2.88.79 4.96 4.96 0 002.16-2.77 9.87 9.87 0 01-3.13 1.19A4.95 4.95 0 0012.06 6.3c-4.99 0-9.05 4.06-9.05 9.06 0 .71.07 1.4.21 2.06A14.07 14.07 0 001.3 6.94a4.95 4.95 0 001.54 6.57A4.9 4.9 0 011.83 12v.06a4.96 4.96 0 003.97 4.86 4.92 4.92 0 01-1.78.07 4.96 4.96 0 004.62 3.44c-3.79 2.98-8.54 4.54-13.79 4.54-1.12 0-2.22-.07-3.29-.18C3.06 22.13 7.82 20.31 8.29 20.31z"/>
          </svg>
        </a>
      </div>
    </div>

    <div class="mt-8 pt-8 border-t border-blue-600 dark:border-gray-700 text-center text-sm text-blue-100 dark:text-gray-400">
      &copy; 2023 CryptoLedger. All rights reserved.
    </div>
  </div>
</footer>

Memphis_Purple_Entertainment_Footer_Component

A simple footer component for entertainment/media platforms, featuring a Memphis Design style with bold purple-violet colors, geometric elements, and full responsiveness with dark mode support.

Open Preview

                <footer class="bg-violet-200 dark:bg-violet-950 p-6 sm:p-8 md:p-10 text-violet-900 dark:text-violet-100 relative overflow-hidden font-sans">
  <!-- Memphis Style Geometric Shapes - Background -->
  <div class="absolute top-0 left-0 w-24 h-24 bg-violet-400 dark:bg-violet-700 transform -translate-x-1/2 -translate-y-1/2 rounded-full opacity-60 dark:opacity-40"></div>
  <div class="absolute bottom-0 right-0 w-32 h-32 bg-violet-500 dark:bg-violet-800 transform translate-x-1/3 translate-y-1/3 rotate-45 opacity-60 dark:opacity-40"></div>
  <div class="absolute top-1/4 right-1/4 w-16 h-16 bg-violet-300 dark:bg-violet-600 rounded-lg transform rotate-12 opacity-60 dark:opacity-40 hidden sm:block"></div>
  <div class="absolute bottom-1/4 left-1/4 w-20 h-20 bg-violet-400 dark:bg-violet-700 rounded-full transform -rotate-24 opacity-60 dark:opacity-40 hidden md:block"></div>

  <div class="container mx-auto flex flex-col items-center space-y-4 relative z-10">
    <div class="text-2xl sm:text-3xl font-extrabold tracking-tight text-violet-800 dark:text-violet-200">
      <span class="text-violet-600 dark:text-violet-400">Stream</span>Now
    </div>

    <nav class="flex flex-wrap justify-center gap-x-4 gap-y-2 text-sm sm:text-base font-medium">
      <a href="#" class="hover:text-violet-700 dark:hover:text-violet-300 transition-colors duration-200">About Us</a>
      <a href="#" class="hover:text-violet-700 dark:hover:text-violet-300 transition-colors duration-200">Terms of Service</a>
      <a href="#" class="hover:text-violet-700 dark:hover:text-violet-300 transition-colors duration-200">Privacy Policy</a>
      <a href="#" class="hover:text-violet-700 dark:hover:text-violet-300 transition-colors duration-200">Contact</a>
    </nav>

    <div class="flex space-x-4">
      <a href="#" aria-label="Facebook" class="text-violet-700 dark:text-violet-300 hover:text-violet-900 dark:hover:text-violet-100 transition-colors duration-200">
        <svg class="w-6 h-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.33v6.988C18.343 21.128 22 16.991 22 12z" clip-rule="evenodd" />
        </svg>
      </a>
      <a href="#" aria-label="Twitter" class="text-violet-700 dark:text-violet-300 hover:text-violet-900 dark:hover:text-violet-100 transition-colors duration-200">
        <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
          <path d="M.21 2.87a9.982 9.982 0 0 1 2.83-1.07C3.96 1.4 5.25.9 6.64.9c2.7.0 4.7 1.4 5.3 3.4a.2.2 0 0 1-.03.22c-.93 1.2-2.1 2.1-3.6 2.8a.2.2 0 0 0-.2.2v.4c0 .8.2 1.5.7 2.1c.5.5 1.1.9 1.8 1.1h.4a.2.2 0 0 0 .1-.02c1.7-1.1 2.9-2.5 3.3-4.1a.2.2 0 0 1 .2-.1l1.7.3c.09.02.16.1.18.19a.2.2 0 0 1-.05.15c-1.3 1.6-2.9 2.9-4.8 3.8a.2.2 0 0 0-.1.2c-.3 1.7-.8 3.4-1.7 4.9-.8 1.3-1.9 2.5-3.3 3.4-1.4.9-2.9 1.4-4.5 1.4-1.1.0-2.3-.2-3.4-.6a.2.2 0 0 1-.16-.25c.1-.14 1.3-.84 2.8-1.54 1.4-.7 2.6-1.35 3.4-1.9a.2.2 0 0 0 .02-.27c-.06-.1-.13-.15-.22-.17-.7-.15-1.5-.22-2.3-.2A4.246 4.246 0 0 0 3 14.8c-.8.4-1.6.7-2.3.8a.2.2 0 0 1-.2-.14c-.1-.1-.1-.2-.04-.33 1.3-2.1 2.2-3.7 2.7-4.7C4.1 8 4.6 7.4 5.1 6.8c.4-.6.8-1.2 1.1-1.7a.2.2 0 0 0 .04-.21c-.4-.7-.7-1.5-.7-2.3 0-.02 0-.04.01-.07zM20.7 7.7l.9-1.9c-.9-.1-1.7-.3-2.6-.6a1.1 1.1 0 0 1-.2-.2c-.1-.3-.2-.6-.2-.9.0-1.8 1.6-2.9 4.3-3.1.2 0 .2.08.1.23-.2.3-.9.9-2.2 1.6a.2.2 0 0 1-.1.21c-.4.2-1 .3-1.6.4-.6.1-.9.6-1.1.9-.3.5-.4.8-.4 1.2s.1.7.3.9c.2.2.4.3.5.4a.2.2 0 0 0 .1.02c.9.1 1.8.4 2.6.8a.2.2 0 0 0 .2-.06Z" />
        </svg>
      </a>
      <a href="#" aria-label="Instagram" class="text-violet-700 dark:text-violet-300 hover:text-violet-900 dark:hover:text-violet-100 transition-colors duration-200">
        <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
          <path fill-rule="evenodd" d="M12 4c-2.76 0-4.97 2.21-4.97 4.97v6.06c0 2.76 2.21 4.97 4.97 4.97h6.06c2.76 0 4.97-2.21 4.97-4.97V8.97c0-2.76-2.21-4.97-4.97-4.97H12zm0-2h6.06C21.372 2 24 4.628 24 7.94V17.06C24 20.36 21.372 23 18.06 23H7.94C4.64 23 2 20.372 2 17.06V7.94C2 4.64 4.628 2 7.94 2H12zM7.5 12c0 2.485 2.015 4.5 4.5 4.5s4.5-2.015 4.5-4.5-2.015-4.5-4.5-4.5-4.5 2.015-4.5 4.5zm0-2.5a.5.5 0 100 1 .5.5 0 000-1zm-1.5 2.5a6 6 0 1112 0 6 6 0 01-12 0z" clip-rule="evenodd" />
        </svg>
      </a>
    </div>

    <p class="text-xs sm:text-sm text-center opacity-75">
      &copy; <span id="year"></span> StreamNow. All rights reserved.
    </p>
  </div>
  <script>
    document.getElementById('year').textContent = new Date().getFullYear();
  </script>
</footer>

Industrial_Charity_Footer

A complex, responsive footer component for non-profit/charity websites, featuring an industrial and raw aesthetic with a retro/vintage color palette. Includes navigation, contact info, social links, and a newsletter signup, with full dark mode support.

Open Preview

                <footer class="bg-gray-200 dark:bg-gray-900 border-t-4 border-amber-600 dark:border-amber-500 py-12 px-4 sm:px-6 lg:px-8 font-sans text-gray-800 dark:text-gray-200">
  <div class="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-10 lg:gap-16">

    <!-- Brand/Mission Statement -->
    <div class="flex flex-col items-start">
      <a href="#" class="flex items-center mb-4">
        <img src="https://picsum.photos/40/40?grayscale" alt="Charity Logo" class="h-10 w-10 mr-3 rounded-full border-2 border-amber-600 dark:border-amber-500 shadow-md">
        <span class="text-2xl font-bold uppercase text-amber-800 dark:text-amber-500 tracking-wide">HopeForge</span>
      </a>
      <p class="text-sm leading-relaxed text-gray-700 dark:text-gray-300 mb-4">
        Forging a brighter future, one community at a time. We empower, we build, we hope.
      </p>
      <div class="flex space-x-4">
        <a href="#" aria-label="Facebook" class="text-gray-600 hover:text-amber-600 dark:text-gray-400 dark:hover:text-amber-500 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.878Z" clip-rule="evenodd" />
          </svg>
        </a>
        <a href="#" aria-label="Twitter" class="text-gray-600 hover:text-amber-600 dark:text-gray-400 dark:hover:text-amber-500 transition-colors duration-200">
          <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path d="M20.354 5.383c-.633.313-1.317.525-2.03.626.729-.436 1.282-1.125 1.545-1.944-.683.406-1.432.706-2.22.864C16.924 4.41 15.902 4 14.802 4c-1.921 0-3.483 1.562-3.483 3.484 0 .272.03.535.084.79C7.15 6.742 4.14 5.23 2.067 2.923c-.279.479-.439 1.036-.439 1.637 0 1.205.613 2.28 1.554 2.909-.569-.017-1.104-.173-1.57-.433v.044c0 1.688 1.202 3.092 2.79 3.415-.292.08-.6.124-.91.124-.223 0-.44-.02-.656-.063.442 1.385 1.724 2.395 3.242 2.423-1.192.934-2.69 1.488-4.324 1.488-.28 0-.555-.016-.826-.048C3.125 18.067 5.106 19 7.202 19c6.685 0 10.334-5.536 10.334-10.334 0-.158-.003-.314-.01-.469A7.472 7.472 0 0 0 20.354 5.383Z"/>
          </svg>
        </a>
        <a href="#" aria-label="Instagram" class="text-gray-600 hover:text-amber-600 dark:text-gray-400 dark:hover:text-amber-500 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 4c2.716 0 3.056.012 4.12.06c1.065.048 1.79.213 2.417.464a4.984 4.984 0 0 1 1.772 1.153c.697.697 1.153 1.772 1.153 2.417.251.627.416 1.352.464 2.417.048 1.064.06 1.404.06 4.12 0 2.716-.012 3.056-.06 4.12-.048 1.065-.213 1.79-.464 2.417a4.984 4.984 0 0 1-1.153 1.772c-.697.697-1.772 1.153-2.417 1.153-.627.251-1.352.416-2.417.464-1.064.048-1.404.06-4.12.06S8.944 22 7.88 21.94c-1.065-.048-1.79-.213-2.417-.464a4.984 4.984 0 0 1-1.772-1.153c-.697-.697-1.153-1.772-1.153-2.417-.251-.627-.416-1.352-.464-2.417-.048-1.064-.06-1.404-.06-4.12s.012-3.056.06-4.12c.048-1.065.213-1.79.464-2.417a4.984 4.984 0 0 1 1.153-1.772C4.47 4.697 5.545 4.241 6.19 3.99c.627-.251 1.352-.416 2.417-.464C9.404 3.932 9.744 3.92 12 3.92ZM12 2A10 10 0 1 0 12 22A10 10 0 0 0 12 2Zm0 5a5 5 0 1 1 0 10 5 5 0 0 1 0-10Zm0 2a3 3 0 1 0 0 6 3 3 0 0 0 0-6Zm6.5-3.5a1.25 1.25 0 1 1-2.5 0 1.25 1.25 0 0 1 2.5 0Z" clip-rule="evenodd" />
          </svg>
        </a>
        <a href="#" aria-label="LinkedIn" class="text-gray-600 hover:text-amber-600 dark:text-gray-400 dark:hover:text-amber-500 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="M20.5 2h-17A1.5 1.5 0 0 0 2 3.5v17A1.5 1.5 0 0 0 3.5 22h17a1.5 1.5 0 0 0 1.5-1.5v-17A1.5 1.5 0 0 0 20.5 2ZM8 19V9h4v10H8Zm-2-3a2 2 0 1 1 0-4 2 2 0 0 1 0 4Zm2.5-7A2.5 2.5 0 0 0 8 6.5C8 5.12 9.12 4 10.5 4h10c.83 0 1.5.67 1.5 1.5V19h-4V11a2.5 2.5 0 0 0-2.5-2.5c-1.38 0-2.5 1.12-2.5 2.5v8H8Z" clip-rule="evenodd" />
          </svg>
        </a>
      </div>
    </div>

    <!-- Quick Links -->
    <div>
      <h3 class="text-lg font-semibold uppercase text-gray-900 dark:text-gray-100 mb-5 relative pb-3 before:absolute before:left-0 before:bottom-0 before:h-1 before:w-10 before:bg-amber-600 dark:before:bg-amber-500">Quick Links</h3>
      <ul class="space-y-3">
        <li><a href="#" class="hover:text-amber-600 dark:hover:text-amber-500 transition-colors duration-200 text-gray-700 dark:text-gray-300 text-sm">Our Mission</a></li>
        <li><a href="#" class="hover:text-amber-600 dark:hover:text-amber-500 transition-colors duration-200 text-gray-700 dark:text-gray-300 text-sm">What We Do</a></li>
        <li><a href="#" class="hover:text-amber-600 dark:hover:text-amber-500 transition-colors duration-200 text-gray-700 dark:text-gray-300 text-sm">Success Stories</a></li>
        <li><a href="#" class="hover:text-amber-600 dark:hover:text-amber-500 transition-colors duration-200 text-gray-700 dark:text-gray-300 text-sm">Volunteer</a></li>
        <li><a href="#" class="hover:text-amber-600 dark:hover:text-amber-500 transition-colors duration-200 text-gray-700 dark:text-gray-300 text-sm">Partnerships</a></li>
      </ul>
    </div>

    <!-- Contact Information -->
    <div>
      <h3 class="text-lg font-semibold uppercase text-gray-900 dark:text-gray-100 mb-5 relative pb-3 before:absolute before:left-0 before:bottom-0 before:h-1 before:w-10 before:bg-amber-600 dark:before:bg-amber-500">Contact Info</h3>
      <address class="not-italic space-y-3 text-sm text-gray-700 dark:text-gray-300">
        <p class="flex items-start">
          <svg class="h-5 w-5 mr-3 flex-shrink-0 text-amber-700 dark:text-amber-500" 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="M17.657 16.727A8 8 0 0112 20c-3.473 0-6.417-2.07-7.857-5.003L2 14v-2c0-.552.448-1 1-1h1.586L6.5 9h-2.586A1.5 1.5 0 003 10.5v1.5a1 1 0 01-1 1H.5c-.276 0-.5.224-.5.5v1A.5.5 0 00.5 14h1.996C3.04 17.587 7.03 20 12 20c2.518 0 4.887-.96 6.812-2.71C20.575 15.69 22 13.921 22 12c0-1.854-.627-3.568-1.688-4.912C19.261 5.92 17.5 4 15 4c-.167 0-.329.01-.491.028A8 8 0 0012 4c-4.418 0-8 3.582-8 8s3.582 8 8 8c.706 0 1.4-.07 2.07-.203"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 11c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 11a.5.5 0 01-1 0v-.5a.5.5 0 011 0V11zM12 15a.5.5 0 01-1 0v-.5a.5.5 0 011 0V15z"/></svg>
          <span class="flex-1">123 Industrial Way, <br>Retroville, RV 54321</span>
        </p>
        <p class="flex items-center">
          <svg class="h-5 w-5 mr-3 flex-shrink-0 text-amber-700 dark:text-amber-500" 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="M3 5a2 2 0 012-2h14a2 2 0 012 2v2a2 2 0 01-2 2H5a2 2 0 01-2-2V5zM3 11a2 2 0 012-2h14a2 2 0 012 2v2a2 2 0 01-2 2H5a2 2 0 01-2-2v-2zM3 17a2 2 0 012-2h14a2 2 0 012 2v2a2 2 0 01-2 2H5a2 2 0 01-2-2v-2z"></path></svg>
          <a href="mailto:[email protected]" class="hover:text-amber-600 dark:hover:text-amber-500 transition-colors duration-200">[email protected]</a>
        </p>
        <p class="flex items-center">
          <svg class="h-5 w-5 mr-3 flex-shrink-0 text-amber-700 dark:text-amber-500" 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="M3 5.753c0 .894.498 1.696 1.282 2.122l8 4.57c.502.287 1.05.428 1.603.428s1.101-.141 1.603-.428l8-4.57C23.502 7.449 24 6.647 24 5.753V5a.5.5 0 00-.5-.5h-23A.5.5 0 000 5v.753zM21 11.5L12 16.5 3 11.5v6.247c0 .894.502 1.696 1.284 2.123l.716.41V21h16v-1.72l.716-.41c.782-.427 1.284-1.229 1.284-2.123V11.5z"></path></svg>

          <a href="tel:+1 (555) 123-4567" class="hover:text-amber-600 dark:hover:text-amber-500 transition-colors duration-200">+1 (555) 123-4567</a>
        </p>
        <p>
          <a href="#" class="inline-flex items-center text-sm font-semibold text-amber-700 hover:text-amber-600 dark:text-amber-500 dark:hover:text-amber-400 transition-colors duration-200 group mt-2">
            Get Directions
            <svg class="ml-2 h-4 w-4 group-hover:translate-x-1 transition-transform duration-200" 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="M17.5 12h-11m0 0l-4 4m4-4l-4-4"></path></svg>
          </a>
        </p>
      </address>
    </div>

    <!-- Newsletter Signup -->
    <div>
      <h3 class="text-lg font-semibold uppercase text-gray-900 dark:text-gray-100 mb-5 relative pb-3 before:absolute before:left-0 before:bottom-0 before:h-1 before:w-10 before:bg-amber-600 dark:before:bg-amber-500">Stay Connected</h3>
      <p class="mb-4 text-gray-700 dark:text-gray-300 text-sm">
        Join our newsletter for impactful updates and ways to contribute.
      </p>
      <form class="flex flex-col sm:flex-row gap-2">
        <input type="email" placeholder="Your Email Address" aria-label="Your Email Address" class="flex-grow min-w-0 px-4 py-2 bg-gray-100 dark:bg-gray-700 placeholder-gray-500 dark:placeholder-gray-400 text-gray-900 dark:text-gray-100 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-amber-600 dark:focus:ring-amber-500 transition-all duration-200">
        <button type="submit" class="px-6 py-2 bg-amber-600 hover:bg-amber-700 dark:bg-amber-500 dark:hover:bg-amber-600 text-white font-semibold rounded-md shadow-md transition-colors duration-200 flex-shrink-0">
          Subscribe
        </button>
      </form>
      <p class="mt-4 text-xs text-gray-500 dark:text-gray-400">
        We respect your privacy. No spam, ever.
      </p>
    </div>

  </div>

  <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; <span id="current-year"></span> HopeForge Charity. All rights reserved. Built with purpose.</p>
    <div class="flex justify-center space-x-4 mt-2">
      <a href="#" class="hover:text-amber-600 dark:hover:text-amber-500 transition-colors duration-200">Privacy Policy</a>
      <span>|</span>
      <a href="#" class="hover:text-amber-600 dark:hover:text-amber-500 transition-colors duration-200">Terms of Service</a>
      <span>|</span>
      <a href="#" class="hover:text-amber-600 dark:hover:text-amber-500 transition-colors duration-200">Sitemap</a>
    </div>
  </div>

  <!-- Simple script for current year (No JS requirement for Tailwind, but good for dynamic year) -->
  <script>
    document.getElementById('current-year').textContent = new Date().getFullYear();
  </script>
</footer>

Footer Component - Booking/Reservation - Dark Mode Candy

A complex, responsive footer component designed for booking/reservation systems. Features a dark mode UI with bright candy/sweet colors, multiple navigation links, social media icons, and a newsletter subscription. Fully responsive and supports dark mode.

Open Preview

                <footer class="bg-gradient-to-r from-gray-900 to-black text-pink-200 py-12 dark:from-black dark:to-gray-950">
  <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-10 lg:gap-8">
      
      <!-- Company Info / Logo -->
      <div class="lg:col-span-2">
        <a href="#" class="flex items-center space-x-3 mb-4">
          <svg class="h-8 w-8 text-pink-500" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z" />
          </svg>
          <span class="text-2xl font-extrabold text-pink-400 dark:text-pink-300">SweetBookings</span>
        </a>
        <p class="text-pink-300 text-sm leading-relaxed mb-6">
          Your premier destination for seamless reservations and unforgettable experiences. Book your sweet escape today!
        </p>
        <form class="mb-4">
          <label for="email-newsletter" class="block text-sm font-medium text-pink-300 mb-2">Stay Sweet, Get Updates!</label>
          <div class="flex rounded-lg shadow-sm overflow-hidden">
            <input type="email" id="email-newsletter" name="email" placeholder="Your email address" class="flex-1 min-w-0 px-4 py-2 rounded-l-lg border-none bg-gray-800 text-pink-100 placeholder-pink-400 focus:ring-2 focus:ring-mint-400 focus:border-transparent">
            <button type="submit" class="px-5 py-2 bg-mint-500 hover:bg-mint-600 text-gray-900 font-semibold rounded-r-lg transition duration-300">
              Subscribe
            </button>
          </div>
        </form>
      </div>

      <!-- Quick Links -->
      <div>
        <h3 class="text-lg font-bold text-pink-400 mb-4 dark:text-pink-300">Quick Links</h3>
        <ul class="space-y-3">
          <li><a href="#" class="text-pink-300 hover:text-pink-500 transition duration-200 text-sm">Book Now</a></li>
          <li><a href="#" class="text-pink-300 hover:text-pink-500 transition duration-200 text-sm">Manage Booking</a></li>
          <li><a href="#" class="text-pink-300 hover:text-pink-500 transition duration-200 text-sm">Gift Vouchers</a></li>
          <li><a href="#" class="text-pink-300 hover:text-pink-500 transition duration-200 text-sm">Special Offers</a></li>
          <li><a href="#" class="text-pink-300 hover:text-pink-500 transition duration-200 text-sm">Destinations</a></li>
        </ul>
      </div>

      <!-- Support -->
      <div>
        <h3 class="text-lg font-bold text-pink-400 mb-4 dark:text-pink-300">Support</h3>
        <ul class="space-y-3">
          <li><a href="#" class="text-pink-300 hover:text-pink-500 transition duration-200 text-sm">Help Center</a></li>
          <li><a href="#" class="text-pink-300 hover:text-pink-500 transition duration-200 text-sm">FAQ</a></li>
          <li><a href="#" class="text-pink-300 hover:text-pink-500 transition duration-200 text-sm">Contact Us</a></li>
          <li><a href="#" class="text-pink-300 hover:text-pink-500 transition duration-200 text-sm">Privacy Policy</a></li>
          <li><a href="#" class="text-pink-300 hover:text-pink-500 transition duration-200 text-sm">Terms of Service</a></li>
        </ul>
      </div>

      <!-- Contact Info -->
      <div>
        <h3 class="text-lg font-bold text-pink-400 mb-4 dark:text-pink-300">Get in Touch</h3>
        <p class="text-pink-300 text-sm mb-3">
          <strong class="block">Address:</strong> 123 Candy Lane, Sweet City, SC 90210
        </p>
        <p class="text-pink-300 text-sm mb-3">
          <strong class="block">Phone:</strong> <a href="tel:+1234567890" class="hover:text-pink-500 transition duration-200">(123) 456-7890</a>
        </p>
        <p class="text-pink-300 text-sm mb-4">
          <strong class="block">Email:</strong> <a href="mailto:[email protected]" class="hover:text-pink-500 transition duration-200">[email protected]</a>
        </p>
        <div class="flex space-x-4">
          <a href="#" class="text-pink-300 hover:text-pink-500 dark:hover:text-pink-400 transition 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.877V14.89H8.79V12h1.648V9.789c0-1.662.983-2.615 2.535-2.615 1.194 0 2.306.213 2.306.213V10.2H14.15c-.825 0-1.082.515-1.082 1.053V12h2.24l-.356 2.89H13.068V22H12C6.477 22 2 17.523 2 12z" clip-rule="evenodd" />
            </svg>
          </a>
          <a href="#" class="text-pink-300 hover:text-pink-500 dark:hover:text-pink-400 transition 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.843.038 1.488.156 2.075.356.65.23 1.157.567 1.626 1.036.469.469.805.976 1.035 1.622.2.586.318 1.231.358 2.076.046 1.013.048 1.367.048 3.797s-.002 2.43-.048 3.797c-.04.843-.158 1.488-.358 2.075-.23 1.157-.567 1.157-1.036 1.626a4.904 4.904 0 01-1.622 1.035c-.586.2-1.23.318-2.076.358-1.013.045-1.367.048-3.797.048s-2.43-.002-3.797-.048c-.843-.04-1.488-.158-2.075-.358a4.904 4.904 0 01-1.626-1.036c-.469-.469-.805-.976-1.035-1.622-.2-.586-.317-1.23-.357-2.076-.046-1.013-.048-1.367-.048-3.797s.002-2.43.048-3.797c.04-.843.158-1.488.358-2.075a4.904 4.904 0 011.036-1.626c.469-.469.976-.805 1.622-1.035.586-.2 1.23-.317 2.076-.357C9.882 1.998 10.236 2 12.315 2zm0 2.15c-2.3 0-2.673.011-3.619.055-.783.036-1.202.166-1.485.276a2.022 2.022 0 00-.734.545 2.022 2.022 0 00-.546.733c-.11.283-.24.702-.276 1.485-.044.946-.055 1.319-.055 3.619s.011 2.673.055 3.619c.036.783.166 1.202.276 1.485a2.022 2.022 0 00.545.734 2.022 2.022 0 00.733.546c.283.11.702.24 1.485.276.946.044 1.319.055 3.619.055s2.673-.011 3.619-.055c.783-.036 1.202-.166 1.485-.276a2.022 2.022 0 00.734-.545 2.022 2.022 0 00.546-.733c.11-.283.24-.702.276-1.485.044-.946.055-1.319.055-3.619s-.011-2.673-.055-3.619c-.036-.783-.166-1.202-.276-1.485a2.022 2.022 0 00-.545-.734 2.022 2.022 0 00-.733-.546c-.283-.11-.702-.24-1.485-.276-.946-.044-1.319-.055-3.619-.055zM12.315 6.844v-1.161c0-.64-.52-.962-1.16-.962-.64 0-.962.52-.962 1.161v1.161h2.322zM12.315 17.16c-2.674 0-4.846-2.172-4.846-4.846s2.172-4.846 4.846-4.846 4.846 2.172 4.846 4.846-2.172 4.846-4.846 4.846zm0-8.528c-2.036 0-3.682 1.646-3.682 3.682s1.646 3.682 3.682 3.682 3.682-1.646 3.682-3.682-1.646-3.682-3.682-3.682zm4.32-.495c-.328 0-.594.266-.594.594s.266.594.594.594.594-.266.594-.594-.266-.594-.594-.594z" clip-rule="evenodd" />
            </svg>
          </a>
          <a href="#" class="text-pink-300 hover:text-pink-500 dark:hover:text-pink-400 transition duration-200">
            <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              <path d="M8.29 20.35c4.76 0 7.8-3.95 7.8-7.8s-3.04-7.8-7.8-7.8c-4.3 0-7.8 3.5-7.8 7.8S3.99 20.35 8.29 20.35zm-2.88-4.22c.32.14.7.23 1.1.28.32.04.64.06.97.06.49 0 .97-.04 1.4-.11.45-.07.8-.16 1.13-.28v-2.31c-.3.08-.63.15-.98.2-.35.05-.7.08-1.07.08-.66 0-1.28-.15-1.84-.44-.57-.29-1.04-.69-1.42-1.2C3.51 9.49 3.32 8.76 3.32 7.96c0-.98.3-1.8.89-2.45.6-.66 1.4-.99 2.4-.99.3 0 .58.03.86.08.28.05.54.12.78.22l-2.07 2.07c-.12.12-.22.25-.3.4l-.1.17c-.32.55-.48 1.18-.48 1.88 0 .57.1.97.3 1.2.2.24.46.36.78.36.26 0 .5-.05.7-.15l.39-.17.39-.17c.5-.23.94-.56 1.32-.98.38-.42.66-.88.84-1.38.18-.5.27-.99.27-1.47 0-.58-.1-.97-.3-1.18-.2-.22-.45-.33-.76-.33-.16 0-.32.02-.48.05-.16.03-.3.08-.42.15l-1.05 1.05c-.12.12-.25.22-.4.3-.22.12-.4.18-.54.18-.2 0-.37-.03-.5-.09-.12-.06-.2-.14-.24-.24-.04-.1-.06-.18-.06-.24 0-.1.02-.18.06-.24.04-.06.1-.12.18-.18l.2-.2c.1-.1.18-.16.24-.18.06-.02.1-.02.12-.02.04 0 .08-.01.12-.01.04-.01.07-.01.09-.01l.24.01c.2.02.4.08.6.18.2.1.4.22.6.38.2.16.4.34.6.54.2.2.4.42.6.66.2.24.4.5.6.78.2.28.4.58.6.9.2.32.4.66.6 1.02.2.36.36.72.48 1.08.12.36.18.7.18 1.02-.01.99-.33 1.8-.95 2.43-.61.63-1.43 1-2.46 1-1.02 0-1.84-.37-2.46-1.11-.62-.74-.93-1.63-.93-2.67 0-.49.09-.96.26-1.4-.04 0-.08-.01-.12-.01-.04 0-.08 0-.12 0-.04 0-.08 0-.12.01-.04.01-.08.01-.12.02l-.24.02c-.2.02-.4.08-.6.18-.2.1-.4.22-.6.38-.2.16-.4.34-.6.54-.2.2-.4.42-.6.66-.2.24-.4.5-.6.78-.2.28-.4.58-.6.9-.2.32-.4.66-.6 1.02-.2.36-.36.72-.48 1.08-.12.36-.18.7-.18 1.02-.01.99-.33 1.8-.95 2.43-.61.63-1.43 1-2.46 1z"/>
            </svg>
          </a>
          <a href="#" class="text-pink-300 hover:text-pink-500 dark:hover:text-pink-400 transition duration-200">
            <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              <path d="M16.98 0H7.02C4.332 0 2.181 2.15 2.181 4.838v14.324C2.181 21.85 4.332 24 7.02 24h9.96c2.688 0 4.838-2.15 4.838-4.838V4.838C21.818 2.15 19.668 0 16.98 0zm-4.998 17.5c-2.485 0-4.5-2.015-4.5-4.5s2.015-4.5 4.5-4.5 4.5 2.015 4.5 4.5c0 2.485-2.015 4.5-4.5 4.5zm5.5-12.72c-.655 0-1.189-.533-1.189-1.189s.534-1.189 1.189-1.189 1.189.533 1.189 1.189-.534 1.189-1.189 1.189z"/>
              <circle cx="12" cy="13" r="3.5"/>
            </svg>
          </a>
        </div>
      </div>

    </div>

    <div class="mt-12 border-t border-gray-800 pt-8 text-center">
      <p class="text-pink-300 text-sm">&copy; 2023 SweetBookings. All rights reserved. Designed with <span class="text-pink-500">♥</span> for sweet reservations.</p>
    </div>
  </div>
</footer>

Search Components

Categories

Footer