Search Components

Footer Navigation

Navigation links at the bottom of the page

Footer Navigation Component

A complex, responsive footer navigation component designed for a marketplace, featuring a dark mode UI with a black and white color scheme and one bright accent color (indigo). Includes multiple sections for navigation, company info, legal links, and social media, with full dark mode support.

Open Preview

                <footer class="bg-gray-950 text-gray-300 py-12 dark:bg-black dark:text-gray-400">
  <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-4 gap-y-10 gap-x-8">
      
      <!-- Company Info & Logo -->
      <div class="col-span-1 lg:col-span-1">
        <div class="flex items-center space-x-2 mb-4">
          <svg class="h-8 w-8 text-indigo-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <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>
            <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"></path>
          </svg>
          <span class="text-2xl font-bold text-white dark:text-white">Marketify</span>
        </div>
        <p class="text-sm mb-4">The ultimate marketplace for unique items and services around the globe.</p>
        <h3 class="text-lg font-semibold text-white dark:text-white mb-3">Subscribe to our Newsletter</h3>
        <form class="flex rounded-md shadow-sm">
          <input type="email" placeholder="Your email" aria-label="Your email" class="flex-1 min-w-0 block w-full px-4 py-2 rounded-l-md border-0 bg-gray-800 text-white placeholder-gray-500 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm dark:bg-gray-900 dark:text-gray-300 dark:placeholder-gray-600">
          <button type="submit" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-r-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition duration-300 ease-in-out">
            Go
          </button>
        </form>
      </div>

      <!-- Quick Links -->
      <div class="col-span-1">
        <h3 class="text-lg font-semibold text-white dark:text-white mb-4">Quick Links</h3>
        <ul class="space-y-3">
          <li><a href="#" class="text-gray-300 hover:text-indigo-500 transition duration-300 ease-in-out dark:text-gray-400 dark:hover:text-indigo-400">Home</a></li>
          <li><a href="#" class="text-gray-300 hover:text-indigo-500 transition duration-300 ease-in-out dark:text-gray-400 dark:hover:text-indigo-400">Browse Categories</a></li>
          <li><a href="#" class="text-gray-300 hover:text-indigo-500 transition duration-300 ease-in-out dark:text-gray-400 dark:hover:text-indigo-400">How It Works</a></li>
          <li><a href="#" class="text-gray-300 hover:text-indigo-500 transition duration-300 ease-in-out dark:text-gray-400 dark:hover:text-indigo-400">Seller Program</a></li>
          <li><a href="#" class="text-gray-300 hover:text-indigo-500 transition duration-300 ease-in-out dark:text-gray-400 dark:hover:text-indigo-400">Buyer's Guide</a></li>
        </ul>
      </div>

      <!-- Support & Help -->
      <div class="col-span-1">
        <h3 class="text-lg font-semibold text-white dark:text-white mb-4">Support</h3>
        <ul class="space-y-3">
          <li><a href="#" class="text-gray-300 hover:text-indigo-500 transition duration-300 ease-in-out dark:text-gray-400 dark:hover:text-indigo-400">Help Center</a></li>
          <li><a href="#" class="text-gray-300 hover:text-indigo-500 transition duration-300 ease-in-out dark:text-gray-400 dark:hover:text-indigo-400">Contact Us</a></li>
          <li><a href="#" class="text-gray-300 hover:text-indigo-500 transition duration-300 ease-in-out dark:text-gray-400 dark:hover:text-indigo-400">Payments</a></li>
          <li><a href="#" class="text-gray-300 hover:text-indigo-500 transition duration-300 ease-in-out dark:text-gray-400 dark:hover:text-indigo-400">Shipping</a></li>
          <li><a href="#" class="text-gray-300 hover:text-indigo-500 transition duration-300 ease-in-out dark:text-gray-400 dark:hover:text-indigo-400">Returns</a></li>
        </ul>
      </div>

      <!-- Legal & Social -->
      <div class="col-span-1">
        <h3 class="text-lg font-semibold text-white dark:text-white mb-4">Legal & Social</h3>
        <ul class="space-y-3 mb-6">
          <li><a href="#" class="text-gray-300 hover:text-indigo-500 transition duration-300 ease-in-out dark:text-gray-400 dark:hover:text-indigo-400">Terms of Service</a></li>
          <li><a href="#" class="text-gray-300 hover:text-indigo-500 transition duration-300 ease-in-out dark:text-gray-400 dark:hover:text-indigo-400">Privacy Policy</a></li>
          <li><a href="#" class="text-gray-300 hover:text-indigo-500 transition duration-300 ease-in-out dark:text-gray-400 dark:hover:text-indigo-400">Cookie Policy</a></li>
        </ul>

        <h3 class="text-lg font-semibold text-white dark:text-white mb-3">Follow Us</h3>
        <div class="flex space-x-4">
          <a href="#" class="text-gray-300 hover:text-indigo-500 transition duration-300 ease-in-out dark:text-gray-400 dark:hover:text-indigo-400" aria-label="Facebook">
            <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.33V22H12c5.523 0 10-4.477 10-10z" clip-rule="evenodd" />
            </svg>
          </a>
          <a href="#" class="text-gray-300 hover:text-indigo-500 transition duration-300 ease-in-out dark:text-gray-400 dark:hover:text-indigo-400" aria-label="Twitter">
            <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              <path d="M8.29 20.251c-.03.012-.062.022-.094.031a15.753 15.753 0 01-4.87-1.1c-.6-.248-1.077-.736-1.393-1.314-.316-.578-.46-1.229-.425-1.898L.54 12.012c0-.528.106-1.05.316-1.547.21-.497.51-.946.883-1.319a.75.75 0 011.06 1.06c-.19.19-.347.4-.469.626s-.208.468-.231.716c-.024.248-.005.5-.028.747l-.145 1.54c-.035.352-.027.707.022 1.056.05.349.128.69.231 1.018.104.328.23.64.38.932.15.292.316.566.495.823.18.257.369.497.567.72.198.223.407.43.626.626.22.196.447.375.68.536.234.161.474.303.719.424.246.12.498.21.756.264.258.054.52.062.783.024.263-.038.52-.124.767-.257.247-.133.476-.301.688-.504.212-.203.403-.435.572-.68.169-.244.316-.508.438-.79.122-.284.21-.581.264-.889.054-.308.062-.619.024-.926.004-.047-.008-.094-.031-.14L18.423 7.376c-.053-.195-.124-.384-.213-.564-.09-.18-.198-.35-.32-.507-.122-.158-.258-.302-.408-.433-.15-.13-.309-.247-.477-.35-.168-.104-.345-.195-.53-.274-.186-.079-.379-.145-.58-.198-.201-.053-.408-.09-.62-.108-.212-.018-.426-.01-.64.024-.214.034-.424.088-.629.162-.206.074-.4.167-.584.278-.184.11-.357.234-.518.37A15.422 15.422 0 005.817 9.87c-.156.16-.31.332-.46.514-.15.182-.294.376-.432.58-.138.204-.268.419-.389.643-.121.224-.23.457-.324.697-.094.24-.173.486-.237.737-.064.25-.113.5-.147.75-.035.25-.048.5-.038.75s.035.5.094.75a.75.75 0 01-1.463.385l-.014-.044c-.035-.118-.052-.236-.052-.355 0-.203.023-.406.07-.607.046-.2.11-.397.19-.59s.174-.383.277-.565.215-.35.337-.506.26-.302.398-.444.281-.27.429-.39.298-.21.456-.296c.1 L20.25 4.754c.264-.264.55-.498.857-.704.307-.205.63-.377.968-.517.337-.14.686-.245 1.045-.315.359-.07.72-.093 1.082-.068.36.024.717.1.1.75l.135.044c.484.156.953.38 1.402.666.449.287.873.64 1.267 1.055.394.416.758.895 1.08 1.433.323.538.604 1.134.843 1.788.239.654.434 1.353.582 2.09c.147.738.24 1.51.277 2.304l.004.148c.02.483.013.97-.021 1.455-.035.485-.1.968-.194 1.442-.095.474-.221.939-.378 1.392-.158.453-.346.892-.565 1.315-.22.423-.47.828-.753 1.21-.283.381-.598.736-.944 1.066-.347.33-.726.632-1.137.896-.41.264-.845.49-1.299.678-.454.188-.92.338-1.397.449-.477.11-.964.183-1.456.216-.492.033-.984.024-1.472-.027-.488-.05-.968-.142-1.437-.272-.47-.13-.927-.3-1.365-.506-.438-.207-.853-.448-1.246-.723-.393-.275-.76-.583-1.097-.923L8.29 20.25z" />
            </svg>
          </a>
          <a href="#" class="text-gray-300 hover:text-indigo-500 transition duration-300 ease-in-out dark:text-gray-400 dark:hover:text-indigo-400" aria-label="Instagram">
            <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              <path fill-rule="evenodd" d="M12 2c2.716 0 3.056.012 4.122.06c.915.042 1.54.2 2.14.444.6.242 1.063.597 1.57.513a.75.75 0 01.513.513c-.084.507.271 1.007.444 1.607.244.6.402 1.225.444 2.14.048 1.066.06 1.406.06 4.122s-.012 3.056-.06 4.122c-.042.915-.2 1.54-.444 2.14-.242.6-.597 1.063-.513 1.57a.75.75 0 01-.513.513c-.507-.084-1.007.271-1.607.444-.6.244-1.225.402-2.14.444-1.066.048-1.406.06-4.122.06s-3.056-.012-4.122-.06c-.915-.042-1.54-.2-2.14-.444-.6-.242-1.063-.597-1.57-.513a.75.75 0 01-.513-.513c.084-.507-.271-1.007-.444-1.607-.244-.6-.402-1.225-.444-2.14-.048-1.066-.06-1.406-.06-4.122s.012-3.056.06-4.122c.042-.915.2-1.54.444-2.14.242-.6.597-1.063.513-1.57a.75.75 0 01.513-.513c.507.084 1.007-.271 1.607-.444.6-.244 1.225-.402 2.14-.444C8.944 2.012 9.284 2 12 2zm0 3.635l.019.001c.74.004 1.01.018 1.8.055.79.037 1.34.168 1.77.348.43.18.73.4.92.59.19.19.41.49.59.92.18.43.31.98.348 1.77.037.79.051 1.06.055 1.8l.001.019v.038c0 .74-.004 1.01-.055 1.8-.037.79-.168 1.34-.348 1.77-.18.43-.4.73-.59.92-.19.19-.49.41-.92.59-.43.18-.98.31-1.77.348-.79.037-1.06.051-1.8.055l-.019.001h-.038c-.74 0-1.01-.004-1.8-.055-.79-.037-1.34-.168-1.77-.348-.43-.18-.73-.4-.92-.59-.19-.19-.41-.49-.59-.92-.18-.43-.31-.98-.348-1.77-.037-.79-.051-1.06-.055-1.8l-.001-.019v-.038c0-.74.004-1.01.055-1.8.037-.79.168-1.34.348-1.77.18-.43.4-.73.59-.92.19-.19.49-.41.92-.59.43-.18.98-.31 1.77-.348.79-.037 1.06-.051 1.8-.055l.019-.001h.038zM12 7a5 5 0 100 10 5 5 0 000-10zm0 2.5a2.5 2.5 0 110 5 2.5 2.5 0 010-5zm6.5-.25a1.25 1.25 0 11-2.5 0 1.25 1.2.9 0 012.5 0z" clip-rule="evenodd" />
            </svg>
          </a>
          <a href="#" class="text-gray-300 hover:text-indigo-500 transition duration-300 ease-in-out dark:text-gray-400 dark:hover:text-indigo-400" aria-label="LinkedIn">
            <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="#" class="text-gray-300 hover:text-indigo-500 transition duration-300 ease-in-out dark:text-gray-400 dark:hover:text-indigo-400" aria-label="YouTube">
            <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              <path d="M19.615 3.1c.334-.143.722-.224 1.127-.224.977 0 1.905.39 2.593 1.082l.006.006c.697.697 1.082 1.63 1.082 2.593v8.835c0 .977-.39 1.905-1.082 2.593l-.006.006a3.67 3.67 0 01-2.593 1.082c-.413 0-.806-.082-1.144-.225L10.375 22.8c-.896.385-1.84.453-2.71.215-.87-.238-1.57-.75-1.996-1.42s-.652-1.517-.652-2.457V4.07c0-.94.218-1.83.652-2.457s1.126-1.182 1.996-1.42c.87-.238 1.814-.17 2.71.215L19.615 3.1zm-8.87 5.753l.008 1.722c.002.046.005.092.008.138.003.046.006.092.009.138l.004.062c.01.15.025.298.042.443.017.145.038.286.062.427.024.14.053.277.085.411.032.134.067.264.106.39.039.126.082.249.129.367.047.119.098.234.153.344.055.11.114.215.176.315.063.1.13.193.201.277.142.169.308.318.498.448.19.13.398.24.623.33.225.09.467.16.72.208.253.048.514.075.779.08.265.006.53-.004.79-.03.26-.027.514-.07.76-.13.245-.06.48-.138.705-.236.225-.098.44-.213.64-.34.2-.127.387-.268.56-.423.173-.156.33-.32.47-.492.278-.344.52-.714.735-1.112.215-.398.39-.82.525-1.265.136-.445.234-.908.297-1.385.063-.477.09-.962.08-1.45L20.47 7.64c-.053-.195-.124-.384-.213-.564-.09-.18-.198-.35-.32-.507-.122-.158-.258-.302-.408-.433-.15-.13-.309-.247-.477-.35-.168-.104-.345-.195-.53-.274-.186-.079-.379-.145-.58-.198-.201-.053-.408-.09-.62-.108-.212-.018-.426-.01-.64.024-.214.034-.424.088-.629.162-.206.074-.4.167-.584.278-.184.11-.357.234-.518.37l-.014.013c-.264.264-.55.498-.857.704-.307.205-.63.377-.968.517-.337.14-.686.245-1.045.315-.359.07-.72.093-1.082.068-.36-.024-.717-.1-.75-.75L3.528 7.376c-.053-.195-.124-.384-.213-.564-.09-.18-.198-.35-.32-.507-.122-.158-.258-.302-.408-.433z" />
            </svg>
          </a>
        </div>
      </div>

    </div>

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

Bauhaus_Retro_News_Footer

Complex, responsive footer navigation component for news/journalism websites, featuring a Bauhaus-inspired design with geometric forms and a retro/vintage color palette, including dark mode support.

Open Preview

                <footer class="bg-amber-100 text-stone-800 py-12 px-4 dark:bg-stone-900 dark:text-stone-300 font-sans">
  <div class="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-10 lg:gap-12">

    <!-- Brand & Social -->
    <div class="flex flex-col items-start">
      <a href="#" class="text-3xl font-bold tracking-tight text-red-700 dark:text-red-500 mb-4 uppercase">
        <span class="block">The Daily</span>
        <span class="block text-xl text-stone-700 dark:text-stone-400 -mt-2">Gazette</span>
      </a>
      <p class="text-sm mb-6 max-w-sm text-stone-700 dark:text-stone-400 leading-relaxed">
        Your source for unbiased news and in-depth analysis from around the globe. Stay informed, stay ahead.
      </p>
      <div class="flex space-x-4">
        <a href="#" class="w-9 h-9 flex items-center justify-center rounded-full bg-red-700 text-amber-100 hover:bg-red-800 dark:bg-red-500 dark:hover:bg-red-600 transition-colors duration-200" aria-label="Facebook">
          <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.33V22c5.965-.949 10-5.605 10-11.267Z" clip-rule="evenodd" />
          </svg>
        </a>
        <a href="#" class="w-9 h-9 flex items-center justify-center rounded-full bg-red-700 text-amber-100 hover:bg-red-800 dark:bg-red-500 dark:hover:bg-red-600 transition-colors duration-200" aria-label="Twitter">
          <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path d="M8.29 20.251c1.803.957 3.864 1.43 6.096 1.43 7.334 0 11.332-6.04 11.332-11.332 0-.17-.003-.338-.01-.506A8.134 8.134 0 0024 4.992c-.736.326-1.527.54-2.357.643a4.07 4.07 0 001.76-2.267c-.822.489-1.727.842-2.697 1.03a4.043 4.043 0 00-6.924 3.693 11.493 11.493 0 01-8.381-4.22c-.428.73-.67 1.58-.67 2.493 0 1.737.878 3.27 2.217 4.172a4.053 4.053 0 01-1.834-.508v.05c0 2.393 1.706 4.383 3.963 4.834a4.072 4.072 0 01-1.834.07c.628 1.956 2.445 3.393 4.605 3.432-1.688 1.325-3.805 2.124-6.102 2.124-.397 0-.786-.023-1.168-.069a16.052 16.052 0 009.654 3.013Z" />
          </svg>
        </a>
        <a href="#" class="w-9 h-9 flex items-center justify-center rounded-full bg-red-700 text-amber-100 hover:bg-red-800 dark:bg-red-500 dark:hover:bg-red-600 transition-colors duration-200" aria-label="Instagram">
          <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path fill-rule="evenodd" d="M12.317 3.093A8.472 8.472 0 0 0 4.542 6.095V10.5h1.996V6.095c0-1.85 1.503-3.35 3.35-3.35h7.224c1.847 0 3.35 1.5 3.35 3.35v7.224a3.35 3.35 0 0 1-3.35 3.35H13.5V18.5h4.417a8.471 8.471 0 0 0-.256-4.542H20a2.001 2.001 0 0 0 2-2V9.091a2.001 2.001 0 0 0-2-2h-3.091a8.472 8.472 0 0 0-4.542-.256V4.091h-2.09ZM12 10.5a1.5 1.5 0 1 0-.001 3.001A1.5 1.5 0 0 0 12 10.5Zm-5.5 0a7 7 0 1 1 14 0 7 7 0 0 1-14 0Z" clip-rule="evenodd" />
          </svg>
        </a>
      </div>
    </div>

    <!-- Navigation Links -->
    <div>
      <h3 class="text-lg font-semibold text-stone-900 dark:text-stone-200 mb-6 uppercase tracking-wider relative group">
        Sections
        <span class="block h-1 w-8 bg-red-700 dark:bg-red-500 absolute bottom-0 left-0 transition-all duration-300 group-hover:w-16"></span>
      </h3>
      <ul class="space-y-3">
        <li><a href="#" class="text-stone-700 dark:text-stone-400 hover:text-red-700 dark:hover:text-red-500 transition-colors duration-200 text-sm font-medium">World News</a></li>
        <li><a href="#" class="text-stone-700 dark:text-stone-400 hover:text-red-700 dark:hover:text-red-500 transition-colors duration-200 text-sm font-medium">Politics</a></li>
        <li><a href="#" class="text-stone-700 dark:text-stone-400 hover:text-red-700 dark:hover:text-red-500 transition-colors duration-200 text-sm font-medium">Business & Economy</a></li>
        <li><a href="#" class="text-stone-700 dark:text-stone-400 hover:text-red-700 dark:hover:text-red-500 transition-colors duration-200 text-sm font-medium">Tech & Science</a></li>
        <li><a href="#" class="text-stone-700 dark:text-stone-400 hover:text-red-700 dark:hover:text-red-500 transition-colors duration-200 text-sm font-medium">Arts & Culture</a></li>
        <li><a href="#" class="text-stone-700 dark:text-stone-400 hover:text-red-700 dark:hover:text-red-500 transition-colors duration-200 text-sm font-medium">Sports</a></li>
      </ul>
    </div>

    <!-- Recent Articles (Fictional Thumbnails) -->
    <div>
      <h3 class="text-lg font-semibold text-stone-900 dark:text-stone-200 mb-6 uppercase tracking-wider relative group">
        Latest Reads
        <span class="block h-1 w-8 bg-red-700 dark:bg-red-500 absolute bottom-0 left-0 transition-all duration-300 group-hover:w-16"></span>
      </h3>
      <div class="space-y-4">
        <a href="#" class="flex items-center space-x-4 group">
          <img src="https://picsum.photos/id/1025/70/70" alt="Image of forest" class="w-16 h-16 object-cover rounded shadow-md border-2 border-transparent group-hover:border-red-700 dark:group-hover:border-red-500 transition-colors duration-200">
          <div class="flex-1">
            <p class="text-sm font-medium text-stone-800 dark:text-stone-300 group-hover:text-red-700 dark:group-hover:text-red-500 transition-colors duration-200 line-clamp-2">Global Climate Summit Ends with Ambitious New Targets</p>
            <p class="text-xs text-stone-600 dark:text-stone-500 mt-1">2 hours ago</p>
          </div>
        </a>
        <a href="#" class="flex items-center space-x-4 group">
          <img src="https://picsum.photos/id/1015/70/70" alt="Image of a lake" class="w-16 h-16 object-cover rounded shadow-md border-2 border-transparent group-hover:border-red-700 dark:group-hover:border-red-500 transition-colors duration-200">
          <div class="flex-1">
            <p class="text-sm font-medium text-stone-800 dark:text-stone-300 group-hover:text-red-700 dark:group-hover:text-red-500 transition-colors duration-200 line-clamp-2">New AI Breakthrough Could Revolutionize Medicine</p>
            <p class="text-xs text-stone-600 dark:text-stone-500 mt-1">Yesterday</p>
          </div>
        </a>
        <a href="#" class="flex items-center space-x-4 group">
          <img src="https://picsum.photos/id/103/70/70" alt="Image of a mountain" class="w-16 h-16 object-cover rounded shadow-md border-2 border-transparent group-hover:border-red-700 dark:group-hover:border-red-500 transition-colors duration-200">
          <div class="flex-1">
            <p class="text-sm font-medium text-stone-800 dark:text-stone-300 group-hover:text-red-700 dark:group-hover:text-red-500 transition-colors duration-200 line-clamp-2">Cultural Heritage Vandalized in Ongoing Conflict</p>
            <p class="text-xs text-stone-600 dark:text-stone-500 mt-1">3 days ago</p>
          </div>
        </a>
      </div>
    </div>

    <!-- Newsletter & Contact -->
    <div>
      <h3 class="text-lg font-semibold text-stone-900 dark:text-stone-200 mb-6 uppercase tracking-wider relative group">
        Stay Connected
        <span class="block h-1 w-8 bg-red-700 dark:bg-red-500 absolute bottom-0 left-0 transition-all duration-300 group-hover:w-16"></span>
      </h3>
      <p class="text-sm text-stone-700 dark:text-stone-400 mb-4">Subscribe to our newsletter for daily updates straight to your inbox.</p>
      <form class="flex flex-col space-y-3">
        <input type="email" placeholder="Your email address" aria-label="Your email address" class="px-4 py-2 rounded-md bg-stone-50 border border-stone-300 dark:bg-stone-800 dark:border-stone-700 text-stone-800 dark:text-stone-200 focus:ring-2 focus:ring-red-700 dark:focus:ring-red-500 focus:border-transparent outline-none transition-all duration-200">
        <button type="submit" class="bg-red-700 hover:bg-red-800 dark:bg-red-500 dark:hover:bg-red-600 text-amber-100 font-bold py-2 px-4 rounded-md transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-red-700 dark:focus:ring-red-500 focus:ring-offset-2 focus:ring-offset-amber-100 dark:focus:ring-offset-stone-900 shadow-md text-sm uppercase tracking-wider">
          Subscribe
        </button>
      </form>
      <div class="mt-8">
        <h4 class="text-md font-semibold text-stone-900 dark:text-stone-200 mb-3">Quick Links</h4>
        <ul class="space-y-2 text-sm">
          <li><a href="#" class="text-stone-700 dark:text-stone-400 hover:text-red-700 dark:hover:text-red-500 transition-colors duration-200">About Us</a></li>
          <li><a href="#" class="text-stone-700 dark:text-stone-400 hover:text-red-700 dark:hover:text-red-500 transition-colors duration-200">Careers</a></li>
          <li><a href="#" class="text-stone-700 dark:text-stone-400 hover:text-red-700 dark:hover:text-red-500 transition-colors duration-200">Press Room</a></li>
          <li><a href="#" class="text-stone-700 dark:text-stone-400 hover:text-red-700 dark:hover:text-red-500 transition-colors duration-200">Privacy Policy</a></li>
          <li><a href="#" class="text-stone-700 dark:text-stone-400 hover:text-red-700 dark:hover:text-red-500 transition-colors duration-200">Terms of Service</a></li>
        </ul>
      </div>
    </div>

  </div>

  <!-- Footer Bottom / Copyright -->
  <div class="mt-12 pt-8 border-t border-stone-300 dark:border-stone-700 text-center text-sm text-stone-600 dark:text-stone-500">
    <p>&copy; 2023 The Daily Gazette. All rights reserved. <span class="hidden md:inline">Designed with a nod to Bauhaus principles and timeless journalism.</span></p>
  </div>
</footer>

Footer Navigation Component

A simple, responsive footer navigation component with a warm, sunset-inspired color scheme, designed for fashion/beauty brands. Features subtle hover effects and dark mode support.

Open Preview

                <footer class="bg-gradient-to-r from-orange-400 to-red-500 py-8 dark:from-gray-900 dark:to-gray-800 text-white font-sans">
  <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 text-center md:text-left">
      <div class="mb-4 md:mb-0">
        <h3 class="text-2xl font-bold mb-2 tracking-wide text-yellow-100 dark:text-gray-100">Luminous Threads</h3>
        <p class="text-orange-100 dark:text-gray-400 text-sm">&copy; 2023 All rights reserved.</p>
      </div>

      <nav class="flex flex-wrap justify-center md:justify-end gap-x-6 gap-y-2 mb-4 md:mb-0">
        <a href="#" class="text-white hover:text-yellow-200 dark:hover:text-gray-300 transition-colors duration-300 transform hover:scale-105 origin-center text-sm font-medium">Shop</a>
        <a href="#" class="text-white hover:text-yellow-200 dark:hover:text-gray-300 transition-colors duration-300 transform hover:scale-105 origin-center text-sm font-medium">Collections</a>
        <a href="#" class="text-white hover:text-yellow-200 dark:hover:text-gray-300 transition-colors duration-300 transform hover:scale-105 origin-center text-sm font-medium">About Us</a>
        <a href="#" class="text-white hover:text-yellow-200 dark:hover:text-gray-300 transition-colors duration-300 transform hover:scale-105 origin-center text-sm font-medium">Contact</a>
        <a href="#" class="text-white hover:text-yellow-200 dark:hover:text-gray-300 transition-colors duration-300 transform hover:scale-105 origin-center text-sm font-medium">Privacy Policy</a>
      </nav>

      <div class="flex gap-4">
        <a href="#" aria-label="Facebook" class="text-white hover:text-yellow-200 dark:hover:text-gray-300 transition-transform duration-300 transform hover:rotate-6">
          <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.33V22c5.967-.759 10.5-5.623 10.5-11z" clip-rule="evenodd" />
          </svg>
        </a>
        <a href="#" aria-label="Instagram" class="text-white hover:text-yellow-200 dark:hover:text-gray-300 transition-transform duration-300 transform hover:rotate-6">
          <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.815.034 1.488.17 2.071.467.579.289.979.629 1.324.973.344.344.684.744.973 1.324.297.583.433 1.256.467 2.07.043.93.056 1.286.056 3.715s-.013 2.784-.056 3.715c-.034.814-.17 1.488-.467 2.071-.289.579-.629.979-.973 1.324-.344.344-.744.684-1.324.973-.583.297-1.256.433-2.07.467-.93.043-1.286.056-3.715.056s-2.784-.013-3.715-.056c-.814-.034-1.488-.17-2.071-.467-.579-.289-.979-.629-1.324-.973-.344-.344-.684-.744-.973-1.324-.297-.583-.433-1.256-.467-2.07-.043-.93-.056-1.286-.056-3.715s.013-2.784.056-3.715c.034-.814.17-1.488.467-2.071.289-.579.629-.979.973-1.324.344-.344.744-.684 1.324-.973.583-.297 1.256-.433 2.07-.467C9.531 2.013 9.886 2 12.315 2zm0 2.18c-2.793 0-3.138.014-4.144.058-.707.03-1.127.135-1.424.28-.277.137-.48.243-.68.443-.199.2-.306.402-.443.68-.145.297-.25.717-.28 1.424-.044 1.006-.058 1.351-.058 4.144s.014 3.138.058 4.144c.03.707.135 1.127.28 1.424.137.277.243.48.443.68.2.199.402.306.68.443.297.145.717.25 1.424.28 1.006.044 1.351.058 4.144.058s3.138-.014 4.144-.058c.707-.03 1.127-.135 1.424-.28.277-.137.48-.243.68-.443.199-.2.306-.402.443-.68.145-.297.25-.717.28-1.424.044-1.006.058-1.351.058-4.144s-.014-3.138-.058-4.144c-.03-.707-.135-1.127-.28-1.424-.137-.277-.243-.48-.443-.68-.199-.2-.402-.306-.68-.443-.297-.145-.717-.25-1.424-.28-1.006-.044-1.351-.058-4.144-.058zm0 3.655c-2.464 0-4.475 2.01-4.475 4.475s2.01 4.475 4.475 4.475 4.475-2.01 4.475-4.475-2.01-4.475-4.475-4.475zM12.315 15.6c-1.815 0-3.288-1.472-3.288-3.288s1.472-3.288 3.288-3.288 3.288 1.472 3.288 3.288-1.472 3.288-3.288 3.288zm5.237-.962a1.21 1.21 0 011.088-1.088c.45-.07.96-.118 1.488-.135.344-.01.59-.018.736.002.392.052.793.18 1.161.356.368.175.688.42 1.22.955.532.532.775.852.955 1.22.175.368.304.769.356 1.161.018.146.01.392.002.736-.017.528-.065 1.038-.135 1.488-.103.68-.225 1.1-.383 1.341-.157.24-.351.4-.567.567-.216.216-.373.41-.567.567-.24.157-.661.279-1.341.383-.45.07-.96.118-1.488.135-.344.01-.59.018-.736-.002-.392-.052-.793-.18-1.161-.356-.368-.175-.688-.42-1.22-.955-.532-.532-.775-.852-.955-1.22-.175-.368-.304-.769-.356-1.161-.018-.146-.01-.392-.002-.736.017-.528.065-1.038.135-1.488.103-.68.225-1.1.383-1.341.157-.24.351-.4.567-.567zm-.432-8.583a.965.965 0 01.965-.965.965.965 0 01.965.965.965.965 0 01-.965.965.965.965 0 01-.965-.965z" clip-rule="evenodd" />
          </svg>
        </a>
      </div>
    </div>
  </div>
</footer>

Footer Navigation Component - Monospace/Developer Style

A complex, responsive footer navigation component designed for agriculture/farming websites, featuring a monospace/developer aesthetic with a gradient rainbow color scheme and dark mode support.

Open Preview

                <footer class="bg-violet-950 text-emerald-200 dark:bg-black font-mono text-[0.8rem] md:text-[0.9rem] lg:text-[1rem] p-6 lg:p-10 border-t-4 border-l-2 border-r-2 border-b-2 tracking-tighter" style="border-image: linear-gradient(to right, #ef4444, #f97316, #eab308, #22c55e, #3b82f6, #6366f1, #a855f7) 1;">
  <div class="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 md:gap-12">
    
    <!-- Company Info & Logo (ASCII Art style) -->
    <div class="flex flex-col items-start">
      <pre class="text-xl md:text-2xl lg:text-3xl font-bold mb-4 bg-clip-text text-transparent" style="background-image: linear-gradient(to right, #ef4444, #f97316, #eab308);">_FARMBOT_</pre>
      <p class="mb-4 leading-relaxed">// Precision Agriculture Solutions<br>// Est. 2023 // All rights reserved.</p>
      <div class="flex space-x-3 mt-auto">
        <a href="#" class="transition-colors duration-300 hover:text-emerald-400"><span class="sr-only">GitHub</span><svg class="w-5 h-5" 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.83 9.504.5.092.682-.217.682-.483 0-.237-.008-.865-.013-1.7c-2.782.607-3.369-1.34-3.369-1.34-.454-1.156-1.11-1.464-1.11-1.464-.908-.618.069-.607.069-.607 1.002.072 1.527 1.027 1.527 1.027.89 1.529 2.347 1.085 2.91.828.092-.643.35-1.085.635-1.332-2.22-.251-4.555-1.114-4.555-4.942 0-1.096.393-1.993 1.03-2.69-.103-.252-.446-1.277.098-2.65 0 0 .84-.27 2.75 1.025A9.432 9.432 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.373.202 2.398.099 2.65.648.697 1.028 1.594 1.028 2.69 0 3.838-2.339 4.686-4.566 4.935.359.307.678.915.678 1.846 0 1.335-.012 2.41-.012 2.73 0 .268.18.579.688.482A10.05 10.05 0 0022 12.017C22 6.484 17.522 2 12 2Z" clip-rule="evenodd" /></svg></a>
        <a href="#" class="transition-colors duration-300 hover:text-emerald-400"><span class="sr-only">Twitter</span><svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M8.29 20.251c1.32 0 2.428-.482 3.313-1.423-.42-.01-.796-.126-1.09-.344-.294-.216-.525-.503-.693-.868-.168-.364-.252-.76-.252-1.189 0-.426.084-.816.252-1.17s.4-.645.717-.899c.316-.254.67-.457 1.06-.61a.987.987 0 001.09.28.986.986 0 00.56-.379c.196-.285.344-.61.444-.973.1-.36.147-.745.147-1.15-.008-.66-.192-1.226-.55-1.706-.358-.48-.82-.82-1.385-1.02-.566-.2-.962-.294-1.189-.283-.404.01-.762.1-1.077.268-.314.162-.572.392-.774.69-.202.298-.352.645-.448 1.03-.095.385-.143.784-.143 1.198 0 1.25.418 2.302 1.254 3.155.836.852 1.848 1.278 3.037 1.278.47 0 .91-.122 1.31-.365.39-.24.717-.58.98-.98.263-.4.4-.84.4-1.32 0-.203-.03-.396-.088-.58-.058-.184-.14-.356-.248-.517-.107-.16-.23-.3-.368-.415-.138-.112-.29-.197-.456-.253-.166-.056-.34-.084-.52-.084-.44 0-.79.08-1.05.23-.26.15-.46.33-.6.54-.14.21-.24.44-.3.69-.06.25-.09.5-.09.76 0 .43.204.77.61 1.02.407.25.92.375 1.54.375.438 0 .866-.093 1.285-.278.418-.185.78-.44 1.085-.76-.795.342-1.57.513-2.325.513-1.636 0-3.003-.548-4.098-1.645-1.094-1.102-1.64-2.457-1.64-4.062 0-.96.223-1.85.67-2.67.447-.82 1.066-1.48 1.85-1.98.784-.5 1.63-.75 2.54-.75.7 0 1.34.135 1.92.405.58.27.94.59 1.08.96.14.37.16.89.06 1.55-.1.66-.4 1.38-1 2.15l-.83.99c-.27.32-.4.65-.4.98 0 .44.2.78.6.99.4.21.92.31 1.55.31h.06c.38 0 .76-.04 1.13-.12.37-.08.7-.21 1-.4l.87-.5c.29-.17.51-.38.67-.62.16-.24.27-.5.33-.78.06-.28.09-.56.09-.844 0-.66-.192-1.226-.55-1.706-.358-.48-.82-.82-1.385-1.02s-1.1-.3-1.4-.3h-.1c-.48 0-.91.07-1.29.21-.37.14-.69.34-.96.6-.27.26-.48.56-.63.9-.15.34-.23.69-.23 1.05 0 .96.34 1.77 1.03 2.44.69.67 1.6.99 2.73.99 1.13 0 2.04-.33 2.73-1 2.87-2.85 2-.128 2.226-.402 1.258-2.68 1.956-5.07 2.09-.37.26-1.6 3.65-1.605 5.578 0 1.2-.5 2.21-1.5 3.03s-2.09 1.23-3.32 1.23c-.76 0-1.48-.12-2.16-.36l.28-.15c.34-.18.66-.41.97-.69.3-.28.58-.6.83-.97.25-.37.45-.77.61-1.2c.16-.43.25-.88.27-1.37h.02c.07-.37.1-.73.1-.96 0-.2-.014-.38-.04-.54-.028-.16-.07-.31-.13-.45-.06-.14-.14-.26-.24-.37-.1-.11-.22-.2-.36-.28-.14-.08-.29-.13-.46-.16-.17-.03-.35-.04-.54-.04h-.05c-.32 0-.65.04-.98.11s-.64.18-.95.29c-.31.11-.6.25-.86.4-.26.15-.48.33-.66.54-.18.21-.32.44-.42.69-.1.25-.15.5-.15.76 0 .43.204.77.61 1.02.407.25.92.375 1.54.375.438 0 .866-.093 1.285-.278.418-.185.78-.44 1.085-.76-.795.342-1.57.513-2.325.513-1.636 0-3.003-.548-4.098-1.645-1.094-1.102-1.64-2.457-1.64-4.062 0-.96.223-1.85.67-2.67.447-.82 1.066-1.48 1.85-1.98.784-.5 1.63-.75 2.54-.75.7 0 1.34.135 1.92.405.58.27.94.59 1.08.96.14.37.16.89.06 1.55-.1.66-.4 1.38-1 2.15l-.83.99c-.27.32-.4.65-.4.98 0 .44.2.78.6.99.4.21.92.31 1.55.31h.06c.38 0 .76-.04 1.13-.12.37-.08.7-.21 1-.4l.87-.5c.29-.17.51-.38.67-.62.16-.24.27-.5.33-.78.06-.28.09-.56.09-.844 0-.66-.192-1.226-.55-1.706-.358-.48-.82-.82-1.385-1.02s-1.1-.3-1.4-.3h-.1c-.48 0-.91.07-1.29.21-.37.14-.69.34-.96.6-.27.26-.48.56-.63.9-.15.34-.23.69-.23 1.05 0 .96.34 1.77 1.03 2.44.69.67 1.6.99 2.73.99 1.13 0 2.04-.33 2.73-1 2.87-2.85 2-.128 2.226-.402 1.258-2.68 1.956-5.07 2.09-.37.26-1.6 3.65-1.605 5.578 0 1.2-.5 2.21-1.5 3.03s-2.09 1.23-3.32 1.23c-.76 0-1.48-.12-2.16-.36l.28-.15c.34-.18.66-.41.97-.69.3-.28.58-.6.83-.97.25-.37.45-.77.61-1.2c.16-.43.25-.88.27-1.37h.02c.07-.37.1-.73.1-.96 0-.2-.014-.38-.04-.54-.028-.16-.07-.31-.13-.45-.06-.14-.14-.26-.24-.37-.1-.11-.22-.2-.36-.28-.14-.08-.29-.13-.46-.16-.17-.03-.35-.04-.54-.04h-.05c-.32 0-.65.04-.98.11s-.64.18-.95.29c-.31.11-.6.25-.86.4-.26.15-.48.33-.66.54-.18.21-.32.44-.42.69-.1.25-.15.5-.15.76 0 .43.204.77.61 1.02.407.25.92.375 1.54.375.438 0 .866-.093 1.285-.278.418-.185.78-.44 1.085-.76-.795.342-1.57.513-2.325.513-1.636 0-3.003-.548-4.098-1.645-1.094-1.102-1.64-2.457-1.64-4.062 0-.96.223-1.85.67-2.67.447-.82 1.066-1.48 1.85-1.98.784-.5 1.63-.75 2.54-.75.7 0 1.34.135 1.92.405.58.27.94.59 1.08.96.14.37.16.89.06 1.55-.1.66-.4 1.38-1 2.15l-.83.99c-.27.32-.4.65-.4.98 0 .44.2.78.6.99.4.21.92.31 1.55.31h.06c.38 0 .76-.04 1.13-.12.37-.08.7-.21 1-.4l.87-.5c.29-.17.51-.38.67-.62.16-.24.27-.5.33-.78.06-.28.09-.56.09-.844 0-.66-.192-1.226-.55-1.706-.358-.48-.82-.82-1.385-1.02s-1.1-.3-1.4-.3h-.1c-.48 0-.91.07-1.29.21-.37.14-.69.34-.96.6-.27.26-.48.56-.63.9-.15.34-.23.69-.23 1.05 0 .96.34 1.77 1.03 2.44.69.67 1.6.99 2.73.99 1.13 0 2.04-.33 2.73-1 2.87-2.85 2-.128 2.226-.402 1.258-2.68 1.956-5.07 2.09-.37.26-1.6 3.65-1.605 5.578 0 1.2-.5 2.21-1.5 3.03s-2.09 1.23-3.32 1.23c-.76 0-1.48-.12-2.16-.36l.28-.15c.34-.18.66-.41.97-.69.3-.28.58-.6.83-.97.25-.37.45-.77.61-1.2c-.795.342-1.57.513-2.325.513-1.636 0-3.003-.548-4.098-1.645-1.094-1.102-1.64-2.457-1.64-4.062 0-.96.223-1.85.67-2.67.447-.82 1.066-1.48 1.85-1.98.784-.5 1.63-.75 2.54-.75.7 0 1.34.135 1.92.405.58.27.94.59 1.08.96.14.37.16.89.06 1.55-.1.66-.4 1.38-1 2.15l-.83.99c-.27.32-.4.65-.4.98 0 .44.2.78.6.99.4.21.92.31 1.55.31h.06c.38 0 .76-.04 1.13-.12.37-.08.7-.21 1-.4l.87-.5c.29-.17.51-.38.67-.62.16-.24.27-.5.33-.78.06-.28.09-.56.09-.844 0-.66-.192-1.226-.55-1.706-.358-.48-.82-.82-1.385-1.02s-1.1-.3-1.4-.3h-.1c-.48 0-.91.07-1.29.21-.37.14-.69.34-.96.6-.27.26-.48.56-.63.9-.15.34-.23.69-.23 1.05 0 .96.34 1.77 1.03 2.44.69.67 1.6.99 2.73.99 1.13 0 2.04-.33 2.73-1 2.87-2.85 2-.128 2.226-.402 1.258-2.68 1.956-5.07 2.09-.37.26-1.6 3.65-1.605 5.578 0 1.2-.5 2.21-1.5 3.03s-2.09 1.23-3.32 1.23c-.76 0-1.48-.12-2.16-.36l.28-.15c.34-.18.66-.41.97-.69.3-.28.58-.6.83-.97.25-.37.45-.77.61-1.2c.16-.43.25-.88.27-1.37h.02c.07-.37.1-.73.1-.96 0-.2-.014-.38-.04-.54-.028-.16-.07-.31-.13-.45-.06-.14-.14-.26-.24-.37-.1-.11-.22-.2-.36-.28-.14-.08-.29-.13-.46-.16-.17-.03-.35-.04-.54-.04h-.05c-.32 0-.65.04-.98.11s-.64.18-.95.29c-.31.11-.6.25-.86.4-.26.15-.48.33-.66.54-.18.21-.32.44-.42.69-.1.25-.15.5-.15.76 0 .43.204.77.61 1.02.407.25.92.375 1.54.375.438 0 .866-.093 1.285-.278.418-.185.78-.44 1.085-.76-.795.342-1.57.513-2.325.513-1.636 0-3.003-.548-4.098-1.645-1.094-1.102-1.64-2.457-1.64-4.062 0-.96.223-1.85.67-2.67.447-.82 1.066-1.48 1.85-1.98.784-.5 1.63-.75 2.54-.75.7 0 1.34.135 1.92.405.58.27.94.59 1.08.96.14.37.16.89.06 1.55-.1.66-.4 1.38-1 2.15l-.83.99c-.27.32-.4.65-.4.98 0 .44.2.78.6.99.4.21.92.31 1.55.31h.06c.38 0 .76-.04 1.13-.12.37-.08.7-.21 1-.4l.87-.5c.29-.17.51-.38.67-.62.16-.24.27-.5.33-.78.06-.28.09-.56.09-.844 0-.66-.192-1.226-.55-1.706-.358-.48-.82-.82-1.385-1.02s-1.1-.3-1.4-.3h-.1c-.48 0-.91.07-1.29.21-.37.14-.69.34-.96.6-.27.26-.48.56-.63.9-.15.34-.23.69-.23 1.05 0 .96.34 1.77 1.03 2.44.69.67 1.6.99 2.73.99 1.13 0 2.04-.33 2.73-1 2.87-2.85 2-.128 2.226-.402 1.258-2.68 1.956-5.07 2.09-.37.26-1.6 3.65-1.605 5.578 0 1.2-.5 2.21-1.5 3.03s-2.09 1.23-3.32 1.23c-.76 0-1.48-.12-2.16-.36l.28-.15c.34-.18.66-.41.97-.69.3-.28.58-.6.83-.97.25-.37.45-.77.61-1.2c.16-.43.25-.88.27-1.37h.02c.07-.37.1-.73.1-.96 0-.2-.014-.38-.04-.54-.028-.16-.07-.31-.13-.45-.06-.14-.14-.26-.24-.37-.1-.11-.22-.2-.36-.28-.14-.08-.29-.13-.46-.16-.17-.03-.35-.04-.54-.04h-.05c-.32 0-.65.04-.98.11s-.64.18-.95.29c-.31.11-.6.25-.86.4-.26.15-.48.33-.66.54-.18.21-.32.44-.42.69-.1.25-.15.5-.15.76 0 .43.204.77.61 1.02.407.25.92.375 1.54.375.438 0 .866-.093 1.285-.278.418-.185.78-.44 1.085-.76-.795.342-1.57.513-2.325.513-1.636 0-3.003-.548-4.098-1.645-1.094-1.102-1.64-2.457-1.64-4.062 0-.96.223-1.85.67-2.67.447-.82 1.066-1.48 1.85-1.98.784-.5 1.63-.75 2.54-.75.7 0 1.34.135 1.92.405.58.27.94.59 1.08.96.14.37.16.89.06 1.55-.1.66-.4 1.38-1 2.15l-.83.99c-.27.32-.4.65-.4.98 0 .44.2.78.6.99.4.21.92.31 1.55.31h.06c.38 0 .76-.04 1.13-.12.37-.08.7-.21 1-.4l.87-.5c.29-.17.51-.38.67-.62.16-.24.27-.5.33-.78.06-.28.09-.56.09-.844 0-.66-.192-1.226-.55-1.706-.358-.48-.82-.82-1.385-1.02s-1.1-.3-1.4-.3h-.1c-.48 0-.91.07-1.29.21-.37.14-.69.34-.96.6-.27.26-.48.56-.63.9-.15.34-.23.69-.23 1.05 0 .96.34 1.77 1.03 2.44.69.67 1.6.99 2.73.99 1.13 0 2.04-.33 2.73-1 2.87-2.85 2-.128 2.226-.402 1.258-2.68 1.956-5.07 2.09-.37.26-1.6 3.65-1.605 5.578 0 1.2-.5 2.21-1.5 3.03s-2.09 1.23-3.32 1.23c-.76 0-1.48-.12-2.16-.36l.28-.15c.34-.18.66-.41.97-.69.3-.28.58-.6.83-.97.25-.37.45-.77.61-1.2c.16-.43.25-.88.27-1.37h.02c.07-.37.1-.73.1-.96 0-.2-.014-.38-.04-.54-.028-.16-.07-.31-.13-.45-.06-.14-.14-.26-.24-.37-.1-.11-.22-.2-.36-.28-.14-.08-.29-.13-.46-.16-.17-.03-.35-.04-.54-.04h-.05c-.32 0-.65.04-.98.11s-.64.18-.95.29c-.31.11-.6.25-.86.4-.26.15-.48.33-.66.54-.18.21-.32.44-.42.69-.1.25-.15.5-.15.76 0 .43.204.77.61 1.02.407.25.92.375 1.54.375.438 0 .866-.093 1.285-.278v.01ZM12 4c.621 0 1.24.032 1.854.095-.506-.217-1.04-.413-1.58-.592-.54-.179-1.09-.34-1.65-.482-.56-.142-1.12-.27-1.68-.383-.56-.112-1.12-.206-1.68-.283C6.477.01 2 4.475 2 10.017c0 4.425 2.865 8.18 6.83 9.504.5.092.682-.217.682-.483 0-.237-.008-.865-.013-1.7c-2.782.607-3.369-1.34-3.369-1.34-.454-1.156-1.11-1.464-1.11-1.464-.908-.618.069-.607.069-.607 1.002.072 1.527 1.027 1.527 1.027.89 1.529 2.347 1.085 2.91.828.092-.643.35-1.085.635-1.332-2.22-.251-4.555-1.114-4.555-4.942 0-1.096.393-1.993 1.03-2.69-.103-.252-.446-1.277.098-2.65 0 0 .84-.27 2.75 1.025A9.432 9.432 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.373.202 2.398.099 2.65.648.697 1.028 1.594 1.028 2.69 0 3.838-2.339 4.686-4.566 4.935.359.307.678.915.678 1.846 0 1.335-.012 2.41-.012 2.73 0 .268.18.579.688.482A10.05 10.05 0 0022 12.017C22 6.484 17.522 2 12 2Z" clip-rule="evenodd" /></svg></a>
        <a href="#" class="transition-colors duration-300 hover:text-emerald-400"><span class="sr-only">LinkedIn</span><svg class="w-5 h-5" 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-.75-1.764 1.75-1.764 1.75.79 1.75 1.764-1.75 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.764 7 2.677v6.558z" clip-rule="evenodd" /></svg></a>
      </div>
    </div>

    <!-- Navigation Links -->
    <div>
      <h3 class="text-orange-400 font-bold mb-4 tracking-wide border-b border-dotted pb-1">// NAVIGATION</h3>
      <ul class="space-y-2">
        <li><a href="#" class="hover:text-emerald-400 transition-colors duration-200">> About FarmBot</a></li>
        <li><a href="#" class="hover:text-emerald-400 transition-colors duration-200">> Our Technology</a></li>
        <li><a href="#" class="hover:text-emerald-400 transition-colors duration-200">> Precision Farming</a></li>
        <li><a href="#" class="hover:text-emerald-400 transition-colors duration-200">> Crop Optimization</a></li>
        <li><a href="#" class="hover:text-emerald-400 transition-colors duration-200">> Case Studies</a></li>
      </ul>
    </div>

    <!-- Support & Resources -->
    <div>
      <h3 class="text-blue-400 font-bold mb-4 tracking-wide border-b border-dotted pb-1">// SUPPORT & DOCS</h3>
      <ul class="space-y-2">
        <li><a href="#" class="hover:text-emerald-400 transition-colors duration-200">> FAQ</a></li>
        <li><a href="#" class="hover:text-emerald-400 transition-colors duration-200">> Get Started Guide</a></li>
        <li><a href="#" class="hover:text-emerald-400 transition-colors duration-200">> API Reference</a></li>
        <li><a href="#" class="hover:text-emerald-400 transition-colors duration-200">> Community Forum</a></li>
        <li><a href="#" class="hover:text-emerald-400 transition-colors duration-200">> Contact Support</a></li>
      </ul>
    </div>

    <!-- Legal & Policies -->
    <div>
      <h3 class="text-purple-400 font-bold mb-4 tracking-wide border-b border-dotted pb-1">// LEGAL & POLICY</h3>
      <ul class="space-y-2">
        <li><a href="#" class="hover:text-emerald-400 transition-colors duration-200">> Terms of Service</a></li>
        <li><a href="#" class="hover:text-emerald-400 transition-colors duration-200">> Privacy Policy</a></li>
        <li><a href="#" class="hover:text-emerald-400 transition-colors duration-200">> Cookie Policy</a></li>
        <li><a href="#" class="hover:text-emerald-400 transition-colors duration-200">> Licensing</a></li>
        <li><a href="#" class="hover:text-emerald-400 transition-colors duration-200">> Accessibility</a></li>
      </ul>
    </div>

    <!-- Newsletter Signup (Terminal-like) -->
    <div class="lg:col-span-4 mt-8 flex flex-col items-center">
      <h3 class="text-pink-400 font-bold mb-4 tracking-wide">// SUBSCRIBE FOR UPDATES</h3>
      <p class="mb-4 text-center max-w-lg">Receive the latest agricultural tech insights and FarmBot news directly to your inbox. <span class="text-orange-300">[No spam. Ever.]</span></p>
      <form class="w-full max-w-sm flex flex-col md:flex-row gap-2">
        <label for="email-input" class="sr-only">Email Address</label>
        <input id="email-input" type="email" placeholder="> enter_email_address..." class="flex-grow min-w-0 p-3 rounded-md bg-transparent border border-emerald-400 text-emerald-200 placeholder:text-gray-500 focus:outline-none focus:ring-2 focus:ring-emerald-400 dark:bg-zinc-800 dark:border-emerald-600 dark:placeholder:text-zinc-600 dark:focus:ring-emerald-600 text-sm md:text-base" aria-label="Email address for newsletter">
        <button type="submit" class="p-3 rounded-md bg-gradient-to-r from-green-500 to-blue-500 text-stone-900 font-bold hover:from-green-600 hover:to-blue-600 focus:outline-none focus:ring-2 focus:ring-emerald-400 uppercase text-sm md:text-base transition-all duration-300 ease-in-out">
          <span class="block group-hover:hidden">[SEND]</span>
          <span class="hidden group-hover:block">[INITIATE_SUBSCRIPTION]</span>
        </button>
      </form>
    </div>

  </div>

  
  <div class="mt-10 pt-6 border-t border-dashed border-gray-700 dark:border-gray-500 text-center text-gray-500 text-xs md:text-sm">
    <p class="mb-2">&copy; 2023 FarmBot Inc. &middot; <span class="text-gray-600 dark:text-gray-400">// Code Licensed Under MIT.</span></p>
    <p><code>[STATUS_REPORT: OPERATIONAL] [VERSION: 1.0.0] [DEPLOYMENT_DATE: 2023-10-27]</code></p>
  </div>
</footer>

NeonGlowFooterNavigation

A responsive footer navigation component with neon/glow effects, designed for music/audio platforms. Features a black and white color scheme with a vibrant accent color, dark mode support, and semantic HTML.

Open Preview

                <footer class="bg-zinc-950 text-gray-400 py-8 px-4 dark:bg-black w-full shadow-2xl shadow-fuchsia-500/20">
  <div class="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 gap-8 ">

    <!-- Section 1: Logo & Slogan -->
    <div class="col-span-full md:col-span-1 lg:col-span-1 flex flex-col items-center md:items-start mb-6 md:mb-0">
      <a href="#" class="text-fuchsia-400 text-3xl font-bold tracking-wide relative 
                  before:content-[''] before:absolute before:-inset-0.5 before:block before:bg-fuchsia-500/30 before:rounded-lg before:blur-sm before:animate-pulse 
                  after:content-[''] after:absolute after:-inset-0.5 after:block after:bg-fuchsia-500/10 after:rounded-lg after:blur-md after:animate-pulse">
        <span class="relative z-10">BeatWave</span>
      </a>
      <p class="mt-4 text-sm text-gray-500 dark:text-gray-600">Ignite Your Sound</p>
      <div class="flex space-x-4 mt-6">
        <a href="#" class="text-gray-500 hover:text-fuchsia-400 transition-colors duration-300 relative group">
          <svg class="w-6 h-6 group-hover:drop-shadow-[0_0_8px_rgba(236,72,153,0.8)]" 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.33V22H12c5.523 0 10-4.477 10-10Z" clip-rule="evenodd" />
          </svg>
        </a>
        <a href="#" class="text-gray-500 hover:text-fuchsia-400 transition-colors duration-300 relative group">
          <svg class="w-6 h-6 group-hover:drop-shadow-[0_0_8px_rgba(236,72,153,0.8)]" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path fill-rule="evenodd" d="M19.5 2h-15A2.5 2.5 0 0 0 2 4.5v15A2.5 2.5 0 0 0 4.5 22h15a2.5 2.5 0 0 0 2.5-2.5v-15A2.5 2.5 0 0 0 19.5 2ZM17.1 v-2.2H14.9c-.83 0-1.1.33-1.1 1.07v1.13h2.4l-.32 2.3h-2.08v6.7h-2.73v-6.6a1.1 1.1 0 0 1-1.12-1.1c0-.49 1.12-1.07 1.12-2.3v-2.3c0-2.45 1.5-3.8 3.75-3.8 1.05 0 2.2.14 2.2.14v2.5Z" clip-rule="evenodd" />
          </svg>
        </a>
        <a href="#" class="text-gray-500 hover:text-fuchsia-400 transition-colors duration-300 relative group">
          <svg class="w-6 h-6 group-hover:drop-shadow-[0_0_8px_rgba(236,72,153,0.8)]" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path fill-rule="evenodd" d="M.931 7.28c-.378-.58-.707-.58-.87-.312C-.07 7.218.006 7.636.006 8.016v8.435c0 .38-.076.798-.016.963.163.267.492.267.87.312l4.898-.052 8.358 8.36c.58.58 1.52.58 2.1 0l6.21-6.21c.58-.58.58-1.52 0-2.1l-6.21-6.21-8.358-8.36L.93.948h.001Z" clip-rule="evenodd" />
          </svg>
        </a>
      </div>
    </div>

    <!-- Section 2: Discover -->
    <div>
      <h3 class="text-lg font-semibold text-white dark:text-gray-300 mb-4 relative 
                   before:absolute before:left-0 before:bottom-0 before:w-full before:h-0.5 before:bg-fuchsia-400 before:scale-x-0 before:transition-transform before:duration-300 before:origin-left hover:before:scale-x-100">
        Discover
      </h3>
      <ul class="space-y-3">
        <li><a href="#" class="text-gray-500 hover:text-fuchsia-400 transition-all duration-300 relative group">
          <span class="relative z-10">New Releases</span>
          <span class="absolute inset-0 bg-fuchsia-500/20 opacity-0 group-hover:opacity-100 group-hover:blur-sm transition-opacity duration-300 -z-0 rounded-sm"></span>
        </a></li>
        <li><a href="#" class="text-gray-500 hover:text-fuchsia-400 transition-all duration-300 relative group">
          <span class="relative z-10">Top Charts</span>
          <span class="absolute inset-0 bg-fuchsia-500/20 opacity-0 group-hover:opacity-100 group-hover:blur-sm transition-opacity duration-300 -z-0 rounded-sm"></span>
        </a></li>
        <li><a href="#" class="text-gray-500 hover:text-fuchsia-400 transition-all duration-300 relative group">
          <span class="relative z-10">Genres</span>
          <span class="absolute inset-0 bg-fuchsia-500/20 opacity-0 group-hover:opacity-100 group-hover:blur-sm transition-opacity duration-300 -z-0 rounded-sm"></span>
        </a></li>
        <li><a href="#" class="text-gray-500 hover:text-fuchsia-400 transition-all duration-300 relative group">
          <span class="relative z-10">Artists</span>
          <span class="absolute inset-0 bg-fuchsia-500/20 opacity-0 group-hover:opacity-100 group-hover:blur-sm transition-opacity duration-300 -z-0 rounded-sm"></span>
        </a></li>
      </ul>
    </div>

    <!-- Section 3: Community -->
    <div>
      <h3 class="text-lg font-semibold text-white dark:text-gray-300 mb-4 relative 
                   before:absolute before:left-0 before:bottom-0 before:w-full before:h-0.5 before:bg-fuchsia-400 before:scale-x-0 before:transition-transform before:duration-300 before:origin-left hover:before:scale-x-100">
        Community
      </h3>
      <ul class="space-y-3">
        <li><a href="#" class="text-gray-500 hover:text-fuchsia-400 transition-all duration-300 relative group">
          <span class="relative z-10">Forums</span>
          <span class="absolute inset-0 bg-fuchsia-500/20 opacity-0 group-hover:opacity-100 group-hover:blur-sm transition-opacity duration-300 -z-0 rounded-sm"></span>
        </a></li>
        <li><a href="#" class="text-gray-500 hover:text-fuchsia-400 transition-all duration-300 relative group">
          <span class="relative z-10">Support</span>
          <span class="absolute inset-0 bg-fuchsia-500/20 opacity-0 group-hover:opacity-100 group-hover:blur-sm transition-opacity duration-300 -z-0 rounded-sm"></span>
        </a></li>
        <li><a href="#" class="text-gray-500 hover:text-fuchsia-400 transition-all duration-300 relative group">
          <span class="relative z-10">Help Center</span>
          <span class="absolute inset-0 bg-fuchsia-500/20 opacity-0 group-hover:opacity-100 group-hover:blur-sm transition-opacity duration-300 -z-0 rounded-sm"></span>
        </a></li>
      </ul>
    </div>

    <!-- Section 4: Company -->
    <div>
      <h3 class="text-lg font-semibold text-white dark:text-gray-300 mb-4 relative 
                   before:absolute before:left-0 before:bottom-0 before:w-full before:h-0.5 before:bg-fuchsia-400 before:scale-x-0 before:transition-transform before:duration-300 before:origin-left hover:before:scale-x-100">
        Company
      </h3>
      <ul class="space-y-3">
        <li><a href="#" class="text-gray-500 hover:text-fuchsia-400 transition-all duration-300 relative group">
          <span class="relative z-10">About Us</span>
          <span class="absolute inset-0 bg-fuchsia-500/20 opacity-0 group-hover:opacity-100 group-hover:blur-sm transition-opacity duration-300 -z-0 rounded-sm"></span>
        </a></li>
        <li><a href="#" class="text-gray-500 hover:text-fuchsia-400 transition-all duration-300 relative group">
          <span class="relative z-10">Careers</span>
          <span class="absolute inset-0 bg-fuchsia-500/20 opacity-0 group-hover:opacity-100 group-hover:blur-sm transition-opacity duration-300 -z-0 rounded-sm"></span>
        </a></li>
        <li><a href="#" class="text-gray-500 hover:text-fuchsia-400 transition-all duration-300 relative group">
          <span class="relative z-10">Press</span>
          <span class="absolute inset-0 bg-fuchsia-500/20 opacity-0 group-hover:opacity-100 group-hover:blur-sm transition-opacity duration-300 -z-0 rounded-sm"></span>
        </a></li>
        <li><a href="#" class="text-gray-500 hover:text-fuchsia-400 transition-all duration-300 relative group">
          <span class="relative z-10">Terms of Service</span>
          <span class="absolute inset-0 bg-fuchsia-500/20 opacity-0 group-hover:opacity-100 group-hover:blur-sm transition-opacity duration-300 -z-0 rounded-sm"></span>
        </a></li>
      </ul>
    </div>

    <!-- Section 5: Newsletter Signup -->
    <div class="col-span-full md:col-span-3 lg:col-span-1">
      <h3 class="text-lg font-semibold text-white dark:text-gray-300 mb-4 relative 
                   before:absolute before:left-0 before:bottom-0 before:w-full before:h-0.5 before:bg-fuchsia-400 before:scale-x-0 before:transition-transform before:duration-300 before:origin-left hover:before:scale-x-100">
        Stay Tuned
      </h3>
      <p class="text-sm text-gray-500 dark:text-gray-600 mb-4">Subscribe to our newsletter for the latest updates and exclusive content.</p>
      <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-grow px-4 py-2 bg-zinc-800 border-2 border-zinc-700 rounded-md text-white placeholder-gray-500
                      focus:outline-none focus:ring-2 focus:ring-fuchsia-500 focus:border-transparent 
                      shadow-inner shadow-zinc-700/50 dark:bg-zinc-900 dark:border-zinc-800 dark:shadow-zinc-800/50"
               placeholder="Enter your email">
        <button type="submit"
                class="px-6 py-2 bg-fuchsia-600 text-white font-medium rounded-md 
                       hover:bg-fuchsia-700 focus:outline-none focus:ring-2 focus:ring-fuchsia-500 focus:ring-offset-2 focus:ring-offset-zinc-950 
                       transition-all duration-300 relative overflow-hidden group
                       shadow-lg shadow-fuchsia-500/30
                       dark:shadow-fuchsia-500/40">
          <span class="relative z-10">Subscribe</span>
          <span class="absolute inset-0 bg-gradient-to-r from-fuchsia-500 to-purple-600 opacity-0 group-hover:opacity-100 
                       blur-sm group-hover:blur-[1px] transition-all duration-300"></span>
        </button>
      </form>
    </div>

  </div>

  <!-- Copyright -->
  <div class="mt-8 pt-8 border-t border-gray-800 text-center text-sm text-gray-500 dark:border-gray-700">
    &copy; 2023 BeatWave. All rights reserved.
  </div>
</footer>

Footer Navigation Component - Industrial Ocean

A complex, responsive footer navigation component in an industrial style with ocean/blue color scheme, suitable for event/conference websites. Includes multi-column links, social media icons, copyright, and dark mode support.

Open Preview

                <footer class="bg-sky-950 text-white dark:bg-gray-950 py-12 md:py-16 border-t-4 border-sky-700 dark:border-gray-800 font-sans">
  <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 lg:gap-12">
      <!-- Company Info / Logo -->
      <div class="col-span-1 lg:col-span-2 flex flex-col items-start">
        <h2 class="text-3xl font-extrabold text-sky-200 dark:text-sky-400 mb-4 tracking-tight uppercase">
          <span class="block">Event</span>
          <span class="block text-sky-400 dark:text-sky-200">Connect</span>
        </h2>
        <p class="text-sky-300 dark:text-gray-400 text-sm leading-relaxed mb-4">
          Bringing together minds, ideas, and innovations. Your premier platform for unforgettable events and conferences worldwide.
        </p>
        <div class="flex space-x-4">
          <a href="#" class="text-sky-400 hover:text-sky-200 dark:text-gray-400 dark:hover:text-gray-200 transition-colors duration-300">
            <svg class="h-6 w-6 fill-current" aria-hidden="true" focusable="false" data-prefix="fab" data-icon="facebook-f" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M279.14 288l14.22-92.66h-88.91v-60.13c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S260.43 0 223.75 0c-73.66 0-121.05 44.38-121.05 124.7v70.30H27.5v92.66h74.05V512h94.92V288z"></path></svg>
            <span class="sr-only">Facebook</span>
          </a>
          <a href="#" class="text-sky-400 hover:text-sky-200 dark:text-gray-400 dark:hover:text-gray-200 transition-colors duration-300">
            <svg class="h-6 w-6 fill-current" aria-hidden="true" focusable="false" data-prefix="fab" data-icon="twitter" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M459.37 151.716c.92 1.33 1.153 2.05 1.153 2.05 0 20.31-7.85 41.5-23.27 61.35-16.14 20.91-36.26 37.95-58.4 51.52-22.14 13.57-45.1 23.95-69.83 30.73-24.74 6.78-49.8 9.94-75.14 9.94-73.67 0-141.22-31.96-189.28-86.87-47.9-54.8-73.34-124.63-73.34-201.07 0-.32.02-.64.04-.96 0-.32.02-.64.04-.96.02-.32.04-.64.06-.96.04-.64.04-1.28.08-1.92.06-.96.12-1.92.18-2.88 0-1.28.02-2.56.04-3.84 0-.64.02-1.28.04-1.92 0-.64-.02-1.28-.04-1.92-.04-.64-.06-1.28-.1-1.92-.04-.64-.06-1.28-.1-1.92-.04-.64-.06-1.28-.1-1.92-.02-.32-.04-.64-.06-.96-.02-.32-.04-.64-.06-.96-.04-.64-.06-1.28-.1-1.92-.04-.64-.08-1.28-.12-1.92-.02-.32-.04-.64-.06-.96-.04-.64-.06-1.28-.1-1.92-.04-.64-.08-1.28-.12-1.92-.02-.32-.04-.64-.06-.96-.04-.64-.06-1.28-.1-1.92-.04-.64-.08-1.28-.12-1.92-.02-.32-.04-.64-.06-.96-.02-.32-.04-.64-.06-.96-.04-.64-.08-1.28-.12-1.92-.02-.32-.04-.64-.06-.96c.92 1.33 1.153 2.05 1.153 2.05 0 20.31-7.85 41.5-23.27 61.35-16.14 20.91-36.26 37.95-58.4 51.52-22.14 13.57-45.1 23.95-69.83 30.73-24.74 6.78-49.8 9.94-75.14 9.94-73.67 0-141.22-31.96-189.28-86.87-47.9-54.8-73.34-124.63-73.34-201.07 0-.32.02-.64.04-.96 0-.32.02-.64.04-.96.02-.32.04-.64.06-.96.04-.64.04-1.28.08-1.92.06-.96.12-1.92.18-2.88 0-1.28.02-2.56.04-3.84 0-.64.02-1.28.04-1.92 0-.64-.02-1.28-.04-1.92-.04-.64-.06-1.28-.1-1.92-.04-.64-.06-1.28-.1-1.92-.02-.32-.04-.64-.06-.96-.02-.32-.04-.64-.06-.96-.04-.64-.06-1.28-.1-1.92-.04-.64-.08-1.28-.12-1.92-.02-.32-.04-.64-.06-.96-.04-.64-.06-1.28-.1-1.92-.04-.64-.08-1.28-.12-1.92-.02-.32-.04-.64-.06-.96-.02-.32-.04-.64-.06-.96-.04-.64-.06-1.28-.1-1.92-.04-.64-.08-1.28-.12-1.92-.02-.32-.04-.64-.06-.96c.92 1.33 1.153 2.05 1.153 2.05 0 20.31-7.85 41.5-23.27 61.35-16.14 20.91-36.26 37.95-58.4 51.52-22.14 13.57-45.1 23.95-69.83 30.73-24.74 6.78-49.8 9.94-75.14 9.94-73.67 0-141.22-31.96-189.28-86.87-47.9-54.8-73.34-124.63-73.34-201.07 0-.32.02-.64.04-.96 0-.32.02-.64.04-.96.02-.32.04-.64.06-.96.04-.64.04-1.28.08-1.92.06-.96.12-1.92.18-2.88 0-1.28.02-2.56.04-3.84 0-.64.02-1.28.04-1.92 0-.64-.02-1.28-.04-1.92-.04-.64-.06-1.28-.1-1.92-.04-.64-.06-1.28-.1-1.92-.02-.32-.04-.64-.06-.96-.02-.32-.04-.64-.06-.96-.04-.64-.06-1.28-.1-1.92-.04-.64-.08-1.28-.12-1.92-.02-.32-.04-.64-.06-.96-.04-.64-.06-1.28-.1-1.92-.04-.64-.08-1.28-.12-1.92-.02-.32-.04-.64-.06-.96-.02-.32-.04-.64-.06-.96-.04-.64-.06-1.28-.1-1.92-.04-.64-.08-1.28-.12-1.92-.02-.32-.04-.64-.06-.96-.02-.32-.04-.64-.06-.96-.04-.64-.06-1.28-.1-1.92-.04-.64-.08-1.28-.12-1.92-.02-.32-.04-.64-.06-.96z"></path></svg>
            <span class="sr-only">Twitter</span>
          </a>
          <a href="#" class="text-sky-400 hover:text-sky-200 dark:text-gray-400 dark:hover:text-gray-200 transition-colors duration-300">
            <svg class="h-6 w-6 fill-current" aria-hidden="true" focusable="false" data-prefix="fab" data-icon="linkedin-in" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M100.28 448H7.4V148.9h92.88zM53.79 114.71C24.09 114.71 0 91.63 0 62.84 0 34.05 24.09 11.05 53.79 11.05c29.7 0 53.79 23 53.79 51.79 0 28.79-24.1 51.79-53.79 51.79zM448 448h-92.68V302.4c0-34.74-27.02-63.53-63.07-63.53-34.88 0-56.36 25.35-65.73 40.57h-.42V448H172.5V148.9h92.54v33.43c12.26-21.72 40.16-59.54 102.4-59.54 77.29 0 137.4 69.49 137.4 165.48z"></path></svg>
            <span class="sr-only">LinkedIn</span>
          </a>
          <a href="#" class="text-sky-400 hover:text-sky-200 dark:text-gray-400 dark:hover:text-gray-200 transition-colors duration-300">
            <svg class="h-6 w-6 fill-current" aria-hidden="true" focusable="false" data-prefix="fab" data-icon="instagram" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M224.1 204.2c-56.3 0-102.2 45.9-102.2 102.2s45.9 102.2 102.2 102.2S326.3 362.5 326.3 306.2 280.4 204.2 224.1 204.2zm0 159.2c-31.9 0-57.8-25.9-57.8-57.8s25.9-57.8 57.8-57.8 57.8 25.9 57.8 57.8-26 57.8-57.8 57.8z"></path><path d="M185 36h78.8c.8 0 1.2.6 1.2 1.3 0 2.2-1.7 4.1-3.9 4.1H185c-2.2 0-3.9-1.9-3.9-4.1 0-.7.4-1.3 1.2-1.3zM.4 121.7C.3 121.2 0 120.5 0 119.8V42.6c0-4.6 3.4-8.8 8.1-9.3 4.7-.5 9.1 2.3 10.9 6.8l.6 1.4-15.6 15.6c-.6.6-.9 1.4-.9 2.2v43.2c0 .8.3 1.6.9 2.2l15.6 15.6-.6 1.4c-1.8 4.5-6.2 7.3-10.9 6.8-4.7-.5-8.1-4.7-8.1-9.3v-77.2c0-.7-.3-1.3-.4-1.8z"></path><path d="M384 0H64C28.7 0 0 28.7 0 64v384c0 35.3 28.7 64 64 64h320c35.3 0 64-28.7 64-64V64c0-35.3-28.7-64-64-64zm-48.9 154.5v198.8c0 24.9-20.2 45.1-45.1 45.1H159.2c-24.9 0-45.1-20.2-45.1-45.1V154.5c0-24.9 20.2-45.1 45.1-45.1h130.8c24.9 0 45.1 20.2 45.1 45.1zm-8.8-97.8c-2.4 0-4.8 1-6.5 2.7-1.7 1.7-2.7 4.1-2.7 6.5s1 4.8 2.7 6.5c1.7 1.7 4.1 2.7 6.5 2.7s4.8-1 6.5-2.7c1.7-1.7 2.7-4.1 2.7-6.5s-1-4.8-2.7-6.5c-1.7-1.7-4.1-2.7-6.5-2.7z"></path></svg>
            <span class="sr-only">Instagram</span>
          </a>
        </div>
      </div>

      <!-- Navigation Links -->
      <div class="col-span-1">
        <h3 class="text-lg font-semibold text-sky-200 dark:text-sky-400 mb-4 uppercase tracking-wide">About</h3>
        <ul class="space-y-3">
          <li><a href="#" class="text-sky-300 hover:text-sky-100 dark:text-gray-400 dark:hover:text-gray-200 text-sm transition-colors duration-300">Our Mission</a></li>
          <li><a href="#" class="text-sky-300 hover:text-sky-100 dark:text-gray-400 dark:hover:text-gray-200 text-sm transition-colors duration-300">Team</a></li>
          <li><a href="#" class="text-sky-300 hover:text-sky-100 dark:text-gray-400 dark:hover:text-gray-200 text-sm transition-colors duration-300">Partners</a></li>
          <li><a href="#" class="text-sky-300 hover:text-sky-100 dark:text-gray-400 dark:hover:text-gray-200 text-sm transition-colors duration-300">Careers</a></li>
        </ul>
      </div>

      <div class="col-span-1">
        <h3 class="text-lg font-semibold text-sky-200 dark:text-sky-400 mb-4 uppercase tracking-wide">Events</h3>
        <ul class="space-y-3">
          <li><a href="#" class="text-sky-300 hover:text-sky-100 dark:text-gray-400 dark:hover:text-gray-200 text-sm transition-colors duration-300">Upcoming Events</a></li>
          <li><a href="#" class="text-sky-300 hover:text-sky-100 dark:text-gray-400 dark:hover:text-gray-200 text-sm transition-colors duration-300">Past Events</a></li>
          <li><a href="#" class="text-sky-300 hover:text-sky-100 dark:text-gray-400 dark:hover:text-gray-200 text-sm transition-colors duration-300">Submit a Proposal</a></li>
          <li><a href="#" class="text-sky-300 hover:text-sky-100 dark:text-gray-400 dark:hover:text-gray-200 text-sm transition-colors duration-300">Sponsor An Event</a></li>
        </ul>
      </div>

      <div class="col-span-1">
        <h3 class="text-lg font-semibold text-sky-200 dark:text-sky-400 mb-4 uppercase tracking-wide">Support</h3>
        <ul class="space-y-3">
          <li><a href="#" class="text-sky-300 hover:text-sky-100 dark:text-gray-400 dark:hover:text-gray-200 text-sm transition-colors duration-300">FAQ</a></li>
          <li><a href="#" class="text-sky-300 hover:text-sky-100 dark:text-gray-400 dark:hover:text-gray-200 text-sm transition-colors duration-300">Contact Us</a></li>
          <li><a href="#" class="text-sky-300 hover:text-sky-100 dark:text-gray-400 dark:hover:text-gray-200 text-sm transition-colors duration-300">Privacy Policy</a></li>
          <li><a href="#" class="text-sky-300 hover:text-sky-100 dark:text-gray-400 dark:hover:text-gray-200 text-sm transition-colors duration-300">Terms of Service</a></li>
        </ul>
      </div>
    </div>

    <!-- Newsletter Signup -->
    <div class="mt-12 pt-8 border-t border-sky-700 dark:border-gray-800 flex flex-col items-center justify-between text-center md:flex-row md:text-left gap-6">
      <div class="max-w-md">
        <h3 class="text-xl font-bold text-sky-200 dark:text-sky-400 mb-2">Stay Connected</h3>
        <p class="text-sky-300 dark:text-gray-400 text-sm">Subscribe to our newsletter for the latest updates on events and industry insights.</p>
      </div>
      <form class="flex flex-col sm:flex-row w-full max-w-sm space-y-3 sm:space-y-0 sm:space-x-3">
        <label for="email-address" class="sr-only">Email address</label>
        <input id="email-address" name="email" type="email" autocomplete="email" required
               class="w-full appearance-none rounded-md border border-sky-600 dark:border-gray-700 px-4 py-2 text-gray-900 placeholder-gray-500 rounded-lg
                      focus:outline-none focus:ring-2 focus:ring-sky-500 focus:border-sky-500 sm:text-sm
                      bg-sky-100 dark:bg-gray-700 dark:text-gray-100 dark:placeholder-gray-400"
               placeholder="Enter your email">
        <button type="submit"
                class="flex-shrink-0 rounded-md border border-transparent bg-sky-600 px-4 py-2 text-base font-medium text-white shadow-sm
                       hover:bg-sky-700 dark:bg-sky-700 dark:hover:bg-sky-800 focus:outline-none focus:ring-2 focus:ring-sky-500 focus:ring-offset-2
                       dark:focus:ring-offset-gray-950 transition-colors duration-300">
          Subscribe
        </button>
      </form>
    </div>

    <!-- Copyright -->
    <div class="mt-8 pt-8 border-t border-sky-800 dark:border-gray-700 text-center text-sky-400 dark:text-gray-500 text-xs">
      &copy; <span id="current-year"></span> EventConnect. All rights reserved. Built with <span class="text-red-400">&hearts;</span>
    </div>
  </div>
  <script>
    document.getElementById('current-year').textContent = new Date().getFullYear();
  </script>
</footer>

Watercolor Artistic Footer Navigation Component

A complex, responsive footer navigation component designed for non-profit/charity websites, featuring a watercolor artistic style with soft, sepia/brown tones and dark mode support. Includes multiple navigation links, social media icons, and a copyright section.

Open Preview

                <footer class="relative bg-gradient-to-br from-amber-50 to-amber-100 font-sans text-amber-950 dark:from-stone-950 dark:to-stone-800 dark:text-stone-100 overflow-hidden pt-12 pb-8">
  <!-- Background texture overlay -->
  <div class="absolute inset-0 z-0 opacity-40 dark:opacity-20" style="background-image: url('https://www.transparenttextures.com/patterns/handmade-paper.png');"></div>

  <div class="relative z-10 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-10 border-b border-amber-200/50 dark:border-stone-700/50 pb-8">

      <!-- Column 1: Organization Info -->
      <div class="flex flex-col items-center text-center md:items-start md:text-left">
        <div class="w-24 h-24 rounded-full overflow-hidden mb-4 border-2 border-amber-300 dark:border-stone-600 shadow-md transform hover:scale-105 transition-transform duration-300">
          <img src="https://picsum.photos/seed/charitylogo/200/200" alt="Non-profit Logo" class="w-full h-full object-cover grayscale brightness-110 contrast-125">
        </div>
        <h3 class="text-2xl font-semibold mb-2 text-amber-900 dark:text-stone-200 font-serif">Hope & Harmony Foundation</h3>
        <p class="text-sm mb-2 text-amber-800 dark:text-stone-300">Fostering a world of compassion and positive change.</p>
        <p class="text-sm text-amber-800 dark:text-stone-300"><a href="mailto:[email protected]" class="hover:underline">[email protected]</a></p>
        <p class="text-sm text-amber-800 dark:text-stone-300">(123) 456-7890</p>
      </div>

      <!-- Column 2: Quick Links -->
      <nav class="flex flex-col items-center text-center md:items-start md:text-left">
        <h4 class="text-lg font-bold mb-4 text-amber-900 dark:text-stone-200 uppercase tracking-wider font-serif border-b pb-1 border-amber-300 dark:border-stone-600">Quick Links</h4>
        <ul class="space-y-2 text-sm">
          <li><a href="#" class="hover:text-amber-700 dark:hover:text-stone-400 transition-colors duration-200 group relative inline-block"><span class="relative z-10">Our Mission</span><span class="absolute inset-0 bg-amber-200 dark:bg-stone-700 opacity-0 group-hover:opacity-60 transition-opacity duration-200 blur-sm rounded"></span></a></li>
          <li><a href="#" class="hover:text-amber-700 dark:hover:text-stone-400 transition-colors duration-200 group relative inline-block"><span class="relative z-10">What We Do</span><span class="absolute inset-0 bg-amber-200 dark:bg-stone-700 opacity-0 group-hover:opacity-60 transition-opacity duration-200 blur-sm rounded"></span></a></li>
          <li><a href="#" class="hover:text-amber-700 dark:hover:text-stone-400 transition-colors duration-200 group relative inline-block"><span class="relative z-10">Impact Stories</span><span class="absolute inset-0 bg-amber-200 dark:bg-stone-700 opacity-0 group-hover:opacity-60 transition-opacity duration-200 blur-sm rounded"></span></a></li>
          <li><a href="#" class="hover:text-amber-700 dark:hover:text-stone-400 transition-colors duration-200 group relative inline-block"><span class="relative z-10">Volunteer</span><span class="absolute inset-0 bg-amber-200 dark:bg-stone-700 opacity-0 group-hover:opacity-60 transition-opacity duration-200 blur-sm rounded"></span></a></li>
          <li><a href="#" class="hover:text-amber-700 dark:hover:text-stone-400 transition-colors duration-200 group relative inline-block"><span class="relative z-10">Donate Now</span><span class="absolute inset-0 bg-amber-200 dark:bg-stone-700 opacity-0 group-hover:opacity-60 transition-opacity duration-200 blur-sm rounded"></span></a></li>
        </ul>
      </nav>

      <!-- Column 3: Resources -->
      <nav class="flex flex-col items-center text-center md:items-start md:text-left">
        <h4 class="text-lg font-bold mb-4 text-amber-900 dark:text-stone-200 uppercase tracking-wider font-serif border-b pb-1 border-amber-300 dark:border-stone-600">Resources</h4>
        <ul class="space-y-2 text-sm">
          <li><a href="#" class="hover:text-amber-700 dark:hover:text-stone-400 transition-colors duration-200 group relative inline-block"><span class="relative z-10">Blog</span><span class="absolute inset-0 bg-amber-200 dark:bg-stone-700 opacity-0 group-hover:opacity-60 transition-opacity duration-200 blur-sm rounded"></span></a></li>
          <li><a href="#" class="hover:text-amber-700 dark:hover:text-stone-400 transition-colors duration-200 group relative inline-block"><span class="relative z-10">Events Calendar</span><span class="absolute inset-0 bg-amber-200 dark:bg-stone-700 opacity-0 group-hover:opacity-60 transition-opacity duration-200 blur-sm rounded"></span></a></li>
          <li><a href="#" class="hover:text-amber-700 dark:hover:text-stone-400 transition-colors duration-200 group relative inline-block"><span class="relative z-10">Annual Reports</span><span class="absolute inset-0 bg-amber-200 dark:bg-stone-700 opacity-0 group-hover:opacity-60 transition-opacity duration-200 blur-sm rounded"></span></a></li>
          <li><a href="#" class="hover:text-amber-700 dark:hover:text-stone-400 transition-colors duration-200 group relative inline-block"><span class="relative z-10">FAQ</span><span class="absolute inset-0 bg-amber-200 dark:bg-stone-700 opacity-0 group-hover:opacity-60 transition-opacity duration-200 blur-sm rounded"></span></a></li>
          <li><a href="#" class="hover:text-amber-700 dark:hover:text-stone-400 transition-colors duration-200 group relative inline-block"><span class="relative z-10">Contact Us</span><span class="absolute inset-0 bg-amber-200 dark:bg-stone-700 opacity-0 group-hover:opacity-60 transition-opacity duration-200 blur-sm rounded"></span></a></li>
        </ul>
      </nav>

      <!-- Column 4: Newsletter & Social -->
      <div class="flex flex-col items-center text-center md:items-start md:text-left">
        <h4 class="text-lg font-bold mb-4 text-amber-900 dark:text-stone-200 uppercase tracking-wider font-serif border-b pb-1 border-amber-300 dark:border-stone-600">Stay Connected</h4>
        <p class="text-sm mb-4 text-amber-800 dark:text-stone-300">Join our newsletter for updates and inspiring stories.</p>
        <form class="w-full max-w-sm mb-6">
          <div class="flex flex-col sm:flex-row gap-2">
            <input type="email" placeholder="Your email address" aria-label="Your email address" class="flex-grow px-4 py-2 rounded-lg bg-amber-50 border border-amber-300 focus:outline-none focus:ring-2 focus:ring-amber-500 transition-all duration-300 dark:bg-stone-700 dark:border-stone-600 dark:text-stone-100 dark:placeholder-stone-400 dark:focus:ring-stone-400 text-sm placeholder-amber-600">
            <button type="submit" class="px-5 py-2 rounded-lg bg-amber-700 text-amber-50 font-semibold shadow-md hover:bg-amber-800 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-offset-2 focus:ring-offset-amber-50 transition-all duration-300 dark:bg-stone-600 dark:hover:bg-stone-700 dark:ring-offset-stone-900 text-sm whitespace-nowrap">Subscribe</button>
          </div>
        </form>

        <div class="flex space-x-5">
          <a href="#" aria-label="Facebook" class="text-amber-800 hover:text-amber-700 dark:text-stone-300 dark:hover:text-stone-400 transform hover:scale-110 transition-transform duration-200 group relative inline-block">
            <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.33V22C17.343 21.128 22 16.991 22 12z" clip-rule="evenodd" />
            </svg>
            <span class="absolute inset-0 bg-amber-200 dark:bg-stone-700 opacity-0 group-hover:opacity-60 transition-opacity duration-200 blur-sm rounded-full"></span>
          </a>
          <a href="#" aria-label="Twitter" class="text-amber-800 hover:text-amber-700 dark:text-stone-300 dark:hover:text-stone-400 transform hover:scale-110 transition-transform duration-200 group relative inline-block">
            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              <path d="M8.29 20.251c1.378 0 2.755-.262 4.025-.783a9.774 9.774 0 003.541-2.274c1.176-1.121 2.05-2.585 2.502-4.148.452-1.563.452-3.178 0-4.741-.452-1.563-1.326-3.027-2.502-4.148a9.774 9.774 0 00-3.541-2.274c-1.27-.521-2.647-.783-4.025-.783S5.535 2.26 4.265 2.783a9.774 9.774 0 00-3.541 2.274C-.399 6.178-.851 7.643-.851 9.206c0 1.563.452 3.027.851 4.148.92 1.085 2.046 1.956 3.375 2.544 1.329.588 2.825.882 4.39.882zM12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm3.333 7.822c-.667 1.086-1.581 1.96-2.741 2.622-1.161.662-2.482.993-3.964.993a4.85 4.85 0 01-3.667-1.46c-.958-.92-1.437-2.073-1.437-3.46 0-1.387.479-2.54 1.437-3.46.958-.92 2.18-.92 3.667-.92 1.383 0 2.593.364 3.63 1.093" clip-rule="evenodd" />
            </svg>
            <span class="absolute inset-0 bg-amber-200 dark:bg-stone-700 opacity-0 group-hover:opacity-60 transition-opacity duration-200 blur-sm rounded-full"></span>
          </a>
          <a href="#" aria-label="Instagram" class="text-amber-800 hover:text-amber-700 dark:text-stone-300 dark:hover:text-stone-400 transform hover:scale-110 transition-transform duration-200 group relative inline-block">
            <svg class="w-6 h-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.104.056.333.045.64.174.92.308.57.27.954.607 1.353 1.006.398.399.736.783 1.006 1.352.134.28.263.587.309.92.043.32.056.671.056 3.102V12c0 2.43-.013 2.78-.056 3.104-.045.333-.174.64-.308.92-.27.57-.607.954-1.006 1.353-.399.398-.783.736-1.352 1.006-.28.134-.587.263-.92.309-.32.043-.671.056-3.102.056H12.315c-2.43 0-2.784-.013-3.104-.056-.333-.045-.64-.174-.92-.308-.57-.27-.954-.607-1.353-1.006-.398-.399-.783-.736-1.006-1.352-.134-.28-.263-.587-.309-.92-.043-.32-.056-.671-.056-3.102V12c0-2.43.013-2.78.056-3.104.045-.333.174-.64.308-.92.27-.57.607-.954 1.006-1.353.399-.398.783-.736 1.352-1.006.28-.134.587-.263.92-.309.32-.043.671-.056 3.102-.056H12.315zM12 7.828c-2.322 0-4.207 1.885-4.207 4.207s1.885 4.207 4.207 4.207 4.207-1.885 4.207-4.207S14.322 7.828 12 7.828zm0 1.25c1.637 0 2.957 1.32 2.957 2.957s-1.32 2.957-2.957 2.957-2.957-1.32-2.957-2.957S10.363 9.078 12 9.078zm6.52-.767c0-.528.431-.959.959-.959.528 0 .959.431.959.959s-.431.959-.959.959-.959-.431-.959-.959z" clip-rule="evenodd" />
            </svg>
            <span class="absolute inset-0 bg-amber-200 dark:bg-stone-700 opacity-0 group-hover:opacity-60 transition-opacity duration-200 blur-sm rounded-full"></span>
          </a>
          <a href="#" aria-label="LinkedIn" class="text-amber-800 hover:text-amber-700 dark:text-stone-300 dark:hover:text-stone-400 transform hover:scale-110 transition-transform duration-200 group relative inline-block">
            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              <path fill-rule="evenodd" d="M8.29 20.251c1.378 0 2.755-.262 4.025-.783a9.774 9.774 0 003.541-2.274c1.176-1.121 2.05-2.585 2.502-4.148.452-1.563.452-3.178 0-4.741-.452-1.563-1.326-3.027-2.502-4.148a9.774 9.774 0 00-3.541-2.274c-1.27-.521-2.647-.783-4.025-.783S5.535 2.26 4.265 2.783a9.774 9.774 0 00-3.541 2.274C-.399 6.178-.851 7.643-.851 9.206c0 1.563.452 3.027.851 4.148.92 1.085 2.046 1.956 3.375 2.544 1.329.588 2.825.882 4.39.882zM12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm-5.75 16h-2.5V8h2.5v10zM5 6.75A1.75 1.75 0 115 3.25A1.75 1.75 0 015 6.75zM17 18h-2.5V13.875c0-.625-.525-1.125-1.125-1.125h-.5c-.625 0-1.125.5-1.125 1.125V18h-2.5V8h2.5v1.25h.125c.625-.625 1.375-.75 2.063-.75 2.125 0 2.937 1.25 2.937 3.25V18z" clip-rule="evenodd" />
            </svg>
            <span class="absolute inset-0 bg-amber-200 dark:bg-stone-700 opacity-0 group-hover:opacity-60 transition-opacity duration-200 blur-sm rounded-full"></span>
          </a>
        </div>
      </div>

    </div>

    <!-- Copyright & Disclaimer -->
    <div class="text-center text-sm text-amber-900/80 dark:text-stone-300/80 pt-6">
      <p>&copy; 2023 Hope & Harmony Foundation. All rights reserved.</p>
      <p class="mt-2">Dedicated to creating a better future for all. <a href="#" class="hover:underline">Privacy Policy</a> | <a href="#" class="hover:underline">Terms of Service</a></p>
    </div>
  </div>
</footer>

3D_Music_Footer_Navigation

A complex 3D-inspired footer navigation component for music/audio platforms, featuring warm neutrals and full responsiveness with dark mode support.

Open Preview

                <footer class="bg-gradient-to-br from-stone-100 to-stone-200 text-stone-700 py-12 px-6 dark:from-stone-900 dark:to-stone-950 dark:text-stone-300 relative overflow-hidden">
    <div class="absolute inset-0 z-0 opacity-10 dark:opacity-5" style="background-image: radial-gradient(circle at center, #d6d3d1 1px, transparent 1px); background-size: 20px 20px;"></div>

    <!-- Decorative rings for 3D effect -->
    <div class="absolute w-96 h-96 rounded-full bg-stone-300 dark:bg-stone-700 opacity-20 dark:opacity-10 -bottom-24 -left-24 blur-3xl"></div>
    <div class="absolute w-72 h-72 rounded-full bg-stone-400 dark:bg-stone-600 opacity-15 dark:opacity-8 top-12 -right-12 blur-3xl"></div>

    <div class="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12 relative z-10">
        <!-- Section 1: Logo and Copyright -->
        <div class="flex flex-col items-start">
            <a href="#" class="inline-flex items-center space-x-2 text-2xl font-bold mb-4 transform transition-transform duration-300 hover:scale-105">
                <svg class="w-8 h-8 text-amber-500" fill="currentColor" viewBox="0 0 24 24">
                    <path d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm-1 16.03V7.97c0-.49.38-.87.87-.87H15a.87.87 0 0 1 .87.87v10.06a.87.87 0 0 1-.87.87H11.87a.87.87 0 0 1-.87-.87zM13 14H9v-4h4v4z"/>
                </svg>
                <span class="bg-clip-text text-transparent bg-gradient-to-r from-amber-600 to-stone-800 dark:from-amber-400 dark:to-stone-200">SoundWave</span>
            </a>
            <p class="text-sm text-stone-600 dark:text-stone-400 mb-4">Dive into an ocean of sounds. Your ultimate audio experience begins here.</p>
            <p class="text-xs text-stone-500 dark:text-stone-400">&copy; 2023 SoundWave. All rights reserved.</p>
            <div class="flex space-x-4 mt-6">
                <a href="#" class="text-stone-500 hover:text-amber-600 dark:text-stone-400 dark:hover:text-amber-400 transition-colors duration-300 transform hover:-translate-y-1">
                    <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.368 21.248 22 17.07 22 12z" clip-rule="evenodd" /></svg>
                </a>
                <a href="#" class="text-stone-500 hover:text-amber-600 dark:text-stone-400 dark:hover:text-amber-400 transition-colors duration-300 transform hover:-translate-y-1">
                    <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M20.24 3.76c-.92-.92-2.12-1.44-3.44-1.44H7.2c-1.32 0-2.52.52-3.44 1.44C2.84 4.68 2.32 5.88 2.32 7.2v9.6c0 1.32.52 2.52 1.44 3.44s2.12 1.44 3.44 1.44h9.6c1.32 0 2.52-.52 3.44-1.44s1.44-2.12 1.44-3.44V7.2c0-1.32-.52-2.52-1.44-3.44zM12 18.08c-3.35 0-6.08-2.73-6.08-6.08S8.65 5.92 12 5.92s6.08 2.73 6.08 6.08-2.73 6.08-6.08 6.08zM18.42 7.78a1.36 1.36 0 1 1 0-2.72 1.36 1.36 0 0 1 0 2.72z"/><path d="M12 8.08c-2.16 0-3.92 1.76-3.92 3.92s1.76 3.92 3.92 3.92 3.92-1.76 3.92-3.92-1.76-3.92-3.92-3.92z"/></svg>
                </a>
                <a href="#" class="text-stone-500 hover:text-amber-600 dark:text-stone-400 dark:hover:text-amber-400 transition-colors duration-300 transform hover:-translate-y-1">
                    <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M22.46 6.03c-.63.28-1.31.47-2.01.56.73-.44 1.29-1.13 1.55-1.99-.68.4-1.43.68-2.22.84-.64-.68-1.55-1.12-2.59-1.12-2.02 0-3.66 1.64-3.66 3.66 0 .29.03.56.08.83-3.05-.15-5.75-1.61-7.56-3.84-.32.55-.5 1.18-.5 1.87 0 1.27.65 2.39 1.63 3.05-.6-.02-1.16-.18-1.65-.45v.05c0 1.77 1.26 3.24 2.93 3.58-.3.08-.6.12-.9.12-.22 0-.44-.02-.65-.06.47 1.45 1.81 2.51 3.41 2.54-1.25.98-2.82 1.57-4.53 1.57-.29 0-.58-.02-.86-.05 1.62 1.04 3.54 1.65 5.59 1.65 6.71 0 10.37-5.56 10.37-10.37 0-.16-.01-.32-.01-.48.71-.51 1.34-1.14 1.83-1.87z"/></svg>
                </a>
            </div>
        </div>

        <!-- Section 2: Quick Links (Explore) -->
        <div>
            <h3 class="text-lg font-semibold mb-4 text-stone-800 dark:text-stone-100 relative after:absolute after:left-0 after:bottom-0 after:w-12 after:h-0.5 after:bg-amber-500 after:rounded-full transform transition-transform duration-300 hover:translate-x-1">Explore</h3>
            <ul class="space-y-3">
                <li><a href="#" class="text-stone-600 hover:text-amber-600 dark:text-stone-400 dark:hover:text-amber-400 transition-colors duration-300 transform hover:translate-x-1">New Releases</a></li>
                <li><a href="#" class="text-stone-600 hover:text-amber-600 dark:text-stone-400 dark:hover:text-amber-400 transition-colors duration-300 transform hover:translate-x-1">Top Charts</a></li>
                <li><a href="#" class="text-stone-600 hover:text-amber-600 dark:text-stone-400 dark:hover:text-amber-400 transition-colors duration-300 transform hover:translate-x-1">Genres</a></li>
                <li><a href="#" class="text-stone-600 hover:text-amber-600 dark:text-stone-400 dark:hover:text-amber-400 transition-colors duration-300 transform hover:translate-x-1">Artists</a></li>
                <li><a href="#" class="text-stone-600 hover:text-amber-600 dark:text-stone-400 dark:hover:text-amber-400 transition-colors duration-300 transform hover:translate-x-1">Podcasts</a></li>
            </ul>
        </div>

        <!-- Section 3: Support & Legal -->
        <div>
            <h3 class="text-lg font-semibold mb-4 text-stone-800 dark:text-stone-100 relative after:absolute after:left-0 after:bottom-0 after:w-12 after:h-0.5 after:bg-amber-500 after:rounded-full transform transition-transform duration-300 hover:translate-x-1">Support</h3>
            <ul class="space-y-3">
                <li><a href="#" class="text-stone-600 hover:text-amber-600 dark:text-stone-400 dark:hover:text-amber-400 transition-colors duration-300 transform hover:translate-x-1">Help Center</a></li>
                <li><a href="#" class="text-stone-600 hover:text-amber-600 dark:text-stone-400 dark:hover:text-amber-400 transition-colors duration-300 transform hover:translate-x-1">Contact Us</a></li>
                <li><a href="#" class="text-stone-600 hover:text-amber-600 dark:text-stone-400 dark:hover:text-amber-400 transition-colors duration-300 transform hover:translate-x-1">Privacy Policy</a></li>
                <li><a href="#" class="text-stone-600 hover:text-amber-600 dark:text-stone-400 dark:hover:text-amber-400 transition-colors duration-300 transform hover:translate-x-1">Terms of Service</a></li>
                <li><a href="#" class="text-stone-600 hover:text-amber-600 dark:text-stone-400 dark:hover:text-amber-400 transition-colors duration-300 transform hover:translate-x-1">Cookie Policy</a></li>
            </ul>
        </div>

        <!-- Section 4: Newsletter & App Download -->
        <div class="space-y-6">
            <h3 class="text-lg font-semibold text-stone-800 dark:text-stone-100 relative after:absolute after:left-0 after:bottom-0 after:w-12 after:h-0.5 after:bg-amber-500 after:rounded-full transform transition-transform duration-300 hover:translate-x-1">Stay Connected</h3>
            <div>
                <p class="mb-3 text-stone-600 dark:text-stone-400">Subscribe to our newsletter for the latest updates.</p>
                <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="min-w-0 flex-auto rounded-md border-0 bg-white/50 dark:bg-stone-800/50 px-3.5 py-2 text-stone-900 dark:text-stone-100 shadow-sm ring-1 ring-inset ring-stone-300 dark:ring-stone-700 placeholder:text-stone-400 dark:placeholder:text-stone-500 focus:ring-2 focus:ring-inset focus:ring-amber-500 sm:text-sm sm:leading-6 transition-all duration-300 focus:outline-none focus:shadow-lg focus:shadow-amber-500/20" placeholder="Enter your email">
                    <button type="submit" class="flex-none rounded-md bg-amber-500 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-amber-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-amber-500 transform transition-transform duration-300 hover:scale-105 active:scale-95
                    relative overflow-hidden group">
                        <span class="absolute top-0 left-0 w-0 h-0 transition-all duration-300 ease-out bg-white rounded-full group-hover:w-full group-hover:h-full opacity-10"></span>
                        Subscribe
                    </button>
                </form>
            </div>
            <div class="mt-6">
                <p class="mb-3 text-stone-600 dark:text-stone-400">Download our mobile app to listen on the go!</p>
                <div class="flex space-x-3">
                    <a href="#" class="inline-flex items-center bg-stone-300/60 dark:bg-stone-800/60 px-4 py-2 rounded-lg shadow-md hover:shadow-lg transition-all duration-300 transform hover:-translate-y-1 relative overflow-hidden group">
                        <span class="absolute top-0 left-0 w-0 h-0 transition-all duration-300 ease-out bg-stone-600 rounded-full group-hover:w-full group-hover:h-full opacity-10"></span>
                        <svg class="h-6 w-6 text-stone-800 dark:text-stone-200 mr-2" fill="currentColor" viewBox="0 0 24 24">
                            <path d="M17 1H7c-1.1 0-2 .9-2 2v18c0 1.1.9 2 2 2h10c1.1 0 2-.9 2-2V3c0-1.1-.9-2-2-2zm-2 20h-6v-1h6v1zm3-3H6V4h12v14z"/>
                        </svg>
                        <span class="text-stone-800 dark:text-stone-200 text-sm font-medium">App Store</span>
                    </a>
                    <a href="#" class="inline-flex items-center bg-stone-300/60 dark:bg-stone-800/60 px-4 py-2 rounded-lg shadow-md hover:shadow-lg transition-all duration-300 transform hover:-translate-y-1 relative overflow-hidden group">
                        <span class="absolute top-0 left-0 w-0 h-0 transition-all duration-300 ease-out bg-stone-600 rounded-full group-hover:w-full group-hover:h-full opacity-10"></span>
                        <svg class="h-6 w-6 text-stone-800 dark:text-stone-200 mr-2" fill="currentColor" viewBox="0 0 24 24">
                            <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2.05 13.9c-.29.54-.84.85-1.4.85-.92 0-1.67-.75-1.67-1.67 0-.92.75-1.67 1.67-1.67.56 0 1.11.31 1.4.85l.76-.76c-.57-.96-1.57-1.54-2.58-1.54-1.84 0-3.33 1.49-3.33 3.33s1.49 3.33 3.33 3.33c1.01 0 2.01-.58 2.58-1.54l-.76-.76zm7.2-2.3l-.76.76c.29-.54.84-.85 1.4-.85.92 0 1.67.75 1.67 1.67 0 .92-.75 1.67-1.67 1.67-.56 0-1.11-.31-1.4-.85l-.76.76c.57.96 1.57 1.54 2.58 1.54 1.84 0 3.33-1.49 3.33-3.33s-1.49-3.33-3.33-3.33c-1.01 0-2.01.58-2.58 1.54z"/>
                        </svg>
                        <span class="text-stone-800 dark:text-stone-200 text-sm font-medium">Play Store</span>
                    </a>
                </div>
            </div>
        </div>
    </div>
</footer>

Retro_Earth_Tone_Portfolio_Footer

A responsive, retro-themed footer navigation component for a portfolio website, featuring earth tones and dark mode support. Designed with 80s/90s aesthetics in mind, offering a nostalgic feel.

Open Preview

                <footer class="bg-amber-100 dark:bg-gray-900 text-amber-900 dark:text-gray-100 py-8 md:py-12 font-mono border-t-4 border-amber-900 dark:border-gray-700">
  <div class="container mx-auto px-4 md:px-8">
    <div class="grid grid-cols-1 md:grid-cols-4 gap-8 md:gap-12">
      <div class="flex flex-col items-center md:items-start text-center md:text-left">
        <a href="#" class="text-2xl font-bold uppercase tracking-wider mb-4 hover:text-amber-700 dark:hover:text-amber-300 transition-colors duration-300">
          [Your Portfolio]
        </a>
        <p class="text-sm mb-4 max-w-xs">Crafting digital experiences since the '90s. Pixel-perfect code. Analog soul.</p>
        <div class="flex space-x-4">
          <a href="#" class="text-amber-800 dark:text-gray-400 hover:text-amber-600 dark:hover:text-amber-200 transition-colors duration-300">
            <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.33V22c5.373-.623 9.573-4.721 9.573-9.879Z" clip-rule="evenodd" />
            </svg>
            <span class="sr-only">Facebook</span>
          </a>
          <a href="#" class="text-amber-800 dark:text-gray-400 hover:text-amber-600 dark:hover:text-amber-200 transition-colors duration-300">
            <svg class="w-6 h-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.04 1.15.148 1.465.247a4.872 4.872 0 0 1 3.427 3.427c.099.315.207.622.247 1.465.047 1.013.049 1.371.049 3.797 0 2.43-.002 2.784-.048 3.797-.04.843-.148 1.15-.247 1.465a4.872 4.872 0 0 1-3.427 3.427c-.315.099-.622.207-1.465.247-1.013.047-1.371.049-3.797.049s-2.784-.002-3.797-.048c-.843-.04-1.15-.148-1.465-.247a4.872 4.872 0 0 1-3.427-3.427c-.099-.315-.207-.622-.247-1.465-.047-1.013-.049-1.371-.049-3.797s.002-2.784.048-3.797c.04-.843.148-1.15.247-1.465a4.872 4.872 0 0 1 3.427-3.427c.315-.099.622-.207 1.465-.247C9.567 2.002 9.92 2 12.315 2Zm0 0S5.474 2 5.031 2.008c-.844.04-1.282.174-1.637.387a3.36 3.36 0 0 0-1.921 1.921c-.213.355-.347.793-.387 1.637C2.002 6.969 2 7.413 2 12.001c0 4.588.002 5.031.008 5.875.04.844.174 1.282.387 1.637a3.36 3.36 0 0 0 1.921 1.921c.355.213.793.347 1.637.387C6.969 22.002 7.413 22 12.001 22c4.588 0 5.031-.002 5.875-.008.844-.04 1.282-.174 1.637-.387a3.36 3.36 0 0 0 1.921-1.921c.213-.355.347-.793.387-1.637.006-.844.008-1.282.008-5.875s-.002-5.031-.008-5.875c-.04-.844-.174-1.282-.387-1.637a3.36 3.36 0 0 0-1.921-1.921c-.355-.213-.793-.347-1.637-.387C17.031 2.002 16.588 2 12.001 2Zm0 5.875a6.126 6.126 0 1 0 0 12.252 6.126 6.126 0 0 0 0-12.252ZM12.001 16a4 4 0 1 1 0-8 4 4 0 0 1 0 8Zm6.406-11.848a1.69 1.69 0 1 0 0 3.38 1.69 1.69 0 0 0 0-3.38Z" clip-rule="evenodd" />
            </svg>
            <span class="sr-only">Instagram</span>
          </a>
          <a href="#" class="text-amber-800 dark:text-gray-400 hover:text-amber-600 dark:hover:text-amber-200 transition-colors duration-300">
            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              <path d="M8.29 20.35c-4.69 0-8.5-3.81-8.5-8.5s3.81-8.5 8.5-8.5c2.3 0 4.41.92 5.89 2.45l-1.8 1.8c-1.07-.95-2.52-1.55-4.09-1.55-3.32 0-6 2.68-6 6s2.68 6 6 6c3.04 0 5.6-2.26 5.89-5.3h-5.89V10h9.5c.13.62.2 1.25.2 1.9 0 5.24-4.24 9.5-9.5 9.5Z"/>
              <path d="M23 12h-9c0 5.24 4.24 9.5 9.5 9.5h-.5c-4.41 0-7.97-3.56-7.97-7.97 0-.65.07-1.28.2-1.9H23v2.85z"/>
            </svg>
            <span class="sr-only">Google</span>
          </a>
        </div>
      </div>

      <div>
        <h3 class="text-lg font-semibold mb-4 border-b border-amber-500 pb-2">Quick Links</h3>
        <nav class="flex flex-col space-y-2">
          <a href="#" class="hover:text-amber-700 dark:hover:text-amber-300 transition-colors duration-300">Home</a>
          <a href="#" class="hover:text-amber-700 dark:hover:text-amber-300 transition-colors duration-300">About</a>
          <a href="#" class="hover:text-amber-700 dark:hover:text-amber-300 transition-colors duration-300">Portfolio</a>
          <a href="#" class="hover:text-amber-700 dark:hover:text-amber-300 transition-colors duration-300">Services</a>
          <a href="#" class="hover:text-amber-700 dark:hover:text-amber-300 transition-colors duration-300">Contact</a>
        </nav>
      </div>

      <div>
        <h3 class="text-lg font-semibold mb-4 border-b border-amber-500 pb-2">Categories</h3>
        <nav class="flex flex-col space-y-2">
          <a href="#" class="hover:text-amber-700 dark:hover:text-amber-300 transition-colors duration-300">Web Design</a>
          <a href="#" class="hover:text-amber-700 dark:hover:text-amber-300 transition-colors duration-300">Branding</a>
          <a href="#" class="hover:text-amber-700 dark:hover:text-amber-300 transition-colors duration-300">UI/UX</a>
          <a href="#" class="hover:text-amber-700 dark:hover:text-amber-300 transition-colors duration-300">Development</a>
          <a href="#" class="hover:text-amber-700 dark:hover:text-amber-300 transition-colors duration-300">Illustration</a>
        </nav>
      </div>

      <div>
        <h3 class="text-lg font-semibold mb-4 border-b border-amber-500 pb-2">Get in Touch</h3>
        <address class="not-italic text-sm space-y-2">
          <p class="flex items-center"><svg class="w-5 h-5 mr-2 text-amber-700 dark:text-amber-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.727A8 8 0 016.343 7.273L17.657 16.727zm0 0A8.001 8.001 0 0120 12c0 2.21-1.206 4.16-3.097 5.29-1.425.864-3.153 1.34-5.028 1.34-3.957 0-7.25-3.047-7.25-6.81 C4.625 9.09 5.86 6.88 7.625 5.56L17.657 16.727zM6.343 7.273 C5.83 6.94 5.376 6.541 4.98 6.095m0 0a8.001 8.001 0 01-2.316 2.502L6.343 7.273z"></path></svg>123 Pixel Drive, Retroville, RV 90210</p>
          <p class="flex items-center"><svg class="w-5 h-5 mr-2 text-amber-700 dark:text-amber-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684L10.106 9.2A1 1 0 0011.233 10c1.354-.42 2.766-.671 4.29-1.284A1 1 0 0016 8.35v-1.7a2 2 0 012-2h3a2 2 0 012-2v16a2 2 0 01-2 2h-3a2 2 0 01-2-2v-1.7a1 1 0 00-.777-.962c-1.524-.613-2.936-.864-4.29-1.284a1 1 0 00-1.127.784l-.872 3.518A1 1 0 018.28 21H5a2 2 0 01-2-2V5z"></path></svg><a href="tel:+1234567890" class="hover:underline">+1 (234) 567-890</a></p>
          <p class="flex items-center"><svg class="w-5 h-5 mr-2 text-amber-700 dark:text-amber-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.983 5.485c.346.238.749.362 1.167.362.418 0 .82-.124 1.167-.362L21 8M6.25 10a.75.75 0 100 1.5.75.75 0 000-1.5zM12 12c-1.105 0-2 .895-2 2s.895 2 2 2 2-.895 2-2-.895-2-2-2zM21 8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2h14a2 2 0 002-2V8z"></path></svg><a href="mailto:[email protected]" class="hover:underline">[email protected]</a></p>
        </address>
      </div>
    </div>

    <div class="mt-10 pt-6 border-t-2 border-amber-800 dark:border-gray-700 text-center text-sm">
      <p>&copy; <span id="current-year"></span> [Your Portfolio]. All rights reserved. <span class="hidden md:inline">Designed with '80s passion.</span></p>
    </div>
  </div>
</footer>

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

Footer Navigation Component

Organic/nature-inspired footer navigation component for a marketplace, featuring flowing lines, analogous color scheme, multiple sections, and responsive design with dark mode support.

Open Preview

                <footer class="bg-gradient-to-r from-emerald-50 to-teal-50 dark:from-gray-950 dark:to-emerald-950 text-gray-800 dark:text-gray-200 py-12 md:py-16 overflow-hidden relative">
  <div class="absolute top-0 left-0 w-full h-full pointer-events-none opacity-20 dark:opacity-10">
    <svg class="w-full h-full" viewBox="0 0 1000 300" preserveAspectRatio="xMidYMid slice">
      <path fill="currentColor" d="M0,100 C150,200 350,0 500,100 S850,200 1000,100 L1000,300 L0,300 Z" />
    </svg>
  </div>
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-8 lg:gap-12">
      <div class="flex flex-col items-start lg:col-span-2">
        <a href="#" class="text-3xl font-bold text-teal-600 dark:text-emerald-400 mb-4 tracking-tight font-serif">
          NatureNest
        </a>
        <p class="text-sm leading-relaxed mb-6 max-w-sm">
          Discover unique treasures and artisan crafts from around the globe, with a focus on sustainable and handmade products.
        </p>
        <div class="flex space-x-4">
          <a href="#" class="text-teal-600 hover:text-teal-800 dark:text-emerald-400 dark:hover:text-emerald-600 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.33V22H12c5.523 0 10-4.477 10-10z" clip-rule="evenodd" />
            </svg>
          </a>
          <a href="#" class="text-teal-600 hover:text-teal-800 dark:text-emerald-400 dark:hover:text-emerald-600 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.315 2c2.43 0 2.784.013 3.715.056 8.96 0 10.154.044 10.154.044s.927-.005 3.71-.161c2.83-.15 4.093-1.077 4.093-1.077s.9-.785 1.554-2.585c.654-1.8.654-2.33 1.134-4.885.48-2.555.444-4.07 0-5.59-1.2-4.032-4.757-5.504-4.757-5.504s-.897-.978-2.066-1.554c-1.169-.576-2.504-.576-2.617-.576-2.065 0-3.328.086-4.524.195-.081-.005-2.06-.017-3.715-.056C7.575-2.006 7.227-1.993 4.797-1.993c-2.43 0-2.784-.013-3.715-.056C-7.868-2.006-8.243-2.006-8.243-2.006s-.927.005-3.71.161c-2.83.15-4.093 1.077-4.093 1.077s-.9.785-1.554 2.585c-.654 1.8-.654 2.33-1.134 4.885-.48 2.555-.444 4.07 0 5.59 1.2 4.032 4.757 5.504 4.757 5.504s-.897.978-2.066 1.554c-1.169.576-2.504.576-2.617.576-2.065 0-3.328-.086-4.524-.195-.081.005-2.06.017-3.715.056C-.415 2.006.014 1.993 2.444 1.993c2.43 0 2.784.013 3.715.056C12.315 2 12.315 2 12.315 2z" />
            </svg>
          </a>
          <a href="#" class="text-teal-600 hover:text-teal-800 dark:text-emerald-400 dark:hover:text-emerald-600 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.31c-.1.08-.22.1-.34.1-.12 0-.25-.02-.37-.08a.98.98 0 01-.7-.7-.99.99 0 010-.7c.07-.12.18-.22.3-.28.1-.06.21-.09.32-.09.11 0 .22.03.32.09.12.06.22.15.29.28.08.1.1.22.1.34 0 .12-.02.25-.08.37a.9.9 0 01-.28.3c-.07.06-.18.1-.3.1zM5 12h14v-2H5v2zm0-4h14V6H5v2zm0 8h14v-2H5v2z" />
              <path fill-rule="evenodd" d="M12 2C6.477 2 2 6.477 2 12c0 4.23 2.636 7.85 6.305 9.245-.583-.243-1.077-.492-1.52-.772A.99.99 0 016 20.89c0-.447.18-.86.495-1.155.074-.069 1.157-1.18 1.157-1.18a.99.99 0 01.707-.293h.001c.266 0 .52.105.707.293l1.165 1.164a.99.99 0 010 1.414.99.99 0 01-1.414 0l-.353-.354c-.195-.195-.512-.195-.707 0-.097.098-.152.227-.152.365v.001c0 .138.055.267.152.365a.99.99 0 01.366.152l.353.354a.99.99 0 010 1.414.99.99 0 01-1.414 0l-.353-.354c-.195-.195-.512-.195-.707 0-.097.098-.152.227-.152.365a.99.99 0 01.152.365l.353.354a.99.99 0 010 1.414.99.99 0 01-1.414 0l-.353-.354c-.195-.195-.512-.195-.707 0-.097.098-.152.227-.152.365v.001c0 .138.055.267.152.365a.99.99 0 01.366.152l.353.354c.2.2.46.29.707.29s.507-.098.707-.293l.353-.354a.99.99 0 011.414 0c.39.39.39 1.023 0 1.414a.99.99 0 01-1.414 0l-.707-.707a.99.99 0 01-1.414 0c-.39-.39-1.023-.39-1.414 0a.99.99 0 010 1.414l.707.707a.99.99 0 010 1.414c-.39.39-1.023.39-1.414 0a.99.99 0 010-1.414l-.707-.707a.99.99 0 01-1.414 0c-.39-.39-1.023-.39-1.414 0a.99.99 0 010 1.414l.707.707c.2.2.46.29.707.29s.507-.098.707-.293l.353-.354a.99.99 0 011.414 0c.39.39.39 1.023 0 1.414a.99.99 0 01-1.414 0l-.707-.707c-.195-.195-.512-.195-.707 0a.99.99 0 010 1.414l.707.707c.2.2.46.29.707.29s.507-.098.707-.293l.353-.354a.99.99 0 011.414 0c.39.39.39 1.023 0 1.414a.99.99 0 01-1.414 0l-.707-.707c-.195-.195-.512-.195-.707 0a.99.99 0 010 1.414l.707.707c.2.2.46.29.707.29s.507-.098.707-.293l.353-.354a.99.99 0 011.414 0c.39.39.39 1.023 0 1.414a.99.99 0 01-1.414 0l-.707-.707c-.195-.195-.512-.195-.707 0a.99.99 0 010 1.414l.707.707c.2.2.46.29.707.29s.507-.098.707-.293l.353-.354a.99.99 0 011.414 0c.39.39.39 1.023 0 1.414a.99.99 0 01-1.414 0l-.707-.707c-.195-.195-.512-.195-.707 0a.99.99 0 010 1.414l.707.707c.2.2.46.29.707.29s.507-.098.707-.293l.353-.354a.99.99 0 011.414 0c.39.39.39 1.023 0 1.414a.99.99 0 01-1.414 0l-.707-.707c.195.195.512.195.707 0a.99.99 0 010 1.414l.707.707c.2.2.46.29.707.29s.507-.098.707-.293l.353-.354a.99.99 0 011.414 0c.39.39.39 1.023 0 1.414a.99.99 0 01-1.414 0l-.707-.707c-.195-.195-.512-.195-.707 0a.99.99 0 010 1.414l.707.707c.2.2.46.29.707.29s.507-.098.707-.293l.353-.354a.99.99 0 011.414 0c.39.39.39 1.023 0 1.414a.99.99 0 01-1.414 0l-.707-.707c-.195-.195-.512-.195-.707 0a.99.99 0 010 1.414l.707.707c.2.2.46.29.707.29s.507-.098.707-.293l.353-.354a.99.99 0 011.414 0c.39.39.39 1.023 0 1.414a.99.99 0 01-1.414 0l-.707-.707c-.195-.195-.512-.195-.707 0a.99.99 0 010 1.414l.707.707c.2.2.46.29.707.29s.507-.098.707-.293l.353-.354a.99.99 0 011.414 0c.39.39.39 1.023 0 1.414a.99.99 0 01-1.414 0l-.707-.707c-.195-.195-.512-.195-.707 0a.99.99 0 010 1.414l.707.707c.2.2.46.29.707.29s.507-.098.707-.293l.353-.354a.99.99 0 011.414 0c.39.39.39 1.023 0 1.414a.99.99 0 01-1.414 0l-.707-.707c-.195-.195-.512-.195-.707 0a.99.99 0 010 1.414l.707.707c.2.2.46.29.707.29s.507-.098.707-.293l.353-.354a.99.99 0 011.414 0c.39.39.39 1.023 0 1.414a.99.99 0 01-1.414 0l-.707-.707c-.195-.195-.512-.195-.707 0a.99.99 0 010 1.414l.707.707c.2.2.46.29.707.29s.507-.098.707-.293l.353-.354a.99.99 0 011.414 0c.39.39.39 1.023 0 1.414a.99.99 0 01-1.414 0l-.707-.707c-.195-.195-.512-.195-.707 0a.99.99 0 010 1.414l.707.707c.2.2.46.29.707.29s.507-.098.707-.293l.353-.354a.99.99 0 011.414 0c.39.39.39 1.023 0 1.414a.99.99 0 01-1.414 0l-.707-.707c-.195-.195-.512-.195-.707 0a.99.99 0 010 1.414l.707.707c.2.2.46.29.707.29s.507-.098.707-.293l.353-.354a.99.99 0 011.414 0c.39.39.39 1.023 0 1.414a.99.99 0 01-1.414 0l-.707-.707c-.195-.195-.512-.195-.707 0a.99.99 0 010 1.414l.707.707c.2.2.46.29.707.29s.507-.098.707-.293l.353-.354a.99.99 0 011.414 0c.39.39.39 1.023 0 1.414a.99.99 0 01-1.414 0l-.707-.707c-.195-.195-.512-.195-.707 0a.99.99 0 010 1.414l.707.707c.2.2.46.29.707.29s.507-.098.707-.293l.353-.354a.99.99 0 011.414 0c.39.39.39 1.023 0 1.414a.99.99 0 01-1.414 0l-.707-.707c-.195-.195-.512-.195-.707 0a.99.99 0 010 1.414l.707.707c.2.2.46.29.707.29s.507-.098.707-.293l.353-.354a.99.99 0 011.414 0c.39.39.39 1.023 0 1.414a.99.99 0 01-1.414 0l-.707-.707c-.195-.195-.512-.195-.707 0a.99.99 0 010 1.414l.707.707c.2.2.46.29.707.29s.507-.098.707-.293l.353-.354a.99.99 0 011.414 0c.39.39.39 1.023 0 1.414a.99.99 0 01-1.414 0l-.707-.707c-.195-.195-.512-.195-.707 0a.99.99 0 010 1.414l.707.707c.2.2.46.29.707.29s.507-.098.707-.293l.353-.354a.99.99 0 011.414 0c.39.39.39 1.023 0 1.414a.99.99 0 01-1.414 0l-.707-.707c-.195-.195-.512-.195-.707 0a.99.99 0 010 1.414l.707.707c.2.2.46.29.707.29s.507-.098.707-.293l.353-.354a.99.99 0 011.414 0c.39.39.39 1.023 0 1.414a.99.99 0 01-1.414 0l-.707-.707c-.195-.195-.512-.195-.707 0a.99.99 0 010 1.414l.707.707c.2.2.46.29.707.29s.507-.098.707-.293l.353-.354a.99.99 0 011.414 0c.39.39.39 1.023 0 1.414a.99.99 0 01-1.414 0l-.707-.707c-.195-.195-.512-.195-.707 0a.99.99 0 010 1.414l.707.707c.2.2.46.29.707.29s.507-.098.707-.293l.353-.354a.99.99 0 011.414 0c.39.39.39 1.023 0 1.414a.99.99 0 01-1.414 0l-.707-.707c-.195-.195-.512-.195-.707 0a.99.99 0 010 1.414l.707.707c.2.2.46.29.707.29s.507-.098.707-.293l.353-.354a.99.99 0 011.414 0c.39.39.39 1.023 0 1.414a.99.99 0 01-1.414 0l-.707-.707c-.195-.195-.512-.195-.707 0a.99.99 0 010 1.414l.707.707c.2.2.46.29.707.29s.507-.098.707-.293l.353-.354a.99.99 0 011.414 0c.39.39.39 1.023 0 1.414a.99.99 0 01-1.414 0l-.707-.707c-.195-.195-.512-.195-.707 0a.99.99 0 010 1.414l.707.707c.2.2.46.29.707.29s.507-.098.707-.293l.353-.354a.99.99 0 011.414 0c.39.39.39 1.023 0 1.414a.99.99 0 01-1.414 0l-.707-.707c-.195-.195-.512-.195-.707 0a.99.99 0 010 1.414l.707.707c.2.2.46.29.707.29s.507-.098.707-.293l.353-.354a.99.99 0 011.414 0c.39.39.39 1.023 0 1.414a.99.99 0 01-1.414 0l-.707-.707c-.195-.195-.512-.195-.707 0a.99.99 0 010 1.414l.707.707c.2.2.46.29.707.29s.507-.098.707-.293l.353-.354a.99.99 0 011.414 0c.39.39.39 1.023 0 1.414a.99.99 0 01-1.414 0l-.707-.707c-.195-.195-.512-.195-.707 0a.99.99 0 010 1.414l.707.707c.2.2.46.29.707.29s.507-.098.707-.293l.353-.354a.99.99 0 011.414 0c.39.39.39 1.023 0 1.414a.99.99 0 01-1.414 0l-.707-.707c-.195-.195-.512-.195-.707 0a.99.99 0 010 1.414l.707.707c.2.2.46.29.707.29s.507-.098.707-.293l.353-.354a.99.99 0 011.414 0c.39.39.39 1.023 0 1.414a.99.99 0 01-1.414 0l-.707-.707c-.195-.195-.512-.195-.707 0a.99.99 0 010 1.414l.707.707zM12 21a9 9 0 100-18 9 9 0 000 18z" clip-rule="evenodd"/>
            </svg>
          </a>
        </div>
      </div>

      <div>
        <h3 class="text-lg font-semibold text-teal-700 dark:text-emerald-300 mb-5">Shop</h3>
        <ul class="space-y-4">
          <li><a href="#" class="text-gray-700 hover:text-teal-600 dark:text-gray-300 dark:hover:text-emerald-400 transition-colors duration-200 text-sm">Handmade Crafts</a></li>
          <li><a href="#" class="text-gray-700 hover:text-teal-600 dark:text-gray-300 dark:hover:text-emerald-400 transition-colors duration-200 text-sm">Organic Produce</a></li>
          <li><a href="#" class="text-gray-700 hover:text-teal-600 dark:text-gray-300 dark:hover:text-emerald-400 transition-colors duration-200 text-sm">Garden & Home</a></li>
          <li><a href="#" class="text-gray-700 hover:text-teal-600 dark:text-gray-300 dark:hover:text-emerald-400 transition-colors duration-200 text-sm">Wellness & Beauty</a></li>
          <li><a href="#" class="text-gray-700 hover:text-teal-600 dark:text-gray-300 dark:hover:text-emerald-400 transition-colors duration-200 text-sm">Seasonal Collections</a></li>
        </ul>
      </div>

      <div>
        <h3 class="text-lg font-semibold text-teal-700 dark:text-emerald-300 mb-5">Sell</h3>
        <ul class="space-y-4">
          <li><a href="#" class="text-gray-700 hover:text-teal-600 dark:text-gray-300 dark:hover:text-emerald-400 transition-colors duration-200 text-sm">Start Selling</a></li>
          <li><a href="#" class="text-gray-700 hover:text-teal-600 dark:text-gray-300 dark:hover:text-emerald-400 transition-colors duration-200 text-sm">Shop Setup</a></li>
          <li><a href="#" class="text-gray-700 hover:text-teal-600 dark:text-gray-300 dark:hover:text-emerald-400 transition-colors duration-200 text-sm">Vendor Tools</a></li>
          <li><a href="#" class="text-gray-700 hover:text-teal-600 dark:text-gray-300 dark:hover:text-emerald-400 transition-colors duration-200 text-sm">Community Guidelines</a></li>
          <li><a href="#" class="text-gray-700 hover:text-teal-600 dark:text-gray-300 dark:hover:text-emerald-400 transition-colors duration-200 text-sm">Partner Program</a></li>
        </ul>
      </div>

      <div>
        <h3 class="text-lg font-semibold text-teal-700 dark:text-emerald-300 mb-5">Help</h3>
        <ul class="space-y-4">
          <li><a href="#" class="text-gray-700 hover:text-teal-600 dark:text-gray-300 dark:hover:text-emerald-400 transition-colors duration-200 text-sm">Contact Us</a></li>
          <li><a href="#" class="text-gray-700 hover:text-teal-600 dark:text-gray-300 dark:hover:text-emerald-400 transition-colors duration-200 text-sm">FAQs</a></li>
          <li><a href="#" class="text-gray-700 hover:text-teal-600 dark:text-gray-300 dark:hover:text-emerald-400 transition-colors duration-200 text-sm">Shipping & Returns</a></li>
          <li><a href="#" class="text-gray-700 hover:text-teal-600 dark:text-gray-300 dark:hover:text-emerald-400 transition-colors duration-200 text-sm">Privacy Policy</a></li>
          <li><a href="#" class="text-gray-700 hover:text-teal-600 dark:text-gray-300 dark:hover:text-emerald-400 transition-colors duration-200 text-sm">Terms of Service</a></li>
        </ul>
      </div>

      <div class="lg:col-span-1">
        <h3 class="text-lg font-semibold text-teal-700 dark:text-emerald-300 mb-5">Join Our Community</h3>
        <p class="text-sm text-gray-700 dark:text-gray-300 mb-4">Subscribe to our newsletter for exclusive offers and updates.</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 px-4 py-2 rounded-lg bg-white dark:bg-gray-800 border border-teal-200 dark:border-emerald-700 focus:ring-2 focus:ring-teal-400 dark:focus:ring-emerald-500 outline-none text-gray-800 dark:text-gray-200 text-sm">
          <button type="submit" class="bg-teal-600 hover:bg-teal-700 dark:bg-emerald-600 dark:hover:bg-emerald-700 text-white font-medium py-2 px-4 rounded-lg shadow-md transition-colors duration-200 text-sm focus:outline-none focus:ring-2 focus:ring-teal-400 focus:ring-offset-2 dark:focus:ring-emerald-500 dark:focus:ring-offset-gray-950">
            Subscribe
          </button>
        </form>
        <div class="mt-8">
          <h4 class="text-md font-semibold text-teal-700 dark:text-emerald-300 mb-3">Latest from our blog</h4>
          <a href="#" class="flex items-center space-x-3 group">
            <img src="https://picsum.photos/60/60?random=1" alt="Blog post thumbnail" class="w-12 h-12 rounded-lg object-cover border-2 border-teal-300 dark:border-emerald-600 group-hover:scale-105 transition-transform duration-200">
            <div>
              <p class="text-sm font-medium text-gray-800 dark:text-gray-200 group-hover:text-teal-600 dark:group-hover:text-emerald-400 transition-colors duration-200">Crafting Sustainability: A Guide for Artisans</p>
              <span class="text-xs text-gray-500 dark:text-gray-400">Oct 26, 2023</span>
            </div>
          </a>
        </div>
      </div>
    </div>

    <div class="border-t border-teal-200 dark:border-emerald-800 pt-8 mt-12 text-center">
      <p class="text-sm text-gray-600 dark:text-gray-400">
        &copy; 2023 NatureNest. All rights reserved. Made with <span class="text-red-500" aria-label="Love">&#x2764;</span> for a better world.
      </p>
    </div>
  </div>
</footer>