Tailwind Footers Components (295)

Footers from Saturn

<section class="py-20">
  <div class="container px-4 mx-auto">
    <div class="max-w-7xl mx-auto">
      <div class="flex flex-wrap -mx-4 pb-28">
        <div class="w-full lg:w-1/2 px-4 mb-12 lg:mb-0">
          <div class="max-w-md mx-auto lg:mx-0">
            <h3 class="max-w-sm font-heading text-5xl md:text-6xl font-bold text-gray-900 mb-6">
              <span>Ready to get</span>
              <span class="font-serif italic">started</span>
              <span>?</span>
            </h3>
            <p class="max-w-sm text-gray-500 mb-16">If there are questions you want to ask, we will answer all your question</p>
            <div class="sm:flex mb-2 items-center">
              <input class="w-full mb-3 sm:mb-0 sm:mr-4 pb-4 bg-transparent border-b border-gray-200 text-sm text-gray-900 placeholder-gray-400 outline-none" type="email" placeholder="Enter your email">
              <button class="relative group inline-block flex-shrink-0 w-full sm:w-auto py-3 px-5 text-sm font-semibold text-orange-50 bg-orange-900 rounded-full overflow-hidden" type="submit">
                <div class="absolute top-0 right-full w-full h-full bg-gray-900 transform group-hover:translate-x-full group-hover:scale-102 transition duration-500"></div>
                <span class="relative">Subscribe</span>
              </button>
            </div>
          </div>
        </div>
        <div class="w-full lg:w-1/2 px-4">
          <div class="max-w-md mx-auto lg:mr-0">
            <p class="text-2xl font-semibold text-gray-900 mb-16">Maybe your question is have been answered, check this out.</p>
            <div class="pb-5 mb-5 border-b border-gray-200">
              <a class="group flex items-center justify-between" href="#">
                <span class="text-lg text-gray-500 group-hover:text-orange-900">What is Coca Soft</span>
                <span>
                  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M14 5L21 12M21 12L14 19M21 12L3 12" stroke="#FF460C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                  </svg>
                </span>
              </a>
            </div>
            <div class="pb-5 mb-5 border-b border-gray-200">
              <a class="group flex items-center justify-between" href="#">
                <span class="text-lg text-gray-500 group-hover:text-orange-900">How can I get service from Coca Soft</span>
                <span>
                  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M14 5L21 12M21 12L14 19M21 12L3 12" stroke="#FF460C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                  </svg>
                </span>
              </a>
            </div>
            <div>
              <a class="group flex items-center justify-between" href="#">
                <span class="text-lg text-gray-500 group-hover:text-orange-900">What kind of service will I get</span>
                <span>
                  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M14 5L21 12M21 12L14 19M21 12L3 12" stroke="#FF460C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                  </svg>
                </span>
              </a>
            </div>
          </div>
        </div>
      </div>
      <div class="pt-10 border-t border-gray-200">
        <div class="lg:flex items-center">
          <div class="flex mb-6 lg:mb-0 lg:mr-18 items-center">
            <a class="inline-block mr-5 hover:bg-orange-50 rounded-md p-1" href="#">
              <img src="saturn-assets/images/footers/icon-facebook.svg" alt="">
            </a>
            <a class="inline-block mr-5 hover:bg-orange-50 rounded-md p-1" href="#">
              <img src="saturn-assets/images/footers/icon-instagram.svg" alt="">
            </a>
            <a class="inline-block mr-5 hover:bg-orange-50 rounded-md p-1" href="#">
              <img src="saturn-assets/images/footers/icon-youtube.svg" alt="">
            </a>
            <a class="inline-block hover:bg-orange-50 rounded-md p-1" href="#">
              <img src="saturn-assets/images/footers/icon-linkedin.svg" alt="">
            </a>
          </div>
          <div class="flex mb-6 lg:mb-0 items-center"><a class="inline-block mr-4 sm:mr-10 text-sm font-semibold text-gray-500 hover:text-gray-600" href="#">Privacy Policy</a><a class="inline-block mr-4 sm:mr-10 text-sm font-semibold text-gray-500 hover:text-gray-600" href="#">Terms &amp; Conditions</a><a class="inline-block text-sm font-semibold text-gray-500 hover:text-gray-600" href="#">Support</a></div>
          <span class="inline-block ml-auto text-sm text-gray-500">© All Rights Reserved</span>
        </div>
      </div>
    </div>
  </div>
</section>

Your next website starts here

Design with AI and generate multiple website concepts in minutes. Make it yours with Shuffle: tweak every detail in a visual editor.

Start with Multi-AI Designer

A landing page for a specialty coffee roastery|

Claude

GPT

Gemini

Describe your idea and compare designs from multiple AI models side by side. Try AI Design

Start with Visual Editor

Components Navigations Headers Features Pricing Footers

Header

Build from 13,400+ UI components and templates, then customize every detail. Try Visual Editor

EXPORT CODE TO THE TECH YOU LOVE

Next.js

Tailwind CSS

shadcn/ui

Laravel

WordPress

Shopify

Next.js

Tailwind CSS

shadcn/ui

Laravel

WordPress

Shopify

Footers from DarkPro

Tailwind CSS

DarkPro

<footer class="py-20 bg-gradient-to-r from-neutral-950 via-neutral-900 to-neutral-950">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap -mx-4 mb-8 lg:mb-16">
      <div class="w-full lg:w-1/3 px-4 mb-12 lg:mb-0">
        <a class="flex items-center text-white text-xl leading-none font-semibold" href="#">
          <div class="w-8 h-8 bg-white rounded-lg flex items-center justify-center mr-3">
            <span class="text-neutral-950 font-medium text-sm">D</span>
          </div>
          <span class="text-transparent bg-clip-text bg-gradient-to-r from-gray-100 via-gray-300 to-gray-100">DarkPro</span>
        </a>
        <p class="mt-5 mb-6 max-w-xs text-neutral-300 leading-relaxed">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <div class="flex items-center space-x-6">
          <a class="inline-block h-6 text-neutral-400 hover:text-white transition-colors duration-200" href="#">
            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
              <path d="M22.46 6c-.77.35-1.6.58-2.46.69.88-.53 1.56-1.37 1.88-2.38-.83.5-1.75.85-2.72 1.05C18.37 4.5 17.26 4 16 4c-2.35 0-4.27 1.92-4.27 4.29 0 .34.04.67.11.98C8.28 9.09 5.11 7.38 3 4.79c-.37.63-.58 1.37-.58 2.15 0 1.49.75 2.81 1.91 3.56-.71 0-1.37-.2-1.95-.5v.03c0 2.08 1.48 3.82 3.44 4.21a4.22 4.22 0 0 1-1.93.07 4.28 4.28 0 0 0 4 2.98 8.521 8.521 0 0 1-5.33 1.84c-.34 0-.68-.02-1.02-.06C3.44 20.29 5.7 21 8.12 21 16 21 20.33 14.46 20.33 8.79c0-.19 0-.37-.01-.56.84-.6 1.56-1.36 2.14-2.23z"></path>
            </svg>
          </a>
          <a class="inline-block h-6 text-neutral-400 hover:text-white transition-colors duration-200" href="#">
            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
              <path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"></path>
            </svg>
          </a>
          <a class="inline-block h-6 text-neutral-400 hover:text-white transition-colors duration-200" href="#">
            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
              <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"></path>
            </svg>
          </a>
          <a class="inline-block h-6 text-neutral-400 hover:text-white transition-colors duration-200" href="#">
            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
              <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"></path>
            </svg>
          </a>
        </div>
      </div>
      <div class="w-full lg:w-2/3 px-4">
        <div class="flex flex-wrap justify-between">
          <div class="w-1/2 lg:w-1/4 mb-8 lg:mb-0">
            <h3 class="mb-6 text-lg font-medium text-transparent bg-clip-text bg-gradient-to-r from-gray-100 via-gray-200 to-gray-300">Company</h3>
            <ul class="text-sm">
              <li class="mb-4"><a class="hover:text-white font-medium text-neutral-300 transition-colors duration-200" href="#">About Us</a></li>
              <li class="mb-4"><a class="hover:text-white font-medium text-neutral-300 transition-colors duration-200" href="#">Careers</a></li>
              <li class="mb-4"><a class="hover:text-white font-medium text-neutral-300 transition-colors duration-200" href="#">Press</a></li>
              <li><a class="hover:text-white font-medium text-neutral-300 transition-colors duration-200" href="#">Blog</a></li>
            </ul>
          </div>
          <div class="w-1/2 lg:w-1/4 mb-8 lg:mb-0">
            <h3 class="mb-6 text-lg font-medium text-transparent bg-clip-text bg-gradient-to-r from-gray-100 via-gray-200 to-gray-300">Pages</h3>
            <ul class="text-sm">
              <li class="mb-4"><a class="hover:text-white font-medium text-neutral-300 transition-colors duration-200" href="#">Login</a></li>
              <li class="mb-4"><a class="hover:text-white font-medium text-neutral-300 transition-colors duration-200" href="#">Register</a></li>
              <li class="mb-4"><a class="hover:text-white font-medium text-neutral-300 transition-colors duration-200" href="#">Add list</a></li>
              <li><a class="hover:text-white font-medium text-neutral-300 transition-colors duration-200" href="#">Contact</a></li>
            </ul>
          </div>
          <div class="w-1/2 lg:w-1/4 mb-8 lg:mb-0">
            <h3 class="mb-6 text-lg font-medium text-transparent bg-clip-text bg-gradient-to-r from-gray-100 via-gray-200 to-gray-300">Legal</h3>
            <ul class="text-sm">
              <li class="mb-4"><a class="hover:text-white font-medium text-neutral-300 transition-colors duration-200" href="#">Terms</a></li>
              <li class="mb-4"><a class="hover:text-white font-medium text-neutral-300 transition-colors duration-200" href="#">About Us</a></li>
              <li class="mb-4"><a class="hover:text-white font-medium text-neutral-300 transition-colors duration-200" href="#">Team</a></li>
              <li><a class="hover:text-white font-medium text-neutral-300 transition-colors duration-200" href="#">Privacy</a></li>
            </ul>
          </div>
          <div class="w-1/2 lg:w-1/4">
            <h3 class="mb-6 text-lg font-medium text-transparent bg-clip-text bg-gradient-to-r from-gray-100 via-gray-200 to-gray-300">Resources</h3>
            <ul class="text-sm">
              <li class="mb-4"><a class="hover:text-white font-medium text-neutral-300 transition-colors duration-200" href="#">Blog</a></li>
              <li class="mb-4"><a class="hover:text-white font-medium text-neutral-300 transition-colors duration-200" href="#">Service</a></li>
              <li class="mb-4"><a class="hover:text-white font-medium text-neutral-300 transition-colors duration-200" href="#">Product</a></li>
              <li><a class="hover:text-white font-medium text-neutral-300 transition-colors duration-200" href="#">Pricing</a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <div class="border-t border-neutral-700 pt-8">
      <p class="lg:text-center text-sm text-neutral-400">All rights reserved. © DarkPro Inc.</p>
    </div>
  </div>
</footer>

Footers from Flaro

Tailwind CSS

Flaro

<section class="pt-24 bg-white overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="pb-20 border-b">
      <div class="flex flex-wrap -m-8">
        <div class="w-full sm:w-1/2 lg:w-2/12 p-8">
          <h3 class="mb-6 font-semibold leading-normal">Company</h3>
          <ul>
            <li class="mb-3.5"><a class="text-gray-600 hover:text-gray-700 font-medium leading-relaxed" href="#">About Us</a></li>
            <li class="mb-3.5"><a class="text-gray-600 hover:text-gray-700 font-medium leading-relaxed" href="#">Careers</a></li>
            <li class="mb-3.5"><a class="text-gray-600 hover:text-gray-700 font-medium leading-relaxed" href="#">Press</a></li>
            <li><a class="text-gray-600 hover:text-gray-700 font-medium leading-relaxed" href="#">Blog</a></li>
          </ul>
        </div>
        <div class="w-full sm:w-1/2 lg:w-2/12 p-8">
          <h3 class="mb-6 font-semibold leading-normal">Pages</h3>
          <ul>
            <li class="mb-3.5"><a class="text-gray-600 hover:text-gray-700 font-medium leading-relaxed" href="#">Login</a></li>
            <li class="mb-3.5"><a class="text-gray-600 hover:text-gray-700 font-medium leading-relaxed" href="#">Register</a></li>
            <li class="mb-3.5"><a class="text-gray-600 hover:text-gray-700 font-medium leading-relaxed" href="#">Add list</a></li>
            <li><a class="text-gray-600 hover:text-gray-700 font-medium leading-relaxed" href="#">Contact</a></li>
          </ul>
        </div>
        <div class="w-full sm:w-1/2 lg:w-2/12 p-8">
          <h3 class="mb-6 font-semibold leading-normal">Legal</h3>
          <ul>
            <li class="mb-3.5"><a class="text-gray-600 hover:text-gray-700 font-medium leading-relaxed" href="#">Terms</a></li>
            <li class="mb-3.5"><a class="text-gray-600 hover:text-gray-700 font-medium leading-relaxed" href="#">About Us</a></li>
            <li class="mb-3.5"><a class="text-gray-600 hover:text-gray-700 font-medium leading-relaxed" href="#">Team</a></li>
            <li><a class="text-gray-600 hover:text-gray-700 font-medium leading-relaxed" href="#">Privacy</a></li>
          </ul>
        </div>
        <div class="w-full sm:w-1/2 lg:w-2/12 p-8">
          <h3 class="mb-6 font-semibold leading-normal">Resources</h3>
          <ul>
            <li class="mb-3.5"><a class="text-gray-600 hover:text-gray-700 font-medium leading-relaxed" href="#">Blog</a></li>
            <li class="mb-3.5"><a class="text-gray-600 hover:text-gray-700 font-medium leading-relaxed" href="#">Service</a></li>
            <li class="mb-3.5"><a class="text-gray-600 hover:text-gray-700 font-medium leading-relaxed" href="#">Product</a></li>
            <li><a class="text-gray-600 hover:text-gray-700 font-medium leading-relaxed" href="#">Pricing</a></li>
          </ul>
        </div>
        <div class="w-full sm:w-1/2 lg:w-4/12 p-8">
          <div class="lg:max-w-sm">
            <h3 class="mb-6 font-semibold leading-normal">Subscribe</h3>
            <p class="mb-5 font-sans text-gray-600 leading-relaxed">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <div class="mb-3 xl:pl-6 inline-block md:max-w-xl w-full overflow-hidden border border-gray-300 rounded-xl focus-within:ring focus-within:ring-indigo-300">
              <div class="flex flex-wrap items-center">
                <div class="w-full xl:flex-1">
                  <input class="p-3 xl:p-0 xl:pr-6 w-full font-medium text-gray-500 placeholder-gray-500 outline-none" id="footerInput1-1" type="text" placeholder="Type your e-mail">
                </div>
                <div class="w-full xl:w-auto">
                  <div class="block">
                    <button class="py-4 px-8 w-full text-white font-semibold border border-indigo-700 focus:ring focus:ring-indigo-300 bg-indigo-600 hover:bg-indigo-700 transition ease-in-out duration-200" type="button">Subscribe</button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="flex flex-wrap justify-between items-center py-6 -m-4">
      <div class="w-auto p-4">
        <a href="#">
          <img class="h-8" src="flaro-assets/logos/flaro-logo-black.svg" alt="">
        </a>
      </div>
      <div class="w-auto p-4">
        <p class="text-sm text-gray-600 font-medium">Copyright © 2022 Flaro. All Rights Reserved</p>
      </div>
      <div class="w-auto p-4">
        <div class="flex flex-wrap -m-4">
          <div class="w-auto p-4">
            <a class="text-blueGray-400 hover:text-blueGray-500" href="#">
              <svg width="9" height="16" viewBox="0 0 9 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M5.68503 5.32446L5.68503 3.82446C5.68503 3.17446 5.84293 2.82446 6.94819 2.82446H8.31661V0.324463L6.21135 0.324463C3.57977 0.324463 2.52714 1.97446 2.52714 3.82446V5.32446H0.421875L0.421875 7.82446H2.52714L2.52714 15.3245H5.68503L5.68503 7.82446H8.00082L8.31661 5.32446H5.68503Z" fill="currentColor"></path>
              </svg>
            </a>
          </div>
          <div class="w-auto p-4">
            <a class="text-indigo-600 hover:text-indigo-700" href="#">
              <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M7.81641 0.324463C5.78109 0.324463 5.52516 0.333838 4.72547 0.369463C3.92578 0.406963 3.38109 0.532588 2.90391 0.718213C2.40337 0.906481 1.94999 1.2018 1.57547 1.58353C1.19398 1.95824 0.898694 2.41156 0.710156 2.91196C0.524531 3.38821 0.397969 3.93384 0.361406 4.73071C0.325781 5.53228 0.316406 5.78728 0.316406 7.8254C0.316406 9.86165 0.325781 10.1167 0.361406 10.9163C0.398906 11.7151 0.524531 12.2598 0.710156 12.737C0.902344 13.2301 1.15828 13.6482 1.57547 14.0654C1.99172 14.4826 2.40984 14.7395 2.90297 14.9307C3.38109 15.1163 3.92484 15.2429 4.72359 15.2795C5.52422 15.3151 5.77922 15.3245 7.81641 15.3245C9.85359 15.3245 10.1077 15.3151 10.9083 15.2795C11.7061 15.242 12.2527 15.1163 12.7298 14.9307C13.2301 14.7424 13.6831 14.447 14.0573 14.0654C14.4745 13.6482 14.7305 13.2301 14.9227 12.737C15.1073 12.2598 15.2339 11.7151 15.2714 10.9163C15.307 10.1167 15.3164 9.86165 15.3164 7.82446C15.3164 5.78728 15.307 5.53228 15.2714 4.73165C15.2339 3.93384 15.1073 3.38821 14.9227 2.91196C14.7341 2.41155 14.4389 1.95822 14.0573 1.58353C13.6829 1.20166 13.2295 0.906318 12.7289 0.718213C12.2508 0.532588 11.7052 0.406025 10.9073 0.369463C10.1067 0.333838 9.85266 0.324463 7.81453 0.324463H7.81734H7.81641ZM7.14422 1.67634H7.81734C9.81984 1.67634 10.057 1.6829 10.8473 1.71946C11.5786 1.75228 11.9761 1.87509 12.2405 1.97728C12.5902 2.11321 12.8405 2.27634 13.103 2.53884C13.3655 2.80134 13.5277 3.05071 13.6636 3.40134C13.7667 3.66478 13.8886 4.06228 13.9214 4.79353C13.958 5.58384 13.9655 5.82103 13.9655 7.82259C13.9655 9.82415 13.958 10.0623 13.9214 10.8526C13.8886 11.5838 13.7658 11.9804 13.6636 12.2448C13.5434 12.5704 13.3514 12.8649 13.102 13.1063C12.8395 13.3688 12.5902 13.531 12.2395 13.667C11.977 13.7701 11.5795 13.892 10.8473 13.9257C10.057 13.9613 9.81984 13.9698 7.81734 13.9698C5.81484 13.9698 5.57672 13.9613 4.78641 13.9257C4.05516 13.892 3.65859 13.7701 3.39422 13.667C3.06844 13.5469 2.77371 13.3553 2.53172 13.1063C2.28211 12.8645 2.0899 12.5698 1.96922 12.2438C1.86703 11.9804 1.74422 11.5829 1.71141 10.8517C1.67578 10.0613 1.66828 9.82415 1.66828 7.82071C1.66828 5.81821 1.67578 5.58196 1.71141 4.79165C1.74516 4.0604 1.86703 3.6629 1.97016 3.39853C2.10609 3.04884 2.26922 2.79853 2.53172 2.53603C2.79422 2.27353 3.04359 2.11134 3.39422 1.9754C3.65859 1.87228 4.05516 1.7504 4.78641 1.71665C5.47828 1.68478 5.74641 1.6754 7.14422 1.67446V1.67634ZM11.8205 2.92134C11.7023 2.92134 11.5852 2.94462 11.4761 2.98985C11.3669 3.03508 11.2676 3.10137 11.1841 3.18494C11.1005 3.26851 11.0342 3.36773 10.989 3.47692C10.9437 3.58612 10.9205 3.70315 10.9205 3.82134C10.9205 3.93953 10.9437 4.05656 10.989 4.16575C11.0342 4.27495 11.1005 4.37416 11.1841 4.45773C11.2676 4.54131 11.3669 4.6076 11.4761 4.65283C11.5852 4.69806 11.7023 4.72134 11.8205 4.72134C12.0592 4.72134 12.2881 4.62652 12.4569 4.45773C12.6256 4.28895 12.7205 4.06003 12.7205 3.82134C12.7205 3.58264 12.6256 3.35372 12.4569 3.18494C12.2881 3.01616 12.0592 2.92134 11.8205 2.92134ZM7.81734 3.97321C7.30647 3.96524 6.79912 4.05898 6.32482 4.24897C5.85053 4.43896 5.41876 4.7214 5.05467 5.07986C4.69058 5.43832 4.40143 5.86562 4.20407 6.33689C4.0067 6.80817 3.90506 7.314 3.90506 7.82493C3.90506 8.33587 4.0067 8.84169 4.20407 9.31297C4.40143 9.78424 4.69058 10.2115 5.05467 10.57C5.41876 10.9285 5.85053 11.2109 6.32482 11.4009C6.79912 11.5909 7.30647 11.6846 7.81734 11.6767C8.82848 11.6609 9.79286 11.2481 10.5023 10.5275C11.2118 9.80689 11.6094 8.83619 11.6094 7.82493C11.6094 6.81368 11.2118 5.84297 10.5023 5.12235C9.79286 4.40173 8.82848 3.98899 7.81734 3.97321ZM7.81734 5.32415C8.48047 5.32415 9.11643 5.58758 9.58533 6.05648C10.0542 6.52537 10.3177 7.16134 10.3177 7.82446C10.3177 8.48759 10.0542 9.12355 9.58533 9.59245C9.11643 10.0613 8.48047 10.3248 7.81734 10.3248C7.15422 10.3248 6.51826 10.0613 6.04936 9.59245C5.58046 9.12355 5.31703 8.48759 5.31703 7.82446C5.31703 7.16134 5.58046 6.52537 6.04936 6.05648C6.51826 5.58758 7.15422 5.32415 7.81734 5.32415Z" fill="currentColor"></path>
              </svg>
            </a>
          </div>
          <div class="w-auto p-4">
            <a class="text-blueGray-400 hover:text-blueGray-500" href="#">
              <svg width="16" height="15" viewBox="0 0 16 15" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M3.67326 14.8544H0.564368L0.564368 5.46737H3.67326L3.67326 14.8544ZM2.11694 4.18691C1.12295 4.18691 0.316406 3.41461 0.316406 2.48264C0.316406 2.0349 0.506105 1.6055 0.84377 1.2889C1.18144 0.972297 1.63941 0.794434 2.11694 0.794434C2.59447 0.794434 3.05244 0.972297 3.39011 1.2889C3.72778 1.6055 3.91747 2.0349 3.91747 2.48264C3.91747 3.41461 3.11093 4.18691 2.11694 4.18691ZM15.3087 14.8544H12.2068V10.2849C12.2068 9.19579 12.1832 7.79933 10.5905 7.79933C8.97418 7.79933 8.72622 8.98237 8.72622 10.2066V14.8544L5.62054 14.8544L5.62054 5.46737H8.60197V6.74784H8.64535C9.0604 6.01019 10.0742 5.23187 11.5866 5.23187C14.733 5.23187 15.3114 7.17466 15.3114 9.69793V14.8544H15.3087Z" fill="currentColor"></path>
              </svg>
            </a>
          </div>
          <div class="w-auto p-4">
            <a class="text-blueGray-400 hover:text-blueGray-500" href="#">
              <svg width="15" height="13" viewBox="0 0 15 13" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M15.0005 2.27494C14.4603 2.50797 13.8724 2.67569 13.2669 2.74101C13.8956 2.36751 14.3664 1.77744 14.591 1.08151C14.001 1.43246 13.3547 1.67855 12.6808 1.80887C12.3991 1.50773 12.0584 1.26784 11.68 1.10413C11.3015 0.940414 10.8934 0.856396 10.4811 0.857307C8.81277 0.857307 7.47106 2.20962 7.47106 3.86911C7.47106 4.10214 7.49931 4.33518 7.54521 4.55938C5.04715 4.42874 2.8192 3.23532 1.33802 1.40812C1.06813 1.86909 0.9267 2.39397 0.928441 2.92814C0.928441 3.97327 1.45983 4.89481 2.27015 5.4368C1.79262 5.41799 1.32626 5.28673 0.909022 5.0537V5.09077C0.909022 6.5543 1.94355 7.76714 3.32234 8.04608C3.06346 8.11332 2.79714 8.14773 2.52967 8.14847C2.33371 8.14847 2.14834 8.12905 1.96121 8.10257C2.34254 9.29599 3.45298 10.1628 4.77528 10.1911C3.74074 11.0014 2.44493 11.478 1.0379 11.478C0.785443 11.478 0.552408 11.4692 0.310547 11.441C1.6452 12.2972 3.22877 12.7915 4.93416 12.7915C10.4705 12.7915 13.4999 8.20497 13.4999 4.22395C13.4999 4.09331 13.4999 3.96267 13.4911 3.83203C14.0772 3.40304 14.591 2.87165 15.0005 2.27494Z" fill="currentColor"></path>
              </svg>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Footers from Gradia

Tailwind CSS

Gradia

<section class="relative py-24 overflow-hidden"><img class="absolute bottom-0 left-0" src="gradia-assets/elements/footers/radial.svg" alt="">
  <div class="relative z-10 container mx-auto px-4">
    <div class="flex flex-wrap -m-6">
      <div class="w-full md:w-1/2 lg:w-5/12 p-6">
        <div class="flex flex-col justify-between h-full">
          <div><img class="mb-16" src="gradia-assets/logos/gradia-name-black.svg" alt=""></div>
          <div>
            <p class="mb-4 font-heading font-medium text-base" >The boldest SaaS kit in the market.</p>
            <p class="text-gray-600 text-sm" >© Copyright 2022. All Rights Reserved by Gradia.</p>
          </div>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-2/12 p-6">
        <div class="h-full">
          <h3 class="mb-9 font-heading font-semibold text-xs text-gray-500 uppercase tracking-px" >Company</h3>
          <ul>
            <li class="mb-4"><a class="font-heading font-medium text-base text-gray-900 hover:text-gray-700" href="#" >Features</a></li>
            <li class="mb-4"><a class="font-heading font-medium text-base text-gray-900 hover:text-gray-700" href="#" >Pricing</a></li>
            <li class="mb-4"><a class="font-heading font-medium text-base text-gray-900 hover:text-gray-700" href="#" >Affiliate Program</a></li>
            <li><a class="font-heading font-medium text-base text-gray-900 hover:text-gray-700" href="#" >Press Kit</a></li>
          </ul>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-2/12 p-6">
        <div class="h-full">
          <h3 class="mb-9 font-heading font-semibold text-xs text-gray-500 uppercase tracking-px" >Support</h3>
          <ul>
            <li class="mb-4"><a class="font-heading font-medium text-base text-gray-900 hover:text-gray-700" href="#" >Account</a></li>
            <li class="mb-4"><a class="font-heading font-medium text-base text-gray-900 hover:text-gray-700" href="#" >Help</a></li>
            <li class="mb-4"><a class="font-heading font-medium text-base text-gray-900 hover:text-gray-700" href="#" >Contact Us</a></li>
            <li><a class="font-heading font-medium text-base text-gray-900 hover:text-gray-700" href="#" >Customer Support</a></li>
          </ul>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-3/12 p-6">
        <div class="h-full">
          <h3 class="mb-9 font-heading font-semibold text-xs text-gray-500 uppercase tracking-px" >Legals</h3>
          <ul>
            <li class="mb-4"><a class="font-heading font-medium text-base text-gray-900 hover:text-gray-700" href="#" >Terms &amp; Conditions</a></li>
            <li class="mb-4"><a class="font-heading font-medium text-base text-gray-900 hover:text-gray-700" href="#" >Privacy Policy</a></li>
            <li><a class="font-heading font-medium text-base text-gray-900 hover:text-gray-700" href="#" >Licensing</a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</section>

Footers from Solstice

Tailwind CSS

Solstice

<div class="pt-24 pb-12 border-b border-gray-100">
  <div class="container mx-auto px-4">
    <div class="flex items-center justify-between flex-wrap gap-8">
      <a href="#">
        <img src="solstice-assets/images/logos/solstice-logo-dark.svg" alt="">
      </a>
      <ul class="flex items-center gap-6 flex-wrap">
        <li class="text-gray-800 hover:text-opacity-70 transition duration-200"><a href="#">Platform</a></li>
        <li class="text-gray-800 hover:text-opacity-70 transition duration-200"><a href="#">Features</a></li>
        <li class="text-gray-800 hover:text-opacity-70 transition duration-200"><a href="#">How it works</a></li>
        <li class="text-gray-800 hover:text-opacity-70 transition duration-200"><a href="#">Resources</a></li>
        <li class="text-gray-800 hover:text-opacity-70 transition duration-200"><a href="#">FAQs</a></li>
      </ul>
      <div class="flex items-center gap-6 flex-wrap">
        <a class="text-gray-400 hover:text-gray-600 transition duration-200" href="#">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
            <path d="M22.46 6C21.69 6.35 20.86 6.58 20 6.69C20.88 6.16 21.56 5.32 21.88 4.31C21.05 4.81 20.13 5.16 19.16 5.36C18.37 4.5 17.26 4 16 4C13.65 4 11.73 5.92 11.73 8.29C11.73 8.63 11.77 8.96 11.84 9.27C8.28001 9.09 5.11001 7.38 3.00001 4.79C2.63001 5.42 2.42001 6.16 2.42001 6.94C2.42001 8.43 3.17001 9.75 4.33001 10.5C3.62001 10.5 2.96001 10.3 2.38001 10V10.03C2.38001 12.11 3.86001 13.85 5.82001 14.24C5.19074 14.4122 4.5301 14.4362 3.89001 14.31C4.16162 15.1625 4.69355 15.9084 5.41103 16.4429C6.1285 16.9775 6.99546 17.2737 7.89001 17.29C6.37364 18.4904 4.494 19.1393 2.56001 19.13C2.22001 19.13 1.88001 19.11 1.54001 19.07C3.44001 20.29 5.70001 21 8.12001 21C16 21 20.33 14.46 20.33 8.79C20.33 8.6 20.33 8.42 20.32 8.23C21.16 7.63 21.88 6.87 22.46 6Z" fill="currentColor"></path>
          </svg>
        </a>
        <a class="text-gray-400 hover:text-gray-600 transition duration-200" href="#">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
            <path d="M19 3C19.5304 3 20.0391 3.21071 20.4142 3.58579C20.7893 3.96086 21 4.46957 21 5V19C21 19.5304 20.7893 20.0391 20.4142 20.4142C20.0391 20.7893 19.5304 21 19 21H5C4.46957 21 3.96086 20.7893 3.58579 20.4142C3.21071 20.0391 3 19.5304 3 19V5C3 4.46957 3.21071 3.96086 3.58579 3.58579C3.96086 3.21071 4.46957 3 5 3H19ZM18.5 18.5V13.2C18.5 12.3354 18.1565 11.5062 17.5452 10.8948C16.9338 10.2835 16.1046 9.94 15.24 9.94C14.39 9.94 13.4 10.46 12.92 11.24V10.13H10.13V18.5H12.92V13.57C12.92 12.8 13.54 12.17 14.31 12.17C14.6813 12.17 15.0374 12.3175 15.2999 12.5801C15.5625 12.8426 15.71 13.1987 15.71 13.57V18.5H18.5ZM6.88 8.56C7.32556 8.56 7.75288 8.383 8.06794 8.06794C8.383 7.75288 8.56 7.32556 8.56 6.88C8.56 5.95 7.81 5.19 6.88 5.19C6.43178 5.19 6.00193 5.36805 5.68499 5.68499C5.36805 6.00193 5.19 6.43178 5.19 6.88C5.19 7.81 5.95 8.56 6.88 8.56ZM8.27 18.5V10.13H5.5V18.5H8.27Z" fill="currentColor"></path>
          </svg>
        </a>
        <a class="text-gray-400 hover:text-gray-600 transition duration-200" href="#">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
            <path d="M7.8 2H16.2C19.4 2 22 4.6 22 7.8V16.2C22 17.7383 21.3889 19.2135 20.3012 20.3012C19.2135 21.3889 17.7383 22 16.2 22H7.8C4.6 22 2 19.4 2 16.2V7.8C2 6.26174 2.61107 4.78649 3.69878 3.69878C4.78649 2.61107 6.26174 2 7.8 2ZM7.6 4C6.64522 4 5.72955 4.37928 5.05442 5.05442C4.37928 5.72955 4 6.64522 4 7.6V16.4C4 18.39 5.61 20 7.6 20H16.4C17.3548 20 18.2705 19.6207 18.9456 18.9456C19.6207 18.2705 20 17.3548 20 16.4V7.6C20 5.61 18.39 4 16.4 4H7.6ZM17.25 5.5C17.5815 5.5 17.8995 5.6317 18.1339 5.86612C18.3683 6.10054 18.5 6.41848 18.5 6.75C18.5 7.08152 18.3683 7.39946 18.1339 7.63388C17.8995 7.8683 17.5815 8 17.25 8C16.9185 8 16.6005 7.8683 16.3661 7.63388C16.1317 7.39946 16 7.08152 16 6.75C16 6.41848 16.1317 6.10054 16.3661 5.86612C16.6005 5.6317 16.9185 5.5 17.25 5.5ZM12 7C13.3261 7 14.5979 7.52678 15.5355 8.46447C16.4732 9.40215 17 10.6739 17 12C17 13.3261 16.4732 14.5979 15.5355 15.5355C14.5979 16.4732 13.3261 17 12 17C10.6739 17 9.40215 16.4732 8.46447 15.5355C7.52678 14.5979 7 13.3261 7 12C7 10.6739 7.52678 9.40215 8.46447 8.46447C9.40215 7.52678 10.6739 7 12 7ZM12 9C11.2044 9 10.4413 9.31607 9.87868 9.87868C9.31607 10.4413 9 11.2044 9 12C9 12.7956 9.31607 13.5587 9.87868 14.1213C10.4413 14.6839 11.2044 15 12 15C12.7956 15 13.5587 14.6839 14.1213 14.1213C14.6839 13.5587 15 12.7956 15 12C15 11.2044 14.6839 10.4413 14.1213 9.87868C13.5587 9.31607 12.7956 9 12 9Z" fill="currentColor"></path>
          </svg>
        </a>
      </div>
    </div>
  </div>
</div>
<div class="py-12">
  <p class="text-center text-sm text-gray-400">Made with heart © 2023 Solstice. All rights reserved.</p>
</div>

Footers from Basko

Tailwind CSS

Basko

<section class="py-24 bg-black overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="mb-14 p-11 rounded-2xl" style="background: url('basko-assets/images/gradient.png'); background-repeat: no-repeat; background-size: cover;">
      <div class="flex flex-wrap items-center -m-8">
        <div class="w-full md:w-1/2 p-8">
          <h2 class="font-heading text-6xl text-white tracking-tighter">Grow your business fast with Basko Productivity Tool.</h2>
        </div>
        <div class="w-full md:w-1/2 p-8">
          <div class="flex flex-wrap md:justify-end">
            <div class="auto"><a class="inline-block px-5 py-4 text-white font-semibold tracking-tight bg-gray-700 hover:bg-gray-800 rounded-lg focus:ring-4 focus:ring-indigo-300 transition duration-200" href="#">Try 14 Days Free Trial</a></div>
          </div>
        </div>
      </div>
    </div>
    <div class="flex flex-wrap justify-between -m-8">
      <div class="w-auto p-8">
        <h3 class="mb-7 text-white font-semibold tracking-tight">Company</h3>
        <ul>
          <li class="mb-6 text-gray-200 tracking-tight"><a class="text-white hover:text-gray-300 tracking-tight transition duration-200" href="#">About</a></li>
          <li class="mb-6 text-gray-200 tracking-tight"><a class="text-white hover:text-gray-300 tracking-tight transition duration-200" href="#">Features</a></li>
          <li class="mb-6 text-gray-200 tracking-tight"><a class="text-white hover:text-gray-300 tracking-tight transition duration-200" href="#">Works</a></li>
          <li class="text-gray-200 tracking-tight"><a class="text-white hover:text-gray-300 tracking-tight transition duration-200" href="#">Career</a></li>
        </ul>
      </div>
      <div class="w-auto p-8">
        <h3 class="mb-7 text-white font-semibold tracking-tight">Help</h3>
        <ul>
          <li class="mb-6 text-gray-200 tracking-tight"><a class="text-white hover:text-gray-300 tracking-tight transition duration-200" href="#">Customer Support</a></li>
          <li class="mb-6 text-gray-200 tracking-tight"><a class="text-white hover:text-gray-300 tracking-tight transition duration-200" href="#">Delivery Details</a></li>
          <li class="mb-6 text-gray-200 tracking-tight"><a class="text-white hover:text-gray-300 tracking-tight transition duration-200" href="#">Terms &amp; Conditions</a></li>
          <li class="text-gray-200 tracking-tight"><a class="text-white hover:text-gray-300 tracking-tight transition duration-200" href="#">Privacy Policy</a></li>
        </ul>
      </div>
      <div class="w-auto p-8">
        <h3 class="mb-7 text-white font-semibold tracking-tight">Resources</h3>
        <ul>
          <li class="mb-6 text-gray-200 tracking-tight"><a class="text-white hover:text-gray-300 tracking-tight transition duration-200" href="#">Free eBooks</a></li>
          <li class="mb-6 text-gray-200 tracking-tight"><a class="text-white hover:text-gray-300 tracking-tight transition duration-200" href="#">Development Tutorial</a></li>
          <li class="mb-6 text-gray-200 tracking-tight"><a class="text-white hover:text-gray-300 tracking-tight transition duration-200" href="#">How to - Blog</a></li>
          <li class="text-gray-200 tracking-tight"><a class="text-white hover:text-gray-300 tracking-tight transition duration-200" href="#">Youtube Playlist</a></li>
        </ul>
      </div>
      <div class="w-auto p-8">
        <h3 class="mb-7 text-white font-semibold tracking-tight">Links</h3>
        <ul>
          <li class="mb-6 text-gray-200 tracking-tight"><a class="text-white hover:text-gray-300 tracking-tight transition duration-200" href="#">Free eBooks</a></li>
          <li class="mb-6 text-gray-200 tracking-tight"><a class="text-white hover:text-gray-300 tracking-tight transition duration-200" href="#">Development Tutorial</a></li>
          <li class="mb-6 text-gray-200 tracking-tight"><a class="text-white hover:text-gray-300 tracking-tight transition duration-200" href="#">How to - Blog</a></li>
          <li class="text-gray-200 tracking-tight"><a class="text-white hover:text-gray-300 tracking-tight transition duration-200" href="#">Youtube Playlist</a></li>
        </ul>
      </div>
    </div>
  </div>
</section>

Footers from Zanrly

Tailwind CSS

Zanrly

<section class="py-10 bg-white overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="relative px-10 pt-10 pb-6 bg-gray-100 overflow-hidden border border-gray-100 rounded-3xl">
      <div class="absolute top-1/2 left-1/2 min-w-max transform -translate-x-1/2 -translate-y-1/2">
        <div class="absolute bg-gradient-radial-gray w-full h-full"></div>
        <img src="zanrly-assets/images/pattern-white.png" alt="">
      </div>
      <div class="relative">
        <div class="flex flex-wrap items-center justify-between mb-10 -m-4">
          <div class="w-full md:w-1/2 p-4">
            <a class="inline-block" href="#">
              <img src="zanrly-assets/logos/zanrly-logo.svg" alt="">
            </a>
          </div>
          <div class="w-full md:w-1/2 p-4">
            <div class="md:max-w-md ml-auto">
              <div class="flex flex-wrap items-center -m-2">
                <div class="w-full md:flex-1 p-1.5">
                  <input class="px-4 py-2.5 w-full text-sm text-gray-500 font-bold bg-white outline-none focus:ring-4 focus:ring-blue-200 placeholder-gray-500 border border-gray-200 rounded-full" id="footerLightPattern1-1" type="text" placeholder="Email address">
                </div>
                <div class="w-full md:w-auto p-1.5">
                  <div class="flex flex-wrap justify-center -m-2">
                    <div class="w-full md:w-auto p-2"><a class="block w-full px-4 py-2.5 text-sm text-center text-white font-bold bg-blue-500 hover:bg-blue-600 focus:ring-4 focus:ring-blue-200 rounded-full" href="#">Get Started</a></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="p-10 mb-6 bg-white rounded-3xl">
          <div class="flex flex-wrap justify-between -m-4">
            <div class="w-auto p-4">
              <h3 class="font-heading mb-7 text-gray-900 font-bold">Product</h3>
              <ul>
                <li class="mb-4"><a class="inline-block text-gray-500 hover:text-gray-600 font-bold" href="#">Careers</a></li>
                <li class="mb-4"><a class="inline-block text-gray-500 hover:text-gray-600 font-bold" href="#">About Us</a></li>
                <li class="mb-4"><a class="inline-block text-gray-500 hover:text-gray-600 font-bold" href="#">Insights</a></li>
                <li class="mb-4"><a class="inline-block text-gray-500 hover:text-gray-600 font-bold" href="#">PCI Compliance</a></li>
                <li class="mb-4"><a class="inline-block text-gray-500 hover:text-gray-600 font-bold" href="#">Intro Articles</a></li>
                <li><a class="inline-block text-gray-500 hover:text-gray-600 font-bold" href="#">Pricing</a></li>
              </ul>
            </div>
            <div class="w-auto p-4">
              <h3 class="font-heading mb-7 text-gray-900 font-bold">For Developers</h3>
              <ul>
                <li class="mb-4"><a class="inline-block text-gray-500 hover:text-gray-600 font-bold" href="#">Docs</a></li>
                <li class="mb-4"><a class="inline-block text-gray-500 hover:text-gray-600 font-bold" href="#">Knowledge Base</a></li>
                <li class="mb-4"><a class="inline-block text-gray-500 hover:text-gray-600 font-bold" href="#">System Status</a></li>
                <li><a class="inline-block text-gray-500 hover:text-gray-600 font-bold" href="#">Security</a></li>
              </ul>
            </div>
            <div class="w-auto p-4">
              <h3 class="font-heading mb-7 text-gray-900 font-bold">Resources</h3>
              <ul>
                <li class="mb-4"><a class="inline-block text-gray-500 hover:text-gray-600 font-bold" href="#">About</a></li>
                <li class="mb-4"><a class="inline-block text-gray-500 hover:text-gray-600 font-bold" href="#">Leadership</a></li>
                <li class="mb-4"><a class="inline-block text-gray-500 hover:text-gray-600 font-bold" href="#">Press/News</a></li>
                <li class="mb-4"><a class="inline-block text-gray-500 hover:text-gray-600 font-bold" href="#">Careers/Team</a></li>
                <li><a class="inline-block text-gray-500 hover:text-gray-600 font-bold" href="#">Contact Us</a></li>
              </ul>
            </div>
            <div class="w-auto p-4">
              <h3 class="font-heading mb-7 text-gray-900 font-bold">Legal</h3>
              <ul>
                <li class="mb-4"><a class="inline-block text-gray-500 hover:text-gray-600 font-bold" href="#">Docs</a></li>
                <li class="mb-4"><a class="inline-block text-gray-500 hover:text-gray-600 font-bold" href="#">Knowledge Base</a></li>
                <li class="mb-4"><a class="inline-block text-gray-500 hover:text-gray-600 font-bold" href="#">System Status</a></li>
                <li><a class="inline-block text-gray-500 hover:text-gray-600 font-bold" href="#">Security</a></li>
              </ul>
            </div>
          </div>
        </div>
        <div class="flex flex-wrap justify-center items-center -m-1">
          <div class="w-auto p-1">
            <p class="text-gray-500 text-center font-medium">© Copyright 2022. All rights reserved by</p>
          </div>
          <div class="w-auto p-1">
            <img src="zanrly-assets/logos/zanrly-logo-small.svg" alt="">
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Footers from Nightsable

Tailwind CSS

Nightsable

<section class="bg-gray-50 overflow-hidden">
  <div class="py-14 bg-black rounded-b-7xl"></div>
  <div class="py-24">
    <div class="container px-4 mx-auto">
      <div class="flex flex-wrap justify-center -m-8 mb-28">
        <div class="w-full md:w-1/2 lg:w-4/12 p-8">
          <div class="md:max-w-xs">
            <img class="mb-7" src="nightsable-assets/logos/logo-dark.svg" alt="">
            <p class="text-gray-400 font-medium">Nightsable is a strategic branding agency focused on brand creation, rebrands, and brand</p>
          </div>
        </div>
        <div class="w-full md:w-1/2 lg:w-2/12 p-8">
          <h3 class="mb-6 text-lg text-black font-medium">About</h3>
          <ul>
            <li class="mb-2.5"><a class="inline-block text-lg font-medium text-gray-400 hover:text-black transition duration-300" href="#">Contact</a></li>
            <li class="mb-2.5"><a class="inline-block text-lg font-medium text-gray-400 hover:text-black transition duration-300" href="#">Blog</a></li>
            <li class="mb-2.5"><a class="inline-block text-lg font-medium text-gray-400 hover:text-black transition duration-300" href="#">Our Story</a></li>
            <li><a class="inline-block text-lg font-medium text-gray-400 hover:text-black transition duration-300" href="#">Careers</a></li>
          </ul>
        </div>
        <div class="w-full md:w-1/2 lg:w-2/12 p-8">
          <h3 class="mb-6 text-lg text-black font-medium">Company</h3>
          <ul>
            <li class="mb-2.5"><a class="inline-block text-lg font-medium text-gray-400 hover:text-black transition duration-300" href="#">Contact</a></li>
            <li class="mb-2.5"><a class="inline-block text-lg font-medium text-gray-400 hover:text-black transition duration-300" href="#">Blog</a></li>
            <li class="mb-2.5"><a class="inline-block text-lg font-medium text-gray-400 hover:text-black transition duration-300" href="#">Our Story</a></li>
            <li><a class="inline-block text-lg font-medium text-gray-400 hover:text-black transition duration-300" href="#">Careers</a></li>
          </ul>
        </div>
        <div class="w-full md:w-1/2 lg:flex-1 p-8">
          <div class="flex flex-wrap -m-2">
            <div class="w-full p-2">
              <a class="block py-5 px-8 bg-white rounded-full" href="#">
                <div class="flex flex-wrap items-center -m-2">
                  <div class="w-auto p-2">
                    <img src="nightsable-assets/images/footers/twitter.svg" alt="">
                  </div>
                  <div class="flex-1 p-2">
                    <p class="text-black">Follow us on Twitter for updates</p>
                  </div>
                </div>
              </a>
            </div>
            <div class="w-full p-2">
              <a class="block py-5 px-8 bg-white rounded-full" href="#">
                <div class="flex flex-wrap items-center -m-2">
                  <div class="w-auto p-2">
                    <img src="nightsable-assets/images/footers/instagram.svg" alt="">
                  </div>
                  <div class="flex-1 p-2">
                    <p class="text-black">Follow us on Instagram for updates</p>
                  </div>
                </div>
              </a>
            </div>
            <div class="w-full p-2">
              <a class="block py-5 px-8 bg-white rounded-full" href="#">
                <div class="flex flex-wrap items-center -m-2">
                  <div class="w-auto p-2">
                    <img src="nightsable-assets/images/footers/tiktok.svg" alt="">
                  </div>
                  <div class="flex-1 p-2">
                    <p class="text-black">Follow us on TikTok for updates</p>
                  </div>
                </div>
              </a>
            </div>
          </div>
        </div>
      </div>
      <div class="flex flex-wrap justify-between -m-2">
        <div class="w-auto p-2">
          <p class="inline-block text-sm font-medium text-black text-opacity-60">© 2023 Nightsablestudio.co</p>
        </div>
        <div class="w-auto p-2">
          <div class="flex flex-wrap items-center -m-2 sm:-m-7">
            <div class="w-auto p-2 sm:p-7"><a class="inline-block text-sm text-black text-opacity-60 hover:text-opacity-100 font-medium transition duration-300" href="#">Terms of Use</a></div>
            <div class="w-auto p-2 sm:p-7"><a class="inline-block text-sm text-black text-opacity-60 hover:text-opacity-100 font-medium transition duration-300" href="#">Privacy Policy</a></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Footers from Zeus

Tailwind CSS

Zeus

<section class="py-12 lg:py-20">
  <div class="container mx-auto px-4 mb-12 md:mb-20">
    <div class="flex flex-wrap -mx-4">
      <div class="w-full lg:w-1/3 px-4 mb-6 lg:mb-0">
        <a class="inline-block mb-5 text-gray-900 text-lg font-semibold" href="#">
          <img class="h-7" src="zeus-assets/logo/logo-zeus-red.svg" alt="" width="auto">
        </a>
        <p class="mb-6 max-w-sm text-base text-gray-500">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <div>
          <a class="inline-block w-10 mr-4" href="#">
            <svg width="10" height="18" viewBox="0 0 10 18" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path fill-rule="evenodd" clip-rule="evenodd" d="M6.63469 17.7274V9.76612H9.35806L9.76664 6.66255H6.63469V4.68138C6.63469 3.78311 6.88796 3.17095 8.20273 3.17095L9.87687 3.17027V0.394337C9.58735 0.357434 8.59354 0.272827 7.43684 0.272827C5.02146 0.272827 3.36785 1.71891 3.36785 4.37401V6.66255H0.63623V9.76612H3.36785V17.7274H6.63469Z" fill="#838EA4"></path>
            </svg>
          </a>
          <a class="inline-block w-10 mr-4" href="#">
            <svg width="19" height="16" viewBox="0 0 19 16" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path fill-rule="evenodd" clip-rule="evenodd" d="M18.8181 2.14598C18.1356 2.44844 17.4032 2.65356 16.6336 2.74513C17.4194 2.27462 18.0208 1.52831 18.3059 0.641769C17.5689 1.0775 16.7553 1.39389 15.8885 1.56541C15.1943 0.82489 14.2069 0.363647 13.1118 0.363647C11.0108 0.363647 9.30722 2.06719 9.30722 4.16707C9.30722 4.46489 9.34083 4.75577 9.40573 5.03392C6.24434 4.87513 3.44104 3.3605 1.56483 1.05895C1.23686 1.61986 1.05028 2.27344 1.05028 2.9711C1.05028 4.29107 1.72243 5.45574 2.74225 6.13713C2.11877 6.11629 1.53237 5.94477 1.01901 5.65968V5.70719C1.01901 7.5498 2.33086 9.08762 4.07031 9.43762C3.75161 9.52338 3.41555 9.57089 3.06789 9.57089C2.82222 9.57089 2.58464 9.54656 2.3517 9.5002C2.8361 11.0125 4.24067 12.1123 5.90483 12.1424C4.6034 13.1623 2.96243 13.7683 1.1801 13.7683C0.873008 13.7683 0.570523 13.7498 0.272705 13.7162C1.95655 14.7974 3.95561 15.4279 6.10416 15.4279C13.1026 15.4279 16.928 9.63117 16.928 4.60398L16.9153 4.11147C17.6627 3.57835 18.3094 2.90853 18.8181 2.14598Z" fill="#838EA4"></path>
            </svg>
          </a>
          <a class="inline-block w-10 mr-4" href="#">
            <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M5.4 15.8H5.9V15.3V7.2V6.7H5.4H2.7H2.2V7.2V15.3V15.8H2.7H5.4ZM15.3 15.8H15.8V15.3V10.17C15.8 8.18386 14.1361 6.52 12.15 6.52C11.6417 6.52 11.1085 6.68661 10.6472 6.94292C10.5635 6.98941 10.4809 7.03957 10.4 7.09321V6.7H9.9H7.2H6.7V7.2V15.3V15.8H7.2H9.9H10.4V15.3V10.53C10.4 10.0862 10.8062 9.68 11.25 9.68C11.6938 9.68 12.1 10.0862 12.1 10.53V15.3V15.8H12.6H15.3ZM1.8 0.5H16.2C16.9139 0.5 17.5 1.08614 17.5 1.8V16.2C17.5 16.9139 16.9139 17.5 16.2 17.5H1.8C1.08614 17.5 0.5 16.9139 0.5 16.2V1.8C0.5 1.08614 1.08614 0.5 1.8 0.5ZM1.93 4.05C1.93 5.22614 2.87386 6.17 4.05 6.17C5.22614 6.17 6.17 5.22614 6.17 4.05C6.17 2.87386 5.22614 1.93 4.05 1.93C2.87386 1.93 1.93 2.87386 1.93 4.05Z" fill="#838EA4" stroke="#838EA4"></path>
            </svg>
          </a>
        </div>
      </div>
      <div class="w-full lg:w-2/3 px-4">
        <div class="flex flex-wrap justify-between -mx-4">
          <div class="w-1/2 lg:w-1/4 px-4 mb-8 lg:mb-0">
            <h3 class="mb-6 text-base font-medium">Company</h3>
            <ul class="text-sm">
              <li class="mb-4"><a class="text-gray-500 hover:text-gray-600" href="#">About Us</a></li>
              <li class="mb-4"><a class="text-gray-500 hover:text-gray-600" href="#">Careers</a></li>
              <li class="mb-4"><a class="text-gray-500 hover:text-gray-600" href="#">Press</a></li>
              <li><a class="text-gray-500 hover:text-gray-600" href="#">Blog</a></li>
            </ul>
          </div>
          <div class="w-1/2 lg:w-1/4 px-4 mb-8 lg:mb-0">
            <h3 class="mb-6 text-base font-medium">Pages</h3>
            <ul class="text-sm">
              <li class="mb-4"><a class="text-gray-500 hover:text-gray-600" href="#">Login</a></li>
              <li class="mb-4"><a class="text-gray-500 hover:text-gray-600" href="#">Register</a></li>
              <li class="mb-4"><a class="text-gray-500 hover:text-gray-600" href="#">Add list</a></li>
              <li><a class="text-gray-500 hover:text-gray-600" href="#">Contact</a></li>
            </ul>
          </div>
          <div class="w-1/2 lg:w-1/4 px-4 mb-8 lg:mb-0">
            <h3 class="mb-6 text-base font-medium">Legal</h3>
            <ul class="text-sm">
              <li class="mb-4"><a class="text-gray-500 hover:text-gray-600" href="#">Terms</a></li>
              <li class="mb-4"><a class="text-gray-500 hover:text-gray-600" href="#">About Us</a></li>
              <li class="mb-4"><a class="text-gray-500 hover:text-gray-600" href="#">Team</a></li>
              <li><a class="text-gray-500 hover:text-gray-600" href="#">Privacy</a></li>
            </ul>
          </div>
          <div class="w-1/2 lg:w-1/4 px-4">
            <h3 class="mb-6 text-base font-medium">Resources</h3>
            <ul class="text-sm">
              <li class="mb-4"><a class="text-gray-500 hover:text-gray-600" href="#">Blog</a></li>
              <li class="mb-4"><a class="text-gray-500 hover:text-gray-600" href="#">Service</a></li>
              <li class="mb-4"><a class="text-gray-500 hover:text-gray-600" href="#">Product</a></li>
              <li><a class="text-gray-500 hover:text-gray-600" href="#">Pricing</a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
  <p class="text-center text-sm text-gray-500 pt-8 px-4 border-t">All rights reserved © Zeus Corporation 2021</p>
</section>

Footers from Zospace

Tailwind CSS

Zospace

<section class="py-20 2xl:py-40 bg-gray-800">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap -mx-4 pb-24 mb-16 border-b border-gray-400">
      <div class="w-full lg:w-2/5 px-4 mb-16 lg:mb-0">
        <span class="text-lg text-blue-400 font-bold">We're Zospace</span>
        <h2 class="max-w-sm mt-8 mb-12 text-5xl text-white font-bold font-heading">Thank you for your time</h2>
        <p class="mb-16 text-gray-300">The brown fox jumps over the lazy dog.</p>
        <div><a class="inline-block mb-4 sm:mb-0 sm:mr-4 py-4 px-12 text-white font-bold bg-blue-500 hover:bg-blue-600 rounded-full transition duration-200" href="#">Active demo</a><a class="inline-block px-12 py-4 text-white font-bold border border-gray-200 hover:border-white rounded-full" href="#">Contact</a></div>
      </div>
      <div class="w-full lg:w-3/5 px-4">
        <div class="flex flex-wrap -mx-4">
          <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-16 lg:mb-0">
            <ul class="text-lg">
              <li class="mb-6"><a class="text-gray-200 hover:text-gray-100" href="#">Hello</a></li>
              <li class="mb-6"><a class="text-gray-200 hover:text-gray-100" href="#">Story</a></li>
              <li class="mb-6"><a class="text-gray-200 hover:text-gray-100" href="#">Pricing</a></li>
              <li class="mb-6"><a class="text-gray-200 hover:text-gray-100" href="#">Applications</a></li>
              <li class="mb-6"><a class="text-gray-200 hover:text-gray-100" href="#">Stats</a></li>
              <li><a class="text-gray-200 hover:text-gray-100" href="#">Blog</a></li>
            </ul>
          </div>
          <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-16 lg:mb-0">
            <ul class="text-lg">
              <li class="mb-6"><a class="text-gray-200 hover:text-gray-100" href="#">Newsletter</a></li>
              <li class="mb-6"><a class="text-gray-200 hover:text-gray-100" href="#">Features</a></li>
              <li class="mb-6"><a class="text-gray-200 hover:text-gray-100" href="#">How it works</a></li>
              <li class="mb-6"><a class="text-gray-200 hover:text-gray-100" href="#">FAQ</a></li>
              <li class="mb-6"><a class="text-gray-200 hover:text-gray-100" href="#">Portfolio</a></li>
              <li><a class="text-gray-200 hover:text-gray-100" href="#">Team</a></li>
            </ul>
          </div>
          <div class="w-full lg:w-1/3 px-4">
            <ul class="text-lg">
              <li class="mb-6"><a class="text-gray-200 hover:text-gray-100" href="#">New account</a></li>
              <li class="mb-6"><a class="text-gray-200 hover:text-gray-100" href="#">Log in</a></li>
              <li class="mb-6"><a class="text-gray-200 hover:text-gray-100" href="#">Testimonials</a></li>
              <li class="mb-6"><a class="text-gray-200 hover:text-gray-100" href="#">Contact</a></li>
              <li class="mb-6"><a class="text-gray-200 hover:text-gray-100" href="#">Privacy Policy</a></li>
              <li><a class="text-gray-200 hover:text-gray-100" href="#">Cookies</a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <div class="md:flex justify-between">
      <p class="text-lg text-gray-200 mb-8 md:mb-0">© 2021 Shuffle. All rights reserved.</p>
      <div class="flex items-center">
        <a class="inline-block mr-2" href="#">
          <img class="h-12" src="zospace-assets/logos/facebook.svg" alt="">
        </a>
        <a class="inline-block mr-2" href="#">
          <img class="h-12" src="zospace-assets/logos/instagram.svg" alt="">
        </a>
        <a class="inline-block" href="#">
          <img class="h-12" src="zospace-assets/logos/twitter.svg" alt="">
        </a>
      </div>
    </div>
  </div>
</section>

Footers from Wrexa

Tailwind CSS

Wrexa

<section class="py-24 md:py-40 bg-gray-900 relative">
  <div class="absolute top-0 left-0 w-full h-6">
    <div class="mx-8 h-6 bg-white"></div>
  </div>
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap items-center -mx-4 mb-28">
      <div class="w-full xl:w-2/3 px-4 mb-8 xl:mb-0">
        <h3 class="font-heading text-2xl sm:text-3xl text-white mb-4">Have any question?</h3>
        <h2 class="font-heading text-4xl sm:text-5xl md:text-6xl text-white">Follow us and our story</h2>
      </div>
      <div class="w-full xl:w-auto px-4 xl:ml-auto"><a class="inline-block px-7 py-4 text-center font-medium border border-gray-500 hover:border-gray-400 text-white rounded" href="#">Get Started</a></div>
    </div>
    <div class="flex flex-wrap -mx-4 -mb-8">
      <div class="w-1/2 lg:w-1/3 xl:w-1/5 px-4 mb-8">
        <h4 class="text-white mb-5">About</h4>
        <ul>
          <li class="mb-4"><a class="inline-block text-gray-500 hover:text-gray-400 font-light" href="#">Story</a></li>
          <li class="mb-4"><a class="inline-block text-gray-500 hover:text-gray-400 font-light" href="#">Creative Team</a></li>
          <li class="mb-4"><a class="inline-block text-gray-500 hover:text-gray-400 font-light" href="#">Founders</a></li>
          <li class="mb-4"><a class="inline-block text-gray-500 hover:text-gray-400 font-light" href="#">Why Us</a></li>
          <li class="mb-4"><a class="inline-block text-gray-500 hover:text-gray-400 font-light" href="#">Our Mission</a></li>
          <li><a class="inline-block text-gray-500 hover:text-gray-400 font-light" href="#">Idea</a></li>
        </ul>
      </div>
      <div class="w-1/2 lg:w-1/3 xl:w-1/5 px-4 mb-8">
        <h4 class="text-white mb-5">Product</h4>
        <ul>
          <li class="mb-4"><a class="inline-block text-gray-500 hover:text-gray-400 font-light" href="#">Plans</a></li>
          <li class="mb-4"><a class="inline-block text-gray-500 hover:text-gray-400 font-light" href="#">Pricing</a></li>
          <li class="mb-4"><a class="inline-block text-gray-500 hover:text-gray-400 font-light" href="#">Integration</a></li>
          <li class="mb-4"><a class="inline-block text-gray-500 hover:text-gray-400 font-light" href="#">Sign Up</a></li>
          <li><a class="inline-block text-gray-500 hover:text-gray-400 font-light" href="#">Careers</a></li>
        </ul>
      </div>
      <div class="w-1/2 lg:w-1/3 xl:w-1/5 px-4 mb-8">
        <h4 class="text-white mb-5">Follow</h4>
        <ul>
          <li class="mb-4"><a class="inline-block text-gray-500 hover:text-gray-400 font-light" href="#">LinkedIn</a></li>
          <li class="mb-4"><a class="inline-block text-gray-500 hover:text-gray-400 font-light" href="#">Twitter</a></li>
          <li class="mb-4"><a class="inline-block text-gray-500 hover:text-gray-400 font-light" href="#">Snapchat</a></li>
          <li class="mb-4"><a class="inline-block text-gray-500 hover:text-gray-400 font-light" href="#">Instagram</a></li>
          <li><a class="inline-block text-gray-500 hover:text-gray-400 font-light" href="#">Facebook</a></li>
        </ul>
      </div>
      <div class="w-1/2 lg:w-1/3 xl:w-1/5 px-4 mb-8">
        <h4 class="text-white mb-5">Application</h4>
        <ul>
          <li class="mb-4"><a class="inline-block text-gray-500 hover:text-gray-400 font-light" href="#">Download Desktop</a></li>
          <li class="mb-4"><a class="inline-block text-gray-500 hover:text-gray-400 font-light" href="#">Download Mobile</a></li>
          <li class="mb-4"><a class="inline-block text-gray-500 hover:text-gray-400 font-light" href="#">Sign Up</a></li>
          <li class="mb-4"><a class="inline-block text-gray-500 hover:text-gray-400 font-light" href="#">Sign In</a></li>
          <li class="mb-4"><a class="inline-block text-gray-500 hover:text-gray-400 font-light" href="#">Your history</a></li>
          <li class="mb-4"><a class="inline-block text-gray-500 hover:text-gray-400 font-light" href="#">FAQ's</a></li>
          <li><a class="inline-block text-gray-500 hover:text-gray-400 font-light" href="#">Integrations</a></li>
        </ul>
      </div>
      <div class="w-1/2 lg:w-1/3 xl:w-1/5 px-4 mb-8">
        <h4 class="text-white mb-5">Support</h4>
        <ul>
          <li class="mb-4"><a class="inline-block text-gray-500 hover:text-gray-400 font-light" href="#">FAQ's</a></li>
          <li class="mb-4"><a class="inline-block text-gray-500 hover:text-gray-400 font-light" href="#">Live Chat</a></li>
          <li class="mb-4"><a class="inline-block text-gray-500 hover:text-gray-400 font-light" href="#">Hotline +442234480171</a></li>
          <li><a class="inline-block text-gray-500 hover:text-gray-400 font-light" href="#">Messages</a></li>
        </ul>
      </div>
    </div>
    <div class="mt-24 pb-16 -mb-4 border-b border-gray-700"><a class="inline-block text-gray-500 hover:text-gray-400 font-light mb-4 mr-4" href="#">Privacy Policy</a><a class="inline-block text-gray-500 hover:text-gray-400 font-light mb-4 mr-4" href="#">Responsible Disclosure</a><a class="inline-block text-gray-500 hover:text-gray-400 font-light mb-4 mr-4" href="#">Program Policy</a><a class="inline-block text-gray-500 hover:text-gray-400 font-light mb-4" href="#">Terms and Conditions</a></div>
    <div class="flex items-center justify-end mt-10">
      <span class="text-white">© 2022 Wrexa</span>
      <a class="inline-block ml-8" href="#">
        <img class="w-16 h-16" src="wrexa-assets/logos/wrexa-logo-primary.svg" alt="">
      </a>
    </div>
  </div>
</section>

Footers from Flex

Tailwind CSS

Flex

<section class="bg-white">
  <div class="wave-top w-full text-coolGray-50">
    <svg viewbox="0 0 1440 116" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M1440 64.5909H1090.08C833.336 64.5909 580.229 -7.62939e-06 360 -7.62939e-06C139.771 -7.62939e-06 0 64.5909 0 64.5909V116H1440V64.5909Z" fill="currentColor"></path>
    </svg>
  </div>
  <div class="bg-coolGray-50" style="background-image: url('flex-ui-assets/elements/pattern-light1.svg'); background-position: center;">
    <div class="container px-4 mx-auto">
      <div class="pt-24 pb-11 mx-auto max-w-4xl">
        <a class="block md:mx-auto mb-5 max-w-max" href="#">
          <img class="h-8" src="flex-ui-assets/logos/flex-ui-green-light.svg" alt="">
        </a>
        <div class="flex flex-wrap justify-center -mx-3 lg:-mx-6">
          <div class="w-full md:w-auto p-3 md:px-6"><a class="inline-block text-lg md:text-xl text-coolGray-500 hover:text-coolGray-600 font-medium" href="#">Product</a></div>
          <div class="w-full md:w-auto p-3 md:px-6"><a class="inline-block text-lg md:text-xl text-coolGray-500 hover:text-coolGray-600 font-medium" href="#">Features</a></div>
          <div class="w-full md:w-auto p-3 md:px-6"><a class="inline-block text-lg md:text-xl text-coolGray-500 hover:text-coolGray-600 font-medium" href="#">Pricing</a></div>
          <div class="w-full md:w-auto p-3 md:px-6"><a class="inline-block text-lg md:text-xl text-coolGray-500 hover:text-coolGray-600 font-medium" href="#">Resources</a></div>
          <div class="w-full md:w-auto p-3 md:px-6"><a class="inline-block text-lg md:text-xl text-coolGray-500 hover:text-coolGray-600 font-medium" href="#">Careers</a></div>
          <div class="w-full md:w-auto p-3 md:px-6"><a class="inline-block text-lg md:text-xl text-coolGray-500 hover:text-coolGray-600 font-medium" href="#">Help</a></div>
          <div class="w-full md:w-auto p-3 md:px-6"><a class="inline-block text-lg md:text-xl text-coolGray-500 hover:text-coolGray-600 font-medium" href="#">Privacy</a></div>
        </div>
      </div>
    </div>
    <div class="border-b border-coolGray-100"></div>
    <div class="container px-4 mx-auto">
      <p class="py-10 md:pb-20 text-lg md:text-xl text-coolGray-400 font-medium text-center">&copy; 2021 Flex. All rights reserved.</p>
    </div>
  </div>
</section>

Footers from Uinel

Tailwind CSS

Uinel

<section class="py-24 2xl:py-44 bg-blueGray-50">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap -mx-4 mb-14 lg:mb-24">
      <div class="w-full sm:w-1/2 md:w-1/3 lg:w-1/5 px-4 mb-10 lg:mb-0">
        <h3 class="mb-10 font-heading font-medium tracking-tighter text-xl">About Uinel</h3>
        <ul>
          <li class="mb-5"><a class="text-darkBlueGray-400 hover:text-darkBlueGray-500" href="#">About us</a></li>
          <li class="mb-5"><a class="text-darkBlueGray-400 hover:text-darkBlueGray-500" href="#">Stories</a></li>
          <li class="mb-5"><a class="text-darkBlueGray-400 hover:text-darkBlueGray-500" href="#">Our people</a></li>
          <li class="mb-5"><a class="text-darkBlueGray-400 hover:text-darkBlueGray-500" href="#">Founders</a></li>
          <li class="mb-5"><a class="text-darkBlueGray-400 hover:text-darkBlueGray-500" href="#">Why Uinel</a></li>
          <li class="mb-5"><a class="text-darkBlueGray-400 hover:text-darkBlueGray-500" href="#">How we compare</a></li>
          <li class="mb-5"><a class="text-darkBlueGray-400 hover:text-darkBlueGray-500" href="#">Website</a></li>
          <li class="mb-5"><a class="text-darkBlueGray-400 hover:text-darkBlueGray-500" href="#">Idea</a></li>
          <li class="mb-5"><a class="text-darkBlueGray-400 hover:text-darkBlueGray-500" href="#">Mission</a></li>
          <li><a class="text-darkBlueGray-400 hover:text-darkBlueGray-500" href="#">Newsroom</a></li>
        </ul>
      </div>
      <div class="w-full sm:w-1/2 md:w-1/3 lg:w-1/5 px-4 mb-10 lg:mb-0">
        <h3 class="mb-10 font-heading font-medium tracking-tighter text-xl">Product &amp; Tools</h3>
        <ul>
          <li class="mb-5"><a class="text-darkBlueGray-400 hover:text-darkBlueGray-500" href="#">Download Uinel</a></li>
          <li class="mb-5"><a class="text-darkBlueGray-400 hover:text-darkBlueGray-500" href="#">Sign up free</a></li>
          <li class="mb-5"><a class="text-darkBlueGray-400 hover:text-darkBlueGray-500" href="#">Pricing</a></li>
          <li class="mb-5"><a class="text-darkBlueGray-400 hover:text-darkBlueGray-500" href="#">Features</a></li>
          <li class="mb-5"><a class="text-darkBlueGray-400 hover:text-darkBlueGray-500" href="#">Google integrations</a></li>
          <li class="mb-5"><a class="text-darkBlueGray-400 hover:text-darkBlueGray-500" href="#">Microsoft integrations</a></li>
          <li class="mb-5"><a class="text-darkBlueGray-400 hover:text-darkBlueGray-500" href="#">Dropbox integrations</a></li>
          <li><a class="text-darkBlueGray-400 hover:text-darkBlueGray-500" href="#">Mobile App</a></li>
        </ul>
      </div>
      <div class="w-full sm:w-1/2 md:w-1/3 lg:w-1/5 px-4 mb-10 lg:mb-0">
        <h3 class="mb-10 font-heading font-medium tracking-tighter text-xl">Community</h3>
        <ul>
          <li class="mb-5"><a class="text-darkBlueGray-400 hover:text-darkBlueGray-500" href="#">UI Designers</a></li>
          <li class="mb-5"><a class="text-darkBlueGray-400 hover:text-darkBlueGray-500" href="#">UX Designers</a></li>
          <li class="mb-5"><a class="text-darkBlueGray-400 hover:text-darkBlueGray-500" href="#">Graphic Designers</a></li>
          <li class="mb-5"><a class="text-darkBlueGray-400 hover:text-darkBlueGray-500" href="#">Developers</a></li>
          <li><a class="text-darkBlueGray-400 hover:text-darkBlueGray-500" href="#">Events</a></li>
        </ul>
      </div>
      <div class="w-full sm:w-1/2 md:w-1/3 lg:w-1/5 px-4 mb-10 sm:mb-0">
        <h3 class="mb-10 font-heading font-medium tracking-tighter text-xl">Support</h3>
        <ul>
          <li class="mb-5"><a class="text-darkBlueGray-400 hover:text-darkBlueGray-500" href="#">Your account</a></li>
          <li class="mb-5"><a class="text-darkBlueGray-400 hover:text-darkBlueGray-500" href="#">Hire an experts</a></li>
          <li class="mb-5"><a class="text-darkBlueGray-400 hover:text-darkBlueGray-500" href="#">Help center</a></li>
          <li class="mb-5"><a class="text-darkBlueGray-400 hover:text-darkBlueGray-500" href="#">For students</a></li>
          <li class="mb-5"><a class="text-darkBlueGray-400 hover:text-darkBlueGray-500" href="#">Manage cookies</a></li>
          <li class="mb-5"><a class="text-darkBlueGray-400 hover:text-darkBlueGray-500" href="#">FAQ's</a></li>
          <li class="mb-5"><a class="text-darkBlueGray-400 hover:text-darkBlueGray-500" href="#">Viedos on YT</a></li>
          <li><a class="text-darkBlueGray-400 hover:text-darkBlueGray-500" href="#">Contact</a></li>
        </ul>
      </div>
      <div class="w-full sm:w-1/2 md:w-1/3 lg:w-1/5 px-4">
        <h3 class="mb-10 font-heading font-medium tracking-tighter text-xl">More</h3>
        <ul>
          <li class="mb-5"><a class="text-darkBlueGray-400 hover:text-darkBlueGray-500" href="#">LinkedIn</a></li>
          <li class="mb-5"><a class="text-darkBlueGray-400 hover:text-darkBlueGray-500" href="#">Spotify x Uinel</a></li>
          <li class="mb-5"><a class="text-darkBlueGray-400 hover:text-darkBlueGray-500" href="#">Twitter</a></li>
          <li class="mb-5"><a class="text-darkBlueGray-400 hover:text-darkBlueGray-500" href="#">Instagram</a></li>
          <li><a class="text-darkBlueGray-400 hover:text-darkBlueGray-500" href="#">Facebook</a></li>
        </ul>
      </div>
    </div>
    <div class="flex flex-wrap items-center -mx-4">
      <div class="w-full lg:w-1/6 px-4 mb-10 lg:mb-0">
        <a class="font-bold text-xl" href="#">
          <img class="h-12" src="uinel-assets/logos/uinel-gray-black.svg" alt="">
        </a>
      </div>
      <div class="w-full lg:w-3/6 px-4 mb-10 lg:mb-0">
        <a class="mr-16 font-heading text-darkBlueGray-300 hover:text-darkBlueGray-400" href="#">New tools</a>
        <a class="mr-16 inline-flex items-center font-heading text-darkBlueGray-300 hover:text-darkBlueGray-400" href="#">
          <span class="mr-4">Security</span>
          <svg width="8" height="5" viewBox="0 0 8 5" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M6.97291 0.193232C7.20854 -0.0644107 7.58938 -0.0644107 7.82328 0.193232C8.05804 0.450875 8.05978 0.867141 7.82328 1.12478L4.42529 4.80677C4.19053 5.06441 3.81056 5.06441 3.57406 4.80677L0.176073 1.12478C-0.0586909 0.868102 -0.0586909 0.450875 0.176073 0.193232C0.411706 -0.0644107 0.792544 -0.0644107 1.02644 0.193232L4.00098 3.21284L6.97291 0.193232Z" fill="currentColor"></path>
          </svg>
        </a>
        <a class="font-heading text-darkBlueGray-300 hover:text-darkBlueGray-400" href="#">Join for free</a>
      </div>
      <div class="w-full lg:w-2/6 px-4">
        <div class="flex items-center">
          <p class="mr-20 text-sm tracking-widest text-darkBlueGray-300">© 2021 UINEL</p>
          <a href="#">
            <img src="uinel-assets/images/footers/scroll-down.svg" alt="">
          </a>
        </div>
      </div>
    </div>
  </div>
</section>

Footers from Yofte

Tailwind CSS

Yofte

<section class="bg-gray-100">
  <div class="flex flex-wrap">
    <div class="w-full md:w-5/12 lg:w-3/12 py-20 px-6 bg-white">
      <div class="max-w-xs mx-auto">
        <a class="inline-block mb-12 text-3xl font-bold font-heading" href="#">
          <img class="h-9" src="yofte-assets/logos/yofte-logo.svg" alt="" width="auto">
        </a>
        <div class="mb-12 font-semibold font-heading">
          <p>Our Store</p>
          <p>Nørremark 51, 8700 Horsens</p>
          <p>Denmark</p>
        </div>
        <div class="flex mb-16 md:mb-40">
          <a class="inline-flex items-center justify-center w-12 h-12 mr-2 bg-blue-500 rounded-full" href="#">
            <img src="yofte-assets/buttons/facebook-circle.svg" alt="">
          </a>
          <a class="inline-flex items-center justify-center w-12 h-12 mr-2 bg-indigo-300 rounded-full" href="#">
            <img src="yofte-assets/buttons/instagram-circle.svg" alt="">
          </a>
          <a class="inline-flex items-center justify-center w-12 h-12 bg-blue-300 rounded-full" href="#">
            <img src="yofte-assets/buttons/twitter-circle.svg" alt="">
          </a>
        </div>
        <div class="flex flex-wrap">
          <div class="w-1/3 px-1 mb-2 lg:mb-0">
            <img class="w-full" src="yofte-assets/brands/visa.svg" alt="">
          </div>
          <div class="w-1/3 px-1 mb-2 lg:mb-0">
            <img class="w-full" src="yofte-assets/brands/paypal.svg" alt="">
          </div>
          <div class="w-1/3 px-1 mb-2 lg:mb-0">
            <img class="w-full" src="yofte-assets/brands/mastercard.svg" alt="">
          </div>
        </div>
      </div>
    </div>
    <div class="w-full md:w-7/12 lg:w-9/12 py-20 px-6 lg:pl-40">
      <ul class="flex flex-wrap -mx-3 -mb-3">
        <li class="w-1/2 md:w-1/2 lg:w-1/3 xl:w-auto px-3 mb-3"><a class="inline-block w-32 py-2 text-center hover:text-white bg-white hover:bg-gray-900 rounded-full transition duration-300" href="#">Category</a></li>
        <li class="w-1/2 lg:w-1/3 xl:w-auto px-3 mb-3"><a class="inline-block w-32 py-2 text-center hover:text-white bg-white hover:bg-gray-900 rounded-full transition duration-300" href="#">Collection</a></li>
        <li class="w-1/2 lg:w-1/3 xl:w-auto px-3 mb-3"><a class="inline-block w-32 py-2 text-center hover:text-white bg-white hover:bg-gray-900 rounded-full transition duration-300" href="#">Story</a></li>
        <li class="w-1/2 lg:w-1/3 xl:w-auto px-3 mb-3"><a class="inline-block w-32 py-2 text-center hover:text-white bg-white hover:bg-gray-900 rounded-full transition duration-300" href="#">Brand</a></li>
        <li class="w-1/2 lg:w-1/3 xl:w-auto px-3 mb-3"><a class="inline-block w-32 py-2 text-center hover:text-white bg-white hover:bg-gray-900 rounded-full transition duration-300" href="#">Partners</a></li>
        <li class="w-1/2 lg:w-1/3 xl:w-auto px-3 mb-3"><a class="inline-block w-32 py-2 text-center hover:text-white bg-white hover:bg-gray-900 rounded-full transition duration-300" href="#">Videos</a></li>
      </ul>
      <div class="flex flex-wrap mt-16 -mx-4 pb-20 border-b">
        <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-10 lg:mb-0">
          <h3 class="mb-8 text-xl font-bold font-heading">Information</h3>
          <ul>
            <li class="mb-6"><a class="hover:underline" href="#">Newsroom</a></li>
            <li class="mb-6"><a class="hover:underline" href="#">Story</a></li>
            <li class="mb-6"><a class="hover:underline" href="#">Yofte Careers</a></li>
            <li class="mb-6"><a class="hover:underline" href="#">Investor Relations</a></li>
            <li class="mb-6"><a class="hover:underline" href="#">Reward program</a></li>
            <li class="mb-6"><a class="hover:underline" href="#">Delivery information</a></li>
            <li><a class="hover:underline" href="#">Paying by invoice</a></li>
          </ul>
        </div>
        <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-10 lg:mb-0">
          <h3 class="mb-8 text-xl font-bold font-heading">Customer Service</h3>
          <ul>
            <li class="mb-6"><a class="hover:underline" href="#">Return an order</a></li>
            <li class="mb-6"><a class="hover:underline" href="#">Search Terms</a></li>
            <li class="mb-6"><a class="hover:underline" href="#">Advanced Search</a></li>
            <li class="mb-6"><a class="hover:underline" href="#">Orders and Returns</a></li>
            <li class="mb-6"><a class="hover:underline" href="#">FAQs</a></li>
            <li class="mb-6"><a class="hover:underline" href="#">Store Location</a></li>
            <li><a class="hover:underline" href="#">Contact Us</a></li>
          </ul>
        </div>
        <div class="w-full md:w-1/2 lg:w-1/3 xl:w-1/4 px-4">
          <h3 class="mb-8 text-xl font-bold font-heading">Contact Us</h3>
          <ul>
            <li class="mb-6">
              <h4 class="mb-2">Mobile</h4>
              <a class="text-blue-500 hover:underline" href="#">+39 4097 533 32 331</a>
            </li>
            <li class="mb-6">
              <h4 class="mb-2">Email</h4>
              <a class="text-blue-500 hover:underline" href="#">hi@yoftestore.com</a>
            </li>
            <li>
              <h4 class="mb-2">Live Chat</h4>
              <a class="text-blue-500 hover:underline" href="#">yoftestore</a>
            </li>
          </ul>
        </div>
      </div>
      <div class="relative mt-8 pb-32 lg:pb-0">
        <p class="font-semibold font-heading">© Copyright 2021 Yofte</p>
      </div>
    </div>
  </div>
</section>

Footers from Shopal

Tailwind CSS

Shopal

<section class="py-12 lg:py-20">
  <div class="container mx-auto px-4 mb-12 md:mb-20">
    <div class="max-w-6xl mx-auto">
      <div class="flex flex-wrap -mx-4">
        <div class="w-full lg:w-1/3 px-4 mb-6 lg:mb-0">
          <a class="inline-block mb-16" href="#">
            <img class="h-7" src="shopal-assets/logos/shopal-logo.svg" alt="" width="auto">
          </a>
          <div class="flex flex-col mb-8"><a class="inline-block text-sm font-bold hover:underline mb-3" href="#">Call us at: 1-888-699-8900</a><a class="inline-block text-sm font-bold hover:underline" href="mailto:contact@shopal.com">Email: contact@shopal.com</a></div>
          <div>
            <a class="inline-block text-green-500 hover:text-indigo-500 mr-6" href="#">
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M13.6349 20.7272V12.766H16.3583L16.7669 9.66243H13.6349V7.68126C13.6349 6.78299 13.8882 6.17083 15.203 6.17083L16.8771 6.17015V3.39421C16.5876 3.35731 15.5938 3.27271 14.4371 3.27271C12.0217 3.27271 10.3681 4.71878 10.3681 7.37389V9.66243H7.63647V12.766H10.3681V20.7272H13.6349Z" fill="currentColor"></path>
                <mask id="mask0_601_10113" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="7" y="3" width="10" height="18">
                  <path fill-rule="evenodd" clip-rule="evenodd" d="M13.6349 20.7272V12.766H16.3583L16.7669 9.66243H13.6349V7.68126C13.6349 6.78299 13.8882 6.17083 15.203 6.17083L16.8771 6.17015V3.39421C16.5876 3.35731 15.5938 3.27271 14.4371 3.27271C12.0217 3.27271 10.3681 4.71878 10.3681 7.37389V9.66243H7.63647V12.766H10.3681V20.7272H13.6349Z" fill="white"></path>
                </mask>
              </svg>
            </a>
            <a class="inline-block text-green-500 hover:text-indigo-500 mr-6" href="#">
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M21.8181 6.14598C21.1356 6.44844 20.4032 6.65356 19.6336 6.74513C20.4194 6.27462 21.0208 5.52831 21.3059 4.64177C20.5689 5.0775 19.7553 5.39389 18.8885 5.56541C18.1943 4.82489 17.2069 4.36365 16.1118 4.36365C14.0108 4.36365 12.3072 6.06719 12.3072 8.16707C12.3072 8.46489 12.3408 8.75577 12.4057 9.03392C9.24434 8.87513 6.44104 7.3605 4.56483 5.05895C4.23686 5.61986 4.05028 6.27344 4.05028 6.9711C4.05028 8.29107 4.72243 9.45574 5.74225 10.1371C5.11877 10.1163 4.53237 9.94477 4.01901 9.65968V9.70719C4.01901 11.5498 5.33086 13.0876 7.07031 13.4376C6.75161 13.5234 6.41555 13.5709 6.06789 13.5709C5.82222 13.5709 5.58464 13.5466 5.35171 13.5002C5.8361 15.0125 7.24067 16.1123 8.90483 16.1424C7.6034 17.1623 5.96243 17.7683 4.1801 17.7683C3.87301 17.7683 3.57052 17.7498 3.27271 17.7162C4.95655 18.7974 6.95561 19.4279 9.10416 19.4279C16.1026 19.4279 19.928 13.6312 19.928 8.60398L19.9153 8.11147C20.6627 7.57834 21.3094 6.90853 21.8181 6.14598Z" fill="currentColor"></path>
                <mask id="mask0_601_10114" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="3" y="4" width="19" height="16">
                  <path fill-rule="evenodd" clip-rule="evenodd" d="M21.8181 6.14598C21.1356 6.44844 20.4032 6.65356 19.6336 6.74513C20.4194 6.27462 21.0208 5.52831 21.3059 4.64177C20.5689 5.0775 19.7553 5.39389 18.8885 5.56541C18.1943 4.82489 17.2069 4.36365 16.1118 4.36365C14.0108 4.36365 12.3072 6.06719 12.3072 8.16707C12.3072 8.46489 12.3408 8.75577 12.4057 9.03392C9.24434 8.87513 6.44104 7.3605 4.56483 5.05895C4.23686 5.61986 4.05028 6.27344 4.05028 6.9711C4.05028 8.29107 4.72243 9.45574 5.74225 10.1371C5.11877 10.1163 4.53237 9.94477 4.01901 9.65968V9.70719C4.01901 11.5498 5.33086 13.0876 7.07031 13.4376C6.75161 13.5234 6.41555 13.5709 6.06789 13.5709C5.82222 13.5709 5.58464 13.5466 5.35171 13.5002C5.8361 15.0125 7.24067 16.1123 8.90483 16.1424C7.6034 17.1623 5.96243 17.7683 4.1801 17.7683C3.87301 17.7683 3.57052 17.7498 3.27271 17.7162C4.95655 18.7974 6.95561 19.4279 9.10416 19.4279C16.1026 19.4279 19.928 13.6312 19.928 8.60398L19.9153 8.11147C20.6627 7.57834 21.3094 6.90853 21.8181 6.14598Z" fill="white"></path>
                </mask>
              </svg>
            </a>
            <a class="inline-block text-green-500 hover:text-indigo-500 mr-6" href="#">
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M7.6007 2.18176H16.3992C19.3874 2.18176 21.8184 4.61276 21.8182 7.60069V16.3992C21.8182 19.3871 19.3874 21.8181 16.3992 21.8181H7.6007C4.61276 21.8181 2.18188 19.3872 2.18188 16.3992V7.60069C2.18188 4.61276 4.61276 2.18176 7.6007 2.18176ZM16.3993 20.0759C18.4267 20.0759 20.0761 18.4266 20.0761 16.3992H20.076V7.60069C20.076 5.57343 18.4266 3.924 16.3992 3.924H7.6007C5.57343 3.924 3.92412 5.57343 3.92412 7.60069V16.3992C3.92412 18.4266 5.57343 20.076 7.6007 20.0759H16.3993ZM6.85721 12.0001C6.85721 9.16418 9.16425 6.85709 12.0001 6.85709C14.8359 6.85709 17.1429 9.16418 17.1429 12.0001C17.1429 14.8358 14.8359 17.1428 12.0001 17.1428C9.16425 17.1428 6.85721 14.8358 6.85721 12.0001ZM8.62805 11.9999C8.62805 13.8592 10.1408 15.3718 12.0001 15.3718C13.8593 15.3718 15.3721 13.8592 15.3721 11.9999C15.3721 10.1405 13.8594 8.62784 12.0001 8.62784C10.1407 8.62784 8.62805 10.1405 8.62805 11.9999Z" fill="currentColor"></path>
                <mask id="mask0_601_10115" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="2" y="2" width="20" height="20">
                  <path fill-rule="evenodd" clip-rule="evenodd" d="M7.6007 2.18176H16.3992C19.3874 2.18176 21.8184 4.61276 21.8182 7.60069V16.3992C21.8182 19.3871 19.3874 21.8181 16.3992 21.8181H7.6007C4.61276 21.8181 2.18188 19.3872 2.18188 16.3992V7.60069C2.18188 4.61276 4.61276 2.18176 7.6007 2.18176ZM16.3993 20.0759C18.4267 20.0759 20.0761 18.4266 20.0761 16.3992H20.076V7.60069C20.076 5.57343 18.4266 3.924 16.3992 3.924H7.6007C5.57343 3.924 3.92412 5.57343 3.92412 7.60069V16.3992C3.92412 18.4266 5.57343 20.076 7.6007 20.0759H16.3993ZM6.85721 12.0001C6.85721 9.16418 9.16425 6.85709 12.0001 6.85709C14.8359 6.85709 17.1429 9.16418 17.1429 12.0001C17.1429 14.8358 14.8359 17.1428 12.0001 17.1428C9.16425 17.1428 6.85721 14.8358 6.85721 12.0001ZM8.62805 11.9999C8.62805 13.8592 10.1408 15.3718 12.0001 15.3718C13.8593 15.3718 15.3721 13.8592 15.3721 11.9999C15.3721 10.1405 13.8594 8.62784 12.0001 8.62784C10.1407 8.62784 8.62805 10.1405 8.62805 11.9999Z" fill="white"></path>
                </mask>
              </svg>
            </a>
            <a class="inline-block text-green-500 hover:text-indigo-500" href="#">
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M19.2 3H4.8C3.81 3 3 3.81 3 4.8V19.2C3 20.19 3.81 21 4.8 21H19.2C20.19 21 21 20.19 21 19.2V4.8C21 3.81 20.19 3 19.2 3ZM8.4 18.3H5.7V10.2H8.4V18.3ZM7.05 8.67C6.15 8.67 5.43 7.95 5.43 7.05C5.43 6.15 6.15 5.43 7.05 5.43C7.95 5.43 8.67 6.15 8.67 7.05C8.67 7.95 7.95 8.67 7.05 8.67ZM18.3 18.3H15.6V13.53C15.6 12.81 14.97 12.18 14.25 12.18C13.53 12.18 12.9 12.81 12.9 13.53V18.3H10.2V10.2H12.9V11.28C13.35 10.56 14.34 10.02 15.15 10.02C16.86 10.02 18.3 11.46 18.3 13.17V18.3Z" fill="currentColor"></path>
              </svg>
            </a>
          </div>
        </div>
        <div class="w-full lg:w-2/3 px-4">
          <div class="flex flex-wrap justify-between -mx-4 -mb-8">
            <div class="w-full sm:w-1/2 lg:w-1/4 px-4 mb-8">
              <h3 class="text-base font-black mb-6">Information</h3>
              <ul>
                <li class="mb-4"><a class="text-sm font-bold text-black hover:text-indigo-500" href="#">About</a></li>
                <li class="mb-4"><a class="text-sm font-bold text-black hover:text-indigo-500" href="#">Customer Service</a></li>
                <li class="mb-4"><a class="text-sm font-bold text-black hover:text-indigo-500" href="#">Reward Program</a></li>
                <li class="mb-4"><a class="text-sm font-bold text-black hover:text-indigo-500" href="#">Shipping &amp; Returns</a></li>
                <li class="mb-4"><a class="text-sm font-bold text-black hover:text-indigo-500" href="#">Privacy Policy</a></li>
                <li><a class="text-sm font-bold text-black hover:text-indigo-500" href="#">Terms &amp; Conditions</a></li>
              </ul>
            </div>
            <div class="w-full sm:w-1/2 lg:w-1/4 px-4 mb-8">
              <h3 class="text-base font-black mb-6">Policy</h3>
              <ul>
                <li class="mb-4"><a class="text-sm font-bold text-black hover:text-indigo-500" href="#">Delivery - installation</a></li>
                <li class="mb-4"><a class="text-sm font-bold text-black hover:text-indigo-500" href="#">Try the product</a></li>
                <li class="mb-4"><a class="text-sm font-bold text-black hover:text-indigo-500" href="#">Logistics area</a></li>
                <li class="mb-4"><a class="text-sm font-bold text-black hover:text-indigo-500" href="#">Customer card policy</a></li>
                <li><a class="text-sm font-bold text-black hover:text-indigo-500" href="#">Installment</a></li>
              </ul>
            </div>
            <div class="w-full sm:w-1/2 lg:w-1/4 px-4 mb-8">
              <h3 class="text-base font-black mb-6">Our shop</h3>
              <ul>
                <li class="mb-4"><a class="text-sm font-bold text-black hover:text-indigo-500" href="#">Products</a></li>
                <li class="mb-4"><a class="text-sm font-bold text-black hover:text-indigo-500" href="#">New In</a></li>
                <li class="mb-4"><a class="text-sm font-bold text-black hover:text-indigo-500" href="#">Accessories</a></li>
                <li><a class="text-sm font-bold text-black hover:text-indigo-500" href="#">Top Brands</a></li>
              </ul>
            </div>
            <div class="w-full sm:w-1/2 lg:w-1/4 px-4 mb-8">
              <h3 class="text-base font-black mb-6">Customer service</h3>
              <ul>
                <li class="mb-4"><a class="text-sm font-bold text-black hover:text-indigo-500" href="#">Search Terms</a></li>
                <li class="mb-4"><a class="text-sm font-bold text-black hover:text-indigo-500" href="#">Advanced Search</a></li>
                <li class="mb-4"><a class="text-sm font-bold text-black hover:text-indigo-500" href="#">Orders and Returns</a></li>
                <li class="mb-4"><a class="text-sm font-bold text-black hover:text-indigo-500" href="#">Contact Us</a></li>
                <li class="mb-4"><a class="text-sm font-bold text-black hover:text-indigo-500" href="#">Theme FAQs</a></li>
                <li><a class="text-sm font-bold text-black hover:text-indigo-500" href="#">Store Locations</a></li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="pt-6 border-t-2 border-black">
    <div class="container px-4 mx-auto">
      <div class="max-w-6xl mx-auto">
        <div class="sm:flex items-center justify-between -mb-5">
          <div class="mb-5">
            <p class="text-sm font-bold">© Copyright 2022. All rights reserved by Shopal UX.</p>
          </div>
          <div class="mb-5">
            <a class="inline-block mr-5" href="#">
              <img src="shopal-assets/logos/visa-logo.svg" alt="">
            </a>
            <a class="inline-block mr-5" href="#">
              <img src="shopal-assets/logos/mastercard-logo.svg" alt="">
            </a>
            <a class="inline-block" href="#">
              <img src="shopal-assets/logos/paypal-logo.svg" alt="">
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Footers from Nigodo

Tailwind CSS

Nigodo

<section>
  <div class="pt-26 border-3 border-l-0 border-r-0 border-indigo-900">
    <div class="pb-16 border-b-3 border-indigo-900">
      <div class="container px-4 mx-auto text-center">
        <a class="inline-block mx-auto mb-20" href="#">
          <img class="h-12" src="nigodo-assets/logo-nigodo.svg" alt="">
        </a>
        <div class="flex flex-wrap -mx-4 -mb-6 justify-center">
          <div class="w-full md:w-1/3 xl:w-auto px-4 mb-6 md:mr-10 2xl:mr-16"><a class="text-xl md:text-2xl font-extrabold hover:text-indigo-800" href="#">Product</a></div>
          <div class="w-full md:w-1/3 xl:w-auto px-4 mb-6 md:mr-10 2xl:mr-16"><a class="text-xl md:text-2xl font-extrabold hover:text-indigo-800" href="#">Features</a></div>
          <div class="w-full md:w-1/3 xl:w-auto px-4 mb-6 md:mr-10 2xl:mr-16"><a class="text-xl md:text-2xl font-extrabold hover:text-indigo-800" href="#">Pricing</a></div>
          <div class="w-full md:w-1/3 xl:w-auto px-4 mb-6 md:mr-10 2xl:mr-16"><a class="text-xl md:text-2xl font-extrabold hover:text-indigo-800" href="#">Resources</a></div>
          <div class="w-full md:w-1/3 xl:w-auto px-4 mb-6 md:mr-10 2xl:mr-16"><a class="text-xl md:text-2xl font-extrabold hover:text-indigo-800" href="#">Careers</a></div>
          <div class="w-full md:w-1/3 xl:w-auto px-4 mb-6 md:mr-10 2xl:mr-16"><a class="text-xl md:text-2xl font-extrabold hover:text-indigo-800" href="#">Help</a></div>
          <div class="w-full md:w-1/3 xl:w-auto px-4 mb-6"><a class="text-xl md:text-2xl font-extrabold hover:text-indigo-800" href="#">Privacy</a></div>
        </div>
      </div>
    </div>
    <div class="container px-4 pt-16 pb-24 mx-auto">
      <p class="text-center text-xl md:text-2xl font-extrabold">© 2022 Nigodo. All rights reserved.</p>
    </div>
  </div>
</section>

Footers from Atis

Tailwind CSS

Atis

<section>
  <div class="skew skew-top mr-for-radius">
    <svg class="h-8 md:h-12 lg:h-20 w-full text-gray-50" viewBox="0 0 10 10" preserveAspectRatio="none">
      <polygon fill="currentColor" points="0 0 10 10 0 10"></polygon>
    </svg>
  </div>
  <div class="skew skew-top ml-for-radius">
    <svg class="h-8 md:h-12 lg:h-20 w-full text-gray-50" viewBox="0 0 10 10" preserveAspectRatio="none">
      <polygon fill="currentColor" points="0 10 10 0 10 10"></polygon>
    </svg>
  </div>
  <div class="py-20 bg-gray-50 radius-for-skewed">
    <div class="container mx-auto px-4">
      <div class="flex flex-wrap mb-6 lg:mb-20">
        <div class="mb-6 w-full lg:w-1/5">
          <a class="text-3xl font-bold leading-none" href="#">
            <img class="h-12" src="atis-assets/logo/atis/atis-mono-black.svg" alt="" width="auto">
          </a>
        </div>
        <div class="mb-5 w-full lg:w-1/5">
          <p class="text-gray-400 leading-loose">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed luctus eget justo.</p>
        </div>
        <div class="w-full lg:w-3/5 flex flex-wrap -mx-3 justify-end">
          <div class="mb-6 w-full md:w-1/2 lg:w-1/4 lg:mr-6 px-3">
            <h5 class="mb-4 font-bold">Office</h5>
            <p class="text-gray-400 leading-loose">359 Hidden Valley Road, NY</p>
          </div>
          <div class="mb-6 w-full md:w-1/2 lg:w-1/4 px-3">
            <h5 class="mb-4 font-bold">Contacts</h5>
            <p class="text-gray-400">hello@example.com</p>
          </div>
        </div>
      </div>
      <div class="w-full flex justify-between">
        <p class="text-sm text-gray-400">© 2021. All rights reserved.</p>
        <div class="flex space-x-2 lg:space-x-4">
          <a href="#">
            <img src="atis-assets/social/facebook.svg" alt="">
          </a>
          <a href="#">
            <img src="atis-assets/social/twitter.svg" alt="">
          </a>
          <a href="#">
            <img src="atis-assets/social/instagram.svg" alt="">
          </a>
        </div>
      </div>
    </div>
  </div>
  <div class="skew skew-bottom mr-for-radius">
    <svg class="h-8 md:h-12 lg:h-20 w-full text-gray-50" viewBox="0 0 10 10" preserveAspectRatio="none">
      <polygon fill="currentColor" points="0 0 10 0 0 10"></polygon>
    </svg>
  </div>
  <div class="skew skew-bottom ml-for-radius">
    <svg class="h-8 md:h-12 lg:h-20 w-full text-gray-50" viewBox="0 0 10 10" preserveAspectRatio="none">
      <polygon fill="currentColor" points="0 0 10 0 10 10"></polygon>
    </svg>
  </div>
</section>

Footers from Pstls.

Tailwind CSS

Pstls.

<section class="py-24">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap -mx-4 mb-10 justify-between">
      <div class="w-full md:w-1/5 px-4 mb-6 md:mb-0"><a class="inline-block" href="#"  ><img src="pstls-assets/logos/pstls-logo.svg" alt="" width="87"></a></div>
      
      <div class="w-full md:w-3/5 px-4 mb-6 md:mb-0">
        <ul class="md:flex items-center justify-center">
          <li class="mb-6 md:mb-0 md:mr-12"><a class="inline-block font-bold text-sm hover:text-gray-900" href="#" >Hello</a></li>
          <li class="mb-6 md:mb-0 md:mr-12"><a class="inline-block font-bold text-sm hover:text-gray-900" href="#" >Story</a></li>
          <li class="mb-6 md:mb-0 md:mr-12"><a class="inline-block font-bold text-sm hover:text-gray-900" href="#" >About us</a></li>
          <li><a class="inline-block font-bold text-sm hover:text-gray-900" href="#" >Services</a></li>
        </ul>
      </div>
      <div class="w-full md:w-1/5 px-4">
        <div class="flex md:justify-end"><a class="inline-block mr-4" href="#"><img src="pstls-assets/logos/twitter.svg" alt=""></a><a class="inline-block mr-4" href="#"><img src="pstls-assets/logos/google.svg" alt=""></a><a class="inline-block" href="#"><img src="pstls-assets/logos/facebook.svg" alt=""></a></div>
      </div>
    </div>
    
    <p class="text-sm text-gray-500 text-center" >© Pstls. 2022 All right reserved. </p>
  </div>
</section>

Footers from BoldUI

Tailwind CSS

BoldUI

<section class="bg-black overflow-x-hidden">
  <div class="border-t">
    <div class="container mx-auto px-4">
      <div class="flex flex-wrap -mx-4 mb-10 md:mb-0">
        <div class="w-full md:w-2/6 md:border-r md:border-gray-800 px-4">
          <div class="max-w-xs mx-auto py-20">
            <a class="inline-block text-xl text-white font-medium font-heading mb-8 md:mb-32" href="#">
              <img class="h-8" src="boldui-assets/logo/logo-boldui-light.svg" alt="" width="auto">
            </a>
            <p class="max-w-xs text-white uppercase font-heading">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
          </div>
        </div>
        <div class="w-full md:w-4/6 px-4">
          <div class="md:py-20 px-8 lg:pl-20 lg:pr-10">
            <div class="flex flex-wrap -mx-4">
              <div class="w-1/2 md:w-1/4 px-4 mb-12 md:mb-0">
                <h3 class="mb-8 text-sm text-white uppercase font-heading">Company</h3>
                <ul>
                  <li class="mb-8"><a class="text-gray-500 hover:text-gray-400" href="#">Careers</a></li>
                  <li class="mb-8"><a class="text-gray-500 hover:text-gray-400" href="#">Press</a></li>
                  <li><a class="text-gray-500 hover:text-gray-400" href="#">Blog</a></li>
                </ul>
              </div>
              <div class="w-1/2 md:w-1/4 px-4 mb-12 md:mb-0">
                <h3 class="mb-8 text-sm text-white uppercase font-heading">Pages</h3>
                <ul>
                  <li class="mb-8"><a class="text-gray-500 hover:text-gray-400" href="#">Login</a></li>
                  <li class="mb-8"><a class="text-gray-500 hover:text-gray-400" href="#">Register</a></li>
                  <li class="mb-8"><a class="text-gray-500 hover:text-gray-400" href="#">Add list</a></li>
                  <li><a class="text-gray-500 hover:text-gray-400" href="#">Contact</a></li>
                </ul>
              </div>
              <div class="w-1/2 md:w-1/4 px-4">
                <h3 class="mb-8 text-sm text-white uppercase font-heading">Legal</h3>
                <ul>
                  <li class="mb-8"><a class="text-gray-500 hover:text-gray-400" href="#">Terms</a></li>
                  <li class="mb-8"><a class="text-gray-500 hover:text-gray-400" href="#">About Us</a></li>
                  <li class="mb-8"><a class="text-gray-500 hover:text-gray-400" href="#">Team</a></li>
                  <li><a class="text-gray-500 hover:text-gray-400" href="#">Privacy</a></li>
                </ul>
              </div>
              <div class="w-1/2 md:w-1/4 px-4">
                <h3 class="mb-8 text-sm text-white uppercase font-heading">Resources</h3>
                <ul>
                  <li class="mb-8"><a class="text-gray-500 hover:text-gray-400" href="#">Blog</a></li>
                  <li class="mb-8"><a class="text-gray-500 hover:text-gray-400" href="#">Service</a></li>
                  <li class="mb-8"><a class="text-gray-500 hover:text-gray-400" href="#">Product</a></li>
                  <li><a class="text-gray-500 hover:text-gray-400" href="#">Pricing</a></li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="border-t py-16">
    <div class="container mx-auto px-4">
      <div class="flex flex-wrap justify-between">
        <p class="mb-8 md:mb-0 text-gray-500">All rights reserved © BoldUI 2021</p>
        <div class="flex w-full md:w-auto">
          <a class="mr-8" href="#">
            <img src="boldui-assets/brands/small-logos/facebook.svg" alt="">
          </a>
          <a class="mr-8" href="#">
            <img src="boldui-assets/brands/small-logos/twitter.svg" alt="">
          </a>
          <a class="mr-8" href="#">
            <img src="boldui-assets/brands/small-logos/instagram.svg" alt="">
          </a>
          <a class="mr-8" href="#">
            <img src="boldui-assets/brands/small-logos/github.svg" alt="">
          </a>
          <a href="#">
            <img src="boldui-assets/brands/small-logos/linkedin.svg" alt="">
          </a>
        </div>
      </div>
    </div>
  </div>
</section>

Footers from Acros

Tailwind CSS

Acros

<section class="py-24 bg-gray-900">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap -mx-4 pb-20">
      <div class="w-full lg:w-2/6 px-4 mb-16 lg:mb-0">
        <div>
          <h4 class="font-heading text-lg text-white mb-6">Company</h4>
          <div class="flex items-center mb-2">
            <div class="flex items-center justify-center w-10 h-10 mr-3 border border-gray-500 rounded-full">
              <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M0.993636 2.24838C1.20452 1.89921 2.36641 0.629197 3.19556 0.667537C3.44341 0.688076 3.66251 0.838013 3.84053 1.01191C4.24928 1.41106 5.41939 2.9207 5.48581 3.23837C5.64739 4.01749 4.71897 4.46662 5.00311 5.25191C5.7275 7.02445 6.97566 8.27255 8.74898 8.99622C9.53362 9.28034 9.98277 8.35197 10.7619 8.51423C11.0789 8.58064 12.5893 9.75069 12.9885 10.1594C13.1617 10.3367 13.3124 10.5565 13.3329 10.8044C13.3637 11.6773 12.0149 12.8555 11.752 13.0062C11.1317 13.4498 10.3224 13.4423 9.33575 12.9836C6.58266 11.8382 2.18292 7.5215 1.01623 4.66448C0.56982 3.68339 0.53901 2.86866 0.993636 2.24838Z" fill="#00CBA6"></path>
              </svg>
            </div>
            <span class="font-heading text-white">+44 20 6024 2068</span>
          </div>
          <div class="flex items-center mb-8">
            <div class="flex items-center justify-center w-10 h-10 mr-3 border border-gray-500 rounded-full">
              <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M4.59183 2.33337H10.8771C11.7834 2.34354 12.6459 2.72666 13.2639 3.39351C13.8819 4.06036 14.2014 4.95273 14.1479 5.86279V10.2147C14.2014 11.1248 13.8819 12.0171 13.2639 12.684C12.6459 13.3508 11.7834 13.734 10.8771 13.7441H4.59183C2.64523 13.7441 1.33325 12.1605 1.33325 10.2147V5.86279C1.33325 3.91701 2.64523 2.33337 4.59183 2.33337Z" fill="#00CBA6" stroke="#00CBA6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                <path d="M11.5118 6.04077L8.66819 8.33029C8.13004 8.7522 7.37566 8.7522 6.83752 8.33029L3.96948 6.04077" stroke="#1F2E3F" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
            </div>
            <span class="font-heading text-white">office@neonic.co</span>
          </div>
          <div class="flex items-center">
            <a class="flex items-center justify-center w-12 h-12 mr-2 rounded-full bg-gray-800 hover:bg-gray-700" href="#">
              <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M9.08979 13.8181V8.51062H10.9054L11.1778 6.44158H9.08979V5.1208C9.08979 4.52195 9.25864 4.11384 10.1352 4.11384L11.2512 4.11339V2.26277C11.0582 2.23817 10.3957 2.18176 9.62456 2.18176C8.01431 2.18176 6.9119 3.14582 6.9119 4.91588V6.44158H5.09082V8.51062H6.9119V13.8181H9.08979Z" fill="white"></path>
                <mask id="mask0_37_110" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="5" y="2" width="7" height="12">
                  <path fill-rule="evenodd" clip-rule="evenodd" d="M9.08979 13.8181V8.51062H10.9054L11.1778 6.44158H9.08979V5.1208C9.08979 4.52195 9.25864 4.11384 10.1352 4.11384L11.2512 4.11339V2.26277C11.0582 2.23817 10.3957 2.18176 9.62456 2.18176C8.01431 2.18176 6.9119 3.14582 6.9119 4.91588V6.44158H5.09082V8.51062H6.9119V13.8181H9.08979Z" fill="white"></path>
                </mask>
              </svg>
            </a>
            <a class="flex items-center justify-center w-12 h-12 mr-2 rounded-full bg-gray-800 hover:bg-gray-700" href="#">
              <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M14.5455 4.09728C14.0905 4.29892 13.6022 4.43566 13.0892 4.49671C13.613 4.18304 14.014 3.6855 14.204 3.09447C13.7127 3.38496 13.1703 3.59589 12.5924 3.71023C12.1296 3.21655 11.4714 2.90906 10.7413 2.90906C9.34059 2.90906 8.2049 4.04475 8.2049 5.44467C8.2049 5.64322 8.2273 5.83714 8.27057 6.02257C6.16298 5.91671 4.29411 4.90696 3.0433 3.37259C2.82465 3.74653 2.70027 4.18225 2.70027 4.64736C2.70027 5.52734 3.14837 6.30379 3.82825 6.75805C3.41259 6.74415 3.02166 6.62981 2.67942 6.43974V6.47142C2.67942 7.69983 3.55399 8.72504 4.71362 8.95837C4.50116 9.01554 4.27712 9.04722 4.04534 9.04722C3.88156 9.04722 3.72318 9.031 3.56788 9.00009C3.89081 10.0083 4.8272 10.7415 5.93663 10.7616C5.06902 11.4415 3.97504 11.8455 2.78681 11.8455C2.58209 11.8455 2.38043 11.8332 2.18188 11.8108C3.30445 12.5316 4.63716 12.9519 6.06952 12.9519C10.7351 12.9519 13.2854 9.0874 13.2854 5.73595L13.2769 5.4076C13.7752 5.05219 14.2063 4.60564 14.5455 4.09728Z" fill="white"></path>
                <mask id="mask0_37_113" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="2" y="2" width="13" height="11">
                  <path fill-rule="evenodd" clip-rule="evenodd" d="M14.5455 4.09728C14.0905 4.29892 13.6022 4.43566 13.0892 4.49671C13.613 4.18304 14.014 3.6855 14.204 3.09447C13.7127 3.38496 13.1703 3.59589 12.5924 3.71023C12.1296 3.21655 11.4714 2.90906 10.7413 2.90906C9.34059 2.90906 8.2049 4.04475 8.2049 5.44467C8.2049 5.64322 8.2273 5.83714 8.27057 6.02257C6.16298 5.91671 4.29411 4.90696 3.0433 3.37259C2.82465 3.74653 2.70027 4.18225 2.70027 4.64736C2.70027 5.52734 3.14837 6.30379 3.82825 6.75805C3.41259 6.74415 3.02166 6.62981 2.67942 6.43974V6.47142C2.67942 7.69983 3.55399 8.72504 4.71362 8.95837C4.50116 9.01554 4.27712 9.04722 4.04534 9.04722C3.88156 9.04722 3.72318 9.031 3.56788 9.00009C3.89081 10.0083 4.8272 10.7415 5.93663 10.7616C5.06902 11.4415 3.97504 11.8455 2.78681 11.8455C2.58209 11.8455 2.38043 11.8332 2.18188 11.8108C3.30445 12.5316 4.63716 12.9519 6.06952 12.9519C10.7351 12.9519 13.2854 9.0874 13.2854 5.73595L13.2769 5.4076C13.7752 5.05219 14.2063 4.60564 14.5455 4.09728Z" fill="white"></path>
                </mask>
              </svg>
            </a>
            <a class="flex items-center justify-center w-12 h-12 mr-2 rounded-full bg-gray-800 hover:bg-gray-700" href="#">
              <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M5.06713 1.45459H10.9328C12.9249 1.45459 14.5456 3.07525 14.5455 5.06721V10.9329C14.5455 12.9248 12.9249 14.5455 10.9328 14.5455H5.06713C3.07518 14.5455 1.45459 12.9249 1.45459 10.9329V5.06721C1.45459 3.07525 3.07518 1.45459 5.06713 1.45459ZM10.9329 13.384C12.2845 13.384 13.3841 12.2845 13.3841 10.9329H13.384V5.06721C13.384 3.7157 12.2844 2.61608 10.9328 2.61608H5.06713C3.71562 2.61608 2.61608 3.7157 2.61608 5.06721V10.9329C2.61608 12.2845 3.71562 13.3841 5.06713 13.384H10.9329ZM4.57147 8.00012C4.57147 6.10954 6.1095 4.57147 8.00004 4.57147C9.89059 4.57147 11.4286 6.10954 11.4286 8.00012C11.4286 9.89063 9.89059 11.4286 8.00004 11.4286C6.1095 11.4286 4.57147 9.89063 4.57147 8.00012ZM5.75203 8.00004C5.75203 9.23958 6.76054 10.248 8.00005 10.248C9.23955 10.248 10.2481 9.23958 10.2481 8.00004C10.2481 6.76043 9.23963 5.75198 8.00005 5.75198C6.76046 5.75198 5.75203 6.76043 5.75203 8.00004Z" fill="white"></path>
                <mask id="mask0_37_116" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="1" y="1" width="14" height="14">
                  <path fill-rule="evenodd" clip-rule="evenodd" d="M5.06713 1.45459H10.9328C12.9249 1.45459 14.5456 3.07525 14.5455 5.06721V10.9329C14.5455 12.9248 12.9249 14.5455 10.9328 14.5455H5.06713C3.07518 14.5455 1.45459 12.9249 1.45459 10.9329V5.06721C1.45459 3.07525 3.07518 1.45459 5.06713 1.45459ZM10.9329 13.384C12.2845 13.384 13.3841 12.2845 13.3841 10.9329H13.384V5.06721C13.384 3.7157 12.2844 2.61608 10.9328 2.61608H5.06713C3.71562 2.61608 2.61608 3.7157 2.61608 5.06721V10.9329C2.61608 12.2845 3.71562 13.3841 5.06713 13.384H10.9329ZM4.57147 8.00012C4.57147 6.10954 6.1095 4.57147 8.00004 4.57147C9.89059 4.57147 11.4286 6.10954 11.4286 8.00012C11.4286 9.89063 9.89059 11.4286 8.00004 11.4286C6.1095 11.4286 4.57147 9.89063 4.57147 8.00012ZM5.75203 8.00004C5.75203 9.23958 6.76054 10.248 8.00005 10.248C9.23955 10.248 10.2481 9.23958 10.2481 8.00004C10.2481 6.76043 9.23963 5.75198 8.00005 5.75198C6.76046 5.75198 5.75203 6.76043 5.75203 8.00004Z" fill="white"></path>
                </mask>
              </svg>
            </a>
            <a class="flex items-center justify-center w-12 h-12 mr-2 rounded-full bg-gray-800 hover:bg-gray-700" href="#">
              <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M8 2C4.685 2 2 4.75474 2 8.15226C2 10.871 3.719 13.1765 6.1025 13.9894C6.4025 14.0473 6.5125 13.8569 6.5125 13.6936C6.5125 13.5475 6.5075 13.1604 6.505 12.6475C4.836 13.0184 4.484 11.8221 4.484 11.8221C4.211 11.112 3.8165 10.9221 3.8165 10.9221C3.273 10.5407 3.8585 10.5486 3.8585 10.5486C4.461 10.5913 4.7775 11.1825 4.7775 11.1825C5.3125 12.1232 6.182 11.8513 6.525 11.6943C6.579 11.2962 6.7335 11.0254 6.905 10.8715C5.5725 10.7176 4.172 10.1886 4.172 7.83139C4.172 7.15992 4.4045 6.61106 4.7895 6.18063C4.722 6.02516 4.5195 5.3996 4.842 4.55231C4.842 4.55231 5.3445 4.38744 6.492 5.18308C6.972 5.04639 7.482 4.97856 7.992 4.97543C8.502 4.97856 9.012 5.04639 9.492 5.18308C10.632 4.38744 11.1345 4.55231 11.1345 4.55231C11.457 5.3996 11.2545 6.02516 11.1945 6.18063C11.577 6.61106 11.8095 7.15992 11.8095 7.83139C11.8095 10.1948 10.407 10.715 9.072 10.8663C9.282 11.051 9.477 11.4282 9.477 12.0047C9.477 12.828 9.4695 13.4896 9.4695 13.6894C9.4695 13.8506 9.5745 14.0431 9.882 13.9816C12.2825 13.1739 14 10.8668 14 8.15226C14 4.75474 11.3135 2 8 2V2Z" fill="white"></path>
              </svg>
            </a>
            <a class="flex items-center justify-center w-12 h-12 rounded-full bg-gray-800 hover:bg-gray-700" href="#">
              <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M12.8 2H3.2C2.54 2 2 2.54 2 3.2V12.8C2 13.46 2.54 14 3.2 14H12.8C13.46 14 14 13.46 14 12.8V3.2C14 2.54 13.46 2 12.8 2ZM5.6 12.2H3.8V6.8H5.6V12.2ZM4.7 5.78C4.1 5.78 3.62 5.3 3.62 4.7C3.62 4.1 4.1 3.62 4.7 3.62C5.3 3.62 5.78 4.1 5.78 4.7C5.78 5.3 5.3 5.78 4.7 5.78ZM12.2 12.2H10.4V9.02C10.4 8.54002 9.98 8.12 9.5 8.12C9.02 8.12 8.6 8.54002 8.6 9.02V12.2H6.8V6.8H8.6V7.52C8.9 7.04 9.56 6.68 10.1 6.68C11.24 6.68 12.2 7.64 12.2 8.78V12.2Z" fill="white"></path>
              </svg>
            </a>
          </div>
        </div>
      </div>
      <div class="w-full sm:w-1/2 md:w-1/4 lg:w-1/6 px-4 mb-8 md:mb-0">
        <h4 class="font-heading text-lg text-white mb-8">Pages</h4>
        <ul>
          <li class="mb-6"><a class="font-heading text-white hover:text-gray-100" href="#">About us</a></li>
          <li class="mb-6"><a class="font-heading text-white hover:text-gray-100" href="#">Careers</a></li>
          <li class="mb-6"><a class="font-heading text-white hover:text-gray-100" href="#">Press</a></li>
          <li><a class="font-heading text-white hover:text-gray-100" href="#">Blog</a></li>
        </ul>
      </div>
      <div class="w-full sm:w-1/2 md:w-1/4 lg:w-1/6 px-4 mb-8 md:mb-0">
        <h4 class="font-heading text-lg text-white mb-8">Products</h4>
        <ul>
          <li class="mb-6"><a class="font-heading text-white hover:text-gray-100" href="#">Login</a></li>
          <li class="mb-6"><a class="font-heading text-white hover:text-gray-100" href="#">Register</a></li>
          <li class="mb-6"><a class="font-heading text-white hover:text-gray-100" href="#">Add list</a></li>
          <li><a class="font-heading text-white hover:text-gray-100" href="#">Contact</a></li>
        </ul>
      </div>
      <div class="w-full sm:w-1/2 md:w-1/4 lg:w-1/6 px-4 mb-8 sm:mb-0">
        <h4 class="font-heading text-lg text-white mb-8">Resources</h4>
        <ul>
          <li class="mb-6"><a class="font-heading text-white hover:text-gray-100" href="#">Blog</a></li>
          <li class="mb-6"><a class="font-heading text-white hover:text-gray-100" href="#">Service</a></li>
          <li class="mb-6"><a class="font-heading text-white hover:text-gray-100" href="#">Product</a></li>
          <li><a class="font-heading text-white hover:text-gray-100" href="#">Pricing</a></li>
        </ul>
      </div>
      <div class="w-full sm:w-1/2 md:w-1/4 lg:w-1/6 px-4">
        <h4 class="font-heading text-lg text-white mb-8">Legal</h4>
        <ul>
          <li class="mb-6"><a class="font-heading text-white hover:text-gray-100" href="#">Terms</a></li>
          <li class="mb-6"><a class="font-heading text-white hover:text-gray-100" href="#">About us</a></li>
          <li class="mb-6"><a class="font-heading text-white hover:text-gray-100" href="#">Team</a></li>
          <li><a class="font-heading text-white hover:text-gray-100" href="#">Privacy</a></li>
        </ul>
      </div>
    </div>
    <div class="flex justify-between items-cneter pt-10 border-t border-gray-600">
      <span class="font-heading text-white">2022 © Shuffle</span>
      <a class="font-heading text-white hover:text-gray-100" href="#">Go to up</a>
    </div>
  </div>
</section>

Footer is the place where you will put the site navigation and all the relevant information. That is why it is worth putting some effort into its design, prioritizing vital information and links over the less important ones.

Choose from many variants of Tailwind components footers. The variants shown here are available in various UI libraries in the Shuffle Editor. You will also find many other types of components that will be in the same style. This will allow you to build a comprehensive Tailwind website template. Each library is designed by a professional designer and coded by our team of developers.

Get access to all Tailwind components footers section, code and our editor. Try the demo for free.

Try for Free →

Redirecting to PayPal

Shuffle's Editors

Supporting tools

Plans

Shuffle’s design systems

Most popular ui libraries

Flex

Zanrly

Saturn

Flaro

Gradia

Basko

Artemis

Vendia

Tailwind Footers Components

Framework

UI Library

Components

Footers from Saturn

Your next website starts here

Footers from DarkPro

Footers from Flaro

Footers from Gradia

Footers from Solstice

Footers from Basko

Footers from Zanrly

Footers from Nightsable

Footers from Zeus

Footers from Zospace

Footers from Wrexa

Footers from Flex

Footers from Uinel

Footers from Yofte

Footers from Shopal

Footers from Nigodo

Footers from Atis

Footers from Pstls.

Footers from BoldUI

Footers from Acros

The easiest way to create beautiful websites

How many people?

monthly

annual

lifetime

Create an account

From idea to beautiful design in minutes.

Products

UI Components

Extensions

Support

Company