Tailwind Footers Components in Zanrly library

<section class="py-10 bg-gray-900 overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="px-10 pt-10 pb-6 bg-gray-800 rounded-3xl">
      <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-white.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-200 font-bold bg-gray-700 outline-none focus:ring-4 focus:ring-blue-200 placeholder-gray-200 rounded-full" id="footerDarkInput1-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-gray-900 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-100 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-100 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-100 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-100 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-white.svg" alt="">
        </div>
      </div>
    </div>
  </div>
</section>