Footers Components in Mirga library

Footers from Mirga

<section class="overflow-hidden">
  <div class="bg-neutral-900">
    <div class="py-3 px-4 md:px-14 border-b border-neutral-600">
      <div class="container mx-auto px-4"></div>
      <div class="flex justify-between flex-wrap gap-4">
        <div class="flex items-center gap-6 sm:gap-18 flex-wrap"><a class="inline-block text-white font-medium hover:text-opacity-80 tracking-tight transition duration-200" href="#">Help Center</a><a class="inline-block text-white font-medium hover:text-opacity-80 tracking-tight transition duration-200" href="#">Location</a></div>
        <div class="flex items-center gap-6 sm:gap-18 flex-wrap">
          <a class="inline-block text-white font-medium hover:text-opacity-80 tracking-tight transition duration-200" href="#">Contact</a>
          <div class="flex items-center gap-6 flex-wrap">
            <a class="inline-block text-white font-medium hover:text-opacity-80 tracking-tight transition duration-200" href="#">Back to top</a>
            <a class="relative text-white hover:text-opacity-80 border border-neutral-50 rounded-full transition duration-200" href="#">
              <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40" fill="none"><circle cx="20" cy="20" r="19.5" transform="rotate(90 20 20)" fill="currentColor" stroke="#E5E5E7"></circle></svg>
              <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
                  <path d="M6.41225 12.1235L9.60066 8.93506L12.7891 12.1235" stroke="#19191B" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
              </div>
            </a>
          </div>
        </div>
      </div>
    </div>
    <div class="pt-12 pb-20 md:pb-40">
      <div class="container mx-auto px-4">
        <div class="max-w-xl mx-auto mb-24">
          <h2 class="text-white text-lg font-medium tracking-tight mb-6">Join our Newsletter now</h2>
          <form action="#">
            <div class="flex flex-wrap -m-2">
              <div class="w-full sm:flex-1 p-2">
                <input class="w-full px-8 py-5 outline-none rounded-lg placeholder-neutral-600 font-medium focus:ring-4 focus:ring-neutral-100 transition duration-200" type="text" placeholder="Your Email">
              </div>
              <div class="w-full sm:w-auto p-2">
                <button class="flex justify-center items-center text-center h-full w-full p-5 font-semibold tracking-tight text-lg bg-green-200 hover:bg-green-100 focus:bg-green-100 rounded-lg focus:ring-4 focus:ring-green-200 focus:ring-opacity-50 transition duration-200" type="submit">More</button>
              </div>
            </div>
          </form>
        </div>
        <div class="flex flex-wrap -mx-4">
          <div class="w-full sm:w-1/2 lg:w-1/4 p-4">
            <h2 class="text-white text-xl font-medium tracking-tight mb-8">Product</h2>
            <ul class="flex flex-col gap-4">
              <li><a class="text-neutral-300 font-medium hover:text-neutral-400 tracking-tight transition duration-200" href="#">Design</a></li>
              <li><a class="text-neutral-300 font-medium hover:text-neutral-400 tracking-tight transition duration-200" href="#">Applications</a></li>
              <li><a class="text-neutral-300 font-medium hover:text-neutral-400 tracking-tight transition duration-200" href="#">Integrations</a></li>
              <li><a class="text-neutral-300 font-medium hover:text-neutral-400 tracking-tight transition duration-200" href="#">All Devices</a></li>
              <li><a class="text-neutral-300 font-medium hover:text-neutral-400 tracking-tight transition duration-200" href="#">Design</a></li>
              <li><a class="text-neutral-300 font-medium hover:text-neutral-400 tracking-tight transition duration-200" href="#">View our demo</a></li>
              <li><a class="text-neutral-300 font-medium hover:text-neutral-400 tracking-tight transition duration-200" href="#">Chat</a></li>
            </ul>
          </div>
          <div class="w-full sm:w-1/2 lg:w-1/4 p-4">
            <h2 class="text-white text-xl font-medium tracking-tight mb-8">Resources</h2>
            <ul class="flex flex-col gap-4">
              <li><a class="text-neutral-300 font-medium hover:text-neutral-400 tracking-tight transition duration-200" href="#">Status</a></li>
              <li><a class="text-neutral-300 font-medium hover:text-neutral-400 tracking-tight transition duration-200" href="#">Helpdesk</a></li>
              <li><a class="text-neutral-300 font-medium hover:text-neutral-400 tracking-tight transition duration-200" href="#">Migra Academy</a></li>
              <li><a class="text-neutral-300 font-medium hover:text-neutral-400 tracking-tight transition duration-200" href="#">Community</a></li>
              <li><a class="text-neutral-300 font-medium hover:text-neutral-400 tracking-tight transition duration-200" href="#">Events</a></li>
              <li><a class="text-neutral-300 font-medium hover:text-neutral-400 tracking-tight transition duration-200" href="#">Videos</a></li>
              <li><a class="text-neutral-300 font-medium hover:text-neutral-400 tracking-tight transition duration-200" href="#">New System</a></li>
            </ul>
          </div>
          <div class="w-full sm:w-1/2 lg:w-1/4 p-4">
            <h2 class="text-white text-xl font-medium tracking-tight mb-8">Company</h2>
            <ul class="flex flex-col gap-4">
              <li><a class="text-neutral-300 font-medium hover:text-neutral-400 tracking-tight transition duration-200" href="#">About us</a></li>
              <li><a class="text-neutral-300 font-medium hover:text-neutral-400 tracking-tight transition duration-200" href="#">Team</a></li>
              <li><a class="text-neutral-300 font-medium hover:text-neutral-400 tracking-tight transition duration-200" href="#">Careers</a></li>
              <li><a class="text-neutral-300 font-medium hover:text-neutral-400 tracking-tight transition duration-200" href="#">Customer Stories</a></li>
              <li><a class="text-neutral-300 font-medium hover:text-neutral-400 tracking-tight transition duration-200" href="#">Blog</a></li>
              <li><a class="text-neutral-300 font-medium hover:text-neutral-400 tracking-tight transition duration-200" href="#">Media</a></li>
              <li><a class="text-neutral-300 font-medium hover:text-neutral-400 tracking-tight transition duration-200" href="#">Our Locations</a></li>
            </ul>
          </div>
          <div class="w-full sm:w-1/2 lg:w-1/4 p-4">
            <h2 class="text-white text-xl font-medium tracking-tight mb-8">Solutions</h2>
            <ul class="flex flex-col gap-4">
              <li><a class="text-neutral-300 font-medium hover:text-neutral-400 tracking-tight transition duration-200" href="#">Business</a></li>
              <li><a class="text-neutral-300 font-medium hover:text-neutral-400 tracking-tight transition duration-200" href="#">Consultations</a></li>
              <li><a class="text-neutral-300 font-medium hover:text-neutral-400 tracking-tight transition duration-200" href="#">Education</a></li>
              <li><a class="text-neutral-300 font-medium hover:text-neutral-400 tracking-tight transition duration-200" href="#">Contact</a></li>
              <li><a class="text-neutral-300 font-medium hover:text-neutral-400 tracking-tight transition duration-200" href="#">Contact sales</a></li>
              <li><a class="text-neutral-300 font-medium hover:text-neutral-400 tracking-tight transition duration-200" href="#">FAQ</a></li>
              <li><a class="text-neutral-300 font-medium hover:text-neutral-400 tracking-tight transition duration-200" href="#">Live Chat</a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="bg-white py-6">
    <div class="container mx-auto px-4">
      <div class="flex items-center gap-12 flex-wrap">
        <a href="#">
          <img src="mirga-assets/images/logos/mirga-dark-logo.svg" alt="">
        </a>
        <p class="text-neutral-600 font-medium tracking-tight">© Shuffle 2023. All rights reserved.</p>
      </div>
    </div>
  </div>
</section>

Footers from Mirga

<section class="bg-dark overflow-hidden"> <div class="border-bottom border-dark-light mb-12"> <div class="container mw-9xl"> <div class="d-flex flex-column flex-sm-row py-5 gap-6 align-items-start align-items-sm-center"> <a class="btn text-white fw-medium p-0" href="#">Help Center</a><a class="btn text-white fw-medium p-0" href="#">Location</a><a class="btn ms-sm-auto text-white fw-medium p-0" href="#">Contact</a> <a class="btn text-white fw-medium p-0" href="#"> <span class="me-6">Back to top</span> <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg"> <circle cx="20" cy="20" r="19.5" transform="rotate(90 20 20)" fill="white" stroke="#E5E5E7"></circle> <path d="M16.4123 21.1235L19.6007 17.9351L22.7891 21.1235" stroke="#19191B" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path> </svg> </a> </div> </div> </div> <div class="pb-24"> <div class="container mw-7xl"> <div class="mw-xl mb-24 mx-auto"> <form action=""> <label class="form-label mb-6 fs-7 fw-medium text-white" for="">Join our Newsletter now</label> <div class="d-flex flex-column flex-sm-row gap-4"> <input class="form-control" type="email" name="" id="" placeholder="Your Email"> <button class="flex-shrink-0 btn btn-success" type="submit">More</button> </div> > </form> </div> <div class="row mb-n12"> <div class="col-12 col-sm-6 col-md-3 mb-12"> <div> <h6 class="fs-6 fw-medium text-white mb-8">Product</h6> <ul class="list-unstyled mb-0"> <li class="mb-4"><a class="d-inline-block fw-medium text-light text-opacity-50" href="#">Design</a></li> <li class="mb-4"><a class="d-inline-block fw-medium text-light text-opacity-50" href="#">Applications</a></li> <li class="mb-4"><a class="d-inline-block fw-medium text-light text-opacity-50" href="#">Integrations</a></li> <li class="mb-4"><a class="d-inline-block fw-medium text-light text-opacity-50" href="#">All Devices</a></li> <li class="mb-4"><a class="d-inline-block fw-medium text-light text-opacity-50" href="#">Design</a></li> <li class="mb-4"><a class="d-inline-block fw-medium text-light text-opacity-50" href="#">View our demo</a></li> <li><a class="d-inline-block fw-medium text-light text-opacity-50" href="#">Chat</a></li> </ul> </div> </div> <div class="col-12 col-sm-6 col-md-3 mb-12"> <div> <h6 class="fs-6 fw-medium text-white mb-8">Resources</h6> <ul class="list-unstyled mb-0"> <li class="mb-4"><a class="d-inline-block fw-medium text-light text-opacity-50" href="#">Status</a></li> <li class="mb-4"><a class="d-inline-block fw-medium text-light text-opacity-50" href="#">Helpdesk</a></li> <li class="mb-4"><a class="d-inline-block fw-medium text-light text-opacity-50" href="#">Migra Academy</a></li> <li class="mb-4"><a class="d-inline-block fw-medium text-light text-opacity-50" href="#">Community</a></li> <li class="mb-4"><a class="d-inline-block fw-medium text-light text-opacity-50" href="#">Events</a></li> <li class="mb-4"><a class="d-inline-block fw-medium text-light text-opacity-50" href="#">Videos</a></li> <li><a class="d-inline-block fw-medium text-light text-opacity-50" href="#">New System</a></li> </ul> </div> </div> <div class="col-12 col-sm-6 col-md-3 mb-12"> <div> <h6 class="fs-6 fw-medium text-white mb-8">Company</h6> <ul class="list-unstyled mb-0"> <li class="mb-4"><a class="d-inline-block fw-medium text-light text-opacity-50" href="#">About us</a></li> <li class="mb-4"><a class="d-inline-block fw-medium text-light text-opacity-50" href="#">Team</a></li> <li class="mb-4"><a class="d-inline-block fw-medium text-light text-opacity-50" href="#">Careers</a></li> <li class="mb-4"><a class="d-inline-block fw-medium text-light text-opacity-50" href="#">Customer Stories</a></li> <li class="mb-4"><a class="d-inline-block fw-medium text-light text-opacity-50" href="#">Blog</a></li> <li class="mb-4"><a class="d-inline-block fw-medium text-light text-opacity-50" href="#">Media</a></li> <li><a class="d-inline-block fw-medium text-light text-opacity-50" href="#">Our Locations</a></li> </ul> </div> </div> <div class="col-12 col-sm-6 col-md-3 mb-12"> <div> <h6 class="fs-6 fw-medium text-white mb-8">Solutions</h6> <ul class="list-unstyled mb-0"> <li class="mb-4"><a class="d-inline-block fw-medium text-light text-opacity-50" href="#">Business</a></li> <li class="mb-4"><a class="d-inline-block fw-medium text-light text-opacity-50" href="#">Consultations</a></li> <li class="mb-4"><a class="d-inline-block fw-medium text-light text-opacity-50" href="#">Education</a></li> <li class="mb-4"><a class="d-inline-block fw-medium text-light text-opacity-50" href="#">Contact</a></li> <li class="mb-4"><a class="d-inline-block fw-medium text-light text-opacity-50" href="#">Contact sales</a></li> <li class="mb-4"><a class="d-inline-block fw-medium text-light text-opacity-50" href="#">FAQ</a></li> <li><a class="d-inline-block fw-medium text-light text-opacity-50" href="#">Live Chat</a></li> </ul> </div> </div> </div> </div> </div> <div class="py-5 bg-white"> <div class="container mw-9xl"> <div class="d-flex align-items-center"> <a class="btn me-12 p-0 border-0" href="#"> <img class="img-fluid" style="height: 32px;" src="mirga-assets/images/logos/mirga-dark-logo2.svg" alt=""> </a> <span class="d-inline-block fw-medium text-muted">© Shuffle 2023. All rights reserved.</span> </div> </div> </div> </section>

Footers Components by Shuffle

Choose from 10 variations of Footers UI components. Presented here are variants available in Mirga library.

You will also find many other types of components in Shuffle Editor that will be in the same style. Each library has been designed by a professional designer and coded by our team of developers.

Get access to all Footers UI components, code and our visual editor. Try the demo for free!

Redirecting to PayPal

Supporting tools

Plans

Footers UI Components – Mirga Library

Framework

UI Library

Components

Footers from Mirga

Dark Website Footer with Newsletter Signup and Link Columns

Footers from Mirga

Footers Components by Shuffle

The easiest way to create beautiful websites

How many people?

monthly

annual

lifetime

Create an account

From idea to beautiful design in minutes.

Get Shuffle for life at today's price

New in every Lifetime License

A more capable AI Agent

Shopify theme export

Multi-AI Designer

Make it yours with AI

Sign in to create with AI

Add images & videos

How it works

Products

UI Components

Extensions

Support

Company

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

Footers UI Components – Mirga Library

Framework

UI Library

Components

Footers from Mirga

Dark Website Footer with Newsletter Signup and Link Columns

Footers from Mirga

Footers Components by Shuffle

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