1+ Footer Components - Tailwind

The Tailwind CSS Footer Component is a versatile and responsive footer design built using the Tailwind CSS framework. With its clean and modern layout, this footer component provides an attractive way to conclude web pages while offering essential navigational and informational elements. Tailwind CSS, with its utility-first approach, enables seamless customization and adaptation to various design requirements.

Tailwind Inline Footer

Discover the simplicity of styling your website's footer inline with Tailwind CSS. Elevate your user interface with our Tailwind Inline Footer UI component for seamless integration and customization.

Author: Admin

Preview
Code

<footer class="bg-gray-50">
  <div class="mx-auto max-w-screen-xl px-4 py-8 sm:px-6 lg:px-8">
    <div class="sm:flex sm:items-center sm:justify-between">
      <div class="flex justify-center items-center text-gray-500 sm:justify-start">
        <img src="https://www.frontendcomponent.com/favicon.ico" class="mr-3 h-10 w-auto" alt="Frontend Component Footer Logo"> Frontend Component
      </div>
      <p class="mt-4 text-center text-sm text-gray-500 md:mt-0 md:text-right">
        Copyright &copy; 2024. All rights reserved.
      </p>
    </div>
  </div>
</footer>

```
No Custom CSS
```
```
No need of JavaScript
```

Footer with Subscribe Form

Discover the power of a well-designed footer with a subscribe form that boosts user engagement. Implement our footer solution to seamlessly integrate subscription options.

Author: Admin

Preview
Code

<footer class="bg-gray-900">
    <div class="mx-auto max-w-screen-xl px-4 py-8 sm:px-6 lg:px-8">
      <div class="lg:flex lg:items-start lg:gap-8">
        <img src="https://www.codewithfaraz.com/InstaPic.png" class="mr-3 h-10 w-auto" alt="CodewithFaraz Footer Logo">
  
        <div class="mt-8 grid grid-cols-2 gap-8 lg:mt-0 lg:grid-cols-5 lg:gap-y-16">
          <div class="col-span-2">
            <div>
              <h2 class="text-2xl font-bold text-white">Get the latest news!</h2>
  
              <p class="mt-4 text-gray-400">
                Don't be shy. Say hi 👋. Do you have a project or an idea that could use some help? Let's work together.
              </p>
            </div>
          </div>
  
          <div class="col-span-2 lg:col-span-3 lg:flex lg:items-end">
            <form class="w-full">
              <div class="relative max-w-lg">
                <label class="sr-only" for="email"> Email </label>
  
                <input class="w-full rounded-full border-gray-200 outline-none bg-gray-100 p-4 pe-32 text-sm font-medium" id="email" type="email" placeholder="user@codewithfaraz.com" />
  
                <button type="submit" id="subsbtn" class="absolute end-1 top-1/2 -translate-y-1/2 rounded-full bg-blue-600 px-5 py-3 text-sm font-medium text-white transition hover:bg-blue-700">
                  Subscribe
                </button>
              </div>
            </form>
          </div>
  
          <div class="col-span-2 sm:col-span-1">
            <p class="relative font-medium text-white">Quick Links</p>
  
            <ul style="list-style:none;" class="mt-6 space-y-4 text-sm">
              <li>
                <a href="https://www.codewithfaraz.com" class="transition hover:opacity-75 text-gray-200">
                  Home
                </a>
              </li>
  
              <li>
                <a href="https://www.codewithfaraz.com/about-us" class="transition hover:opacity-75 text-gray-200">
                  About Us
                </a>
              </li>
  
              <li>
                <a href="https://www.codewithfaraz.com/blog" class="transition hover:opacity-75 text-gray-200">
                  Blogs
                </a>
              </li>
  
              <li>
                <a href="https://www.codewithfaraz.com/contact" class="transition hover:opacity-75 text-gray-200">
                  Contact Us
                </a>
              </li>
  
              <li>
                <a href="https://www.codewithfaraz.com/write-for-us" class="transition hover:opacity-75 text-gray-200">
                  Write For Us
                </a>
              </li>
            </ul>
          </div>
  
          <div class="col-span-2 sm:col-span-1">
            <p class="relative font-medium text-white ">Components</p>
  
            <ul style="list-style:none;" class="mt-6 space-y-4 text-sm">
              <li>
                <a href="https://www.codewithfaraz.com/components" class="transition hover:opacity-75 text-gray-200">
                  HTML, CSS, and JS
                </a>
              </li>
  
              <li>
                <a href="https://www.codewithfaraz.com/python-projects" class="transition hover:opacity-75 text-gray-200">
                  Python
                </a>
              </li>
  
              <li>
                <a href="https://www.codewithfaraz.com/csharp-projects" class="transition hover:opacity-75 text-gray-200">
                  C#
                </a>
              </li>
  
              <li>
                <a href="https://www.codewithfaraz.com/questions" class="transition hover:opacity-75 text-gray-200">
                  Questions
                </a>
              </li>
            </ul>
          </div>
  
          <div class="col-span-2 sm:col-span-1">
            <p class="relative font-medium text-white ">Useful Tools</p>
  
            <ul style="list-style:none;" class="mt-6 space-y-4 text-sm">
              <li>
                <a href="https://www.codewithfaraz.com/tools/case-converter" class="transition hover:opacity-75 text-gray-200">
                  Case Converter
                </a>
              </li>
  
              <li>
                <a href="https://www.codewithfaraz.com/tools/word-counter" class="transition hover:opacity-75 text-gray-200">
                  Word Counter
                </a>
              </li>
  
              <li>
                <a href="https://www.codewithfaraz.com/tools/scrollbar-generator" class="transition hover:opacity-75 text-gray-200">
                  Slug Generator
                </a>
              </li>
  
              <li>
                <a href="https://www.codewithfaraz.com/tools" class="transition hover:opacity-75 text-[#377DFF]">
                  View More
                </a>
              </li>
            </ul>
          </div>
  
          <div class="col-span-2 sm:col-span-1">
            <p class="relative font-medium text-white ">Free Icons</p>
  
            <ul style="list-style:none;" class="mt-6 space-y-4 text-sm">
              <li>
                <a href="https://www.codewithfaraz.com/icons/1/300-most-used-free-svg-icons-alarm-direction-devices-and-more" class="transition hover:opacity-75 text-gray-200">
                  SVG
                </a>
              </li>
  
              <li>
                <a href="https://www.codewithfaraz.com/icons/2/get-high-quality-svg-icons-of-car-brands-logos-for-free" class="transition hover:opacity-75 text-gray-200">
                  Car SVG
                </a>
              </li>
  
              <li>
                <a href="https://www.codewithfaraz.com/icons/3/emoji-copy-and-paste-expressive-emoticons-for-every-mood-copyable-emojis" class="transition hover:opacity-75 text-gray-200">
                  Emojis
                </a>
              </li>
  
              <li>
                <a href="https://www.codewithfaraz.com/icons" class="transition hover:opacity-75 text-[#377DFF]">
                  View More
                </a>
              </li>
            </ul>
          </div>
  
          <div class="col-span-2 sm:col-span-1">
            <p class="relative font-medium text-white ">Category</p>
  
            <ul style="list-style:none;" class="mt-6 space-y-4 text-sm">
              <li>
                <a href="https://www.codewithfaraz.com/category?tags=App" class="transition hover:opacity-75 text-gray-200">
                  App
                </a>
              </li>
  
              <li>
                <a href="https://www.codewithfaraz.com/category?tags=Form" class="transition hover:opacity-75 text-gray-200">
                  Form
                </a>
              </li>
  
              <li>
                <a href="https://www.codewithfaraz.com/category?tags=Navbar" class="transition hover:opacity-75 text-gray-200">
                  Navbar
                </a>
              </li>
  
              <li>
                <a href="https://www.codewithfaraz.com/category?tags=Landing%20Page" class="transition hover:opacity-75 text-gray-200">
                  Landing Page
                </a>
              </li>
  
              <li>
                <a href="https://www.codewithfaraz.com/category" class="transition hover:opacity-75 text-[#377DFF]">
                  View More
                </a>
              </li>
            </ul>
          </div>
  
          <ul style="list-style:none;" class="col-span-2 flex justify-start gap-6 lg:col-span-5 lg:justify-end">
            <li>
              <a href="https://www.facebook.com/codewithfaraz" rel="noreferrer" target="_blank" class="transition hover:text-[#1877F2] text-gray-200">
                <span class="sr-only">Facebook</span>
  
                <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                  <path fill-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z" clip-rule="evenodd" />
                </svg>
              </a>
            </li>
  
            <li>
              <a href="https://www.instagram.com/codewithfaraz" rel="noreferrer" target="_blank" class="transition hover:text-[#E4405F] text-gray-200">
                <span class="sr-only">Instagram</span>
  
                <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                  <path fill-rule="evenodd" d="M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z" clip-rule="evenodd" />
                </svg>
              </a>
            </li>
  
            <li>
              <a href="https://twitter.com/codewithfaraz" rel="noreferrer" target="_blank" class="transition hover:text-[#1DA1F2] text-gray-200">
                <span class="sr-only">Twitter</span>
  
                <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                  <path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84" />
                </svg>
              </a>
            </li>
  
            <li>
              <a href="https://github.com/farazc60" rel="noreferrer" target="_blank" class="transition hover:text-[#333333] text-gray-200">
                <span class="sr-only">GitHub</span>
  
                <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                  <path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd" />
                </svg>
              </a>
            </li>
  
            <li>
              <a href="https://www.youtube.com/@codewithfaraz" rel="noreferrer" target="_blank" class="transition hover:text-[#FF0000] text-gray-200">
                <span class="sr-only">YouTube</span>
  
                <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                  <path fill-rule="evenodd" d="M21.034 7.382c-.197-.738-.781-1.322-1.52-1.518C17.408 5 12 5 12 5s-5.408 0-7.514.864c-.739.197-1.323.78-1.52 1.518C2 9.488 2 12 2 12s0 2.512.966 4.618c.197.738.781 1.322 1.52 1.518C6.592 19 12 19 12 19s5.408 0 7.514-.864c.739-.197 1.323-.78 1.52-1.518C22 14.512 22 12 22 12s0-2.512-.966-4.618zM10 15V9l5 3-5 3z" clip-rule="evenodd" />
                </svg>
              </a>
            </li>
          </ul>
        </div>
      </div>
  
      <div class="mt-8 border-t pt-8 border-gray-800">
        <div class="sm:flex sm:justify-between">
          <p class="text-xs text-gray-400">
            &copy; 2024. codewithFaraz. All rights reserved.
          </p>
  
          <ul style="list-style:none;" class="mt-8 flex flex-wrap justify-start gap-4 text-xs sm:mt-0 lg:justify-end">
            <li>
              <a href="https://www.codewithfaraz.com/terms-and-conditions" class="transition hover:opacity-75 text-gray-400">
                Terms & Conditions
              </a>
            </li>
  
            <li>
              <a href="https://www.codewithfaraz.com/privacy-policy" class="transition hover:opacity-75 text-gray-400">
                Privacy Policy
              </a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </footer>

```
No Custom CSS
```
```
No need of JavaScript
```