Tailwind Footers Components in Suncealand library

<section class="pb-8 pt-14 bg-gray-900 overflow-hidden">
  <div class="px-4 md:px-16 mx-auto">
    <div class="flex flex-wrap justify-between items-center mb-16">
      <div class="w-full lg:w-auto mb-14 lg:mb-0">
        <div class="flex flex-wrap">
          <div class="w-full lg:w-auto">
            <a class="inline-block" href="#">
              <img src="suncealand-assets/logos/suncealand-white.svg" alt="">
            </a>
          </div>
          <div class="w-full lg:w-auto lg:ml-8">
            <span class="text-gray-300">Stay connected</span>
          </div>
        </div>
      </div>
      <div class="w-full lg:w-auto">
        <a class="inline-block py-7 px-6 md:pl-8 md:pr-18 bg-gray-700 hover:bg-gray-600 rounded-3xl" href="#">
          <div class="flex flex-wrap md:flex-nowrap items-center">
            <div class="flex-shrink-0 w-full md:w-auto mb-2 md:mb-0 md:mr-7">
              <div class="relative w-11 h-11">
                <img src="suncealand-assets/images/avatar-girl-banner.png" alt="">
                <img class="w-5 h-5 animate-bounce absolute bottom-0 right-0 -mr-1 -mb-1" src="suncealand-assets/logos/chat-logo.svg" alt="">
              </div>
            </div>
            <div class="w-full md:w-auto">
              <h5 class="text-2xl font-medium text-white">Chat</h5>
              <p class="text-xs text-gray-200">Have any question? Let&rsquo;s chat!</p>
            </div>
          </div>
        </a>
      </div>
    </div>
  </div>
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap -mx-4 -mb-10">
      <div class="w-full xs:w-1/2 md:w-1/3 lg:w-1/5 px-4 mb-10">
        <h4 class="font-medium text-gray-100 mb-4">About</h4>
        <ul>
          <li class="mb-2"><a class="inline-block text-2xs text-gray-200 hover:text-gray-100" href="#">Story</a></li>
          <li class="mb-2"><a class="inline-block text-2xs text-gray-200 hover:text-gray-100" href="#">Creative Team</a></li>
          <li class="mb-2"><a class="inline-block text-2xs text-gray-200 hover:text-gray-100" href="#">Founders</a></li>
          <li class="mb-2"><a class="inline-block text-2xs text-gray-200 hover:text-gray-100" href="#">Why us</a></li>
          <li class="mb-2"><a class="inline-block text-2xs text-gray-200 hover:text-gray-100" href="#">How we compare</a></li>
          <li class="mb-2"><a class="inline-block text-2xs text-gray-200 hover:text-gray-100" href="#">Our Mission</a></li>
          <li><a class="inline-block text-2xs text-gray-200 hover:text-gray-100" href="#">Idea</a></li>
        </ul>
      </div>
      <div class="w-full xs:w-1/2 md:w-1/3 lg:w-1/5 px-4 mb-10">
        <h4 class="font-medium text-gray-100 mb-4">Product</h4>
        <ul class="mb-12">
          <li class="mb-2"><a class="inline-block text-2xs text-gray-200 hover:text-gray-100" href="#">Plans</a></li>
          <li class="mb-2"><a class="inline-block text-2xs text-gray-200 hover:text-gray-100" href="#">Pricing</a></li>
          <li class="mb-2"><a class="inline-block text-2xs text-gray-200 hover:text-gray-100" href="#">Integrations</a></li>
          <li class="mb-2"><a class="inline-block text-2xs text-gray-200 hover:text-gray-100" href="#">Sign Up</a></li>
          <li><a class="inline-block text-2xs text-gray-200 hover:text-gray-100" href="#">Careers</a></li>
        </ul>
        <div>
          <h4 class="font-medium text-gray-100 mb-4">Free trial</h4>
          <ul>
            <li class="mb-2"><a class="inline-block text-2xs text-gray-200 hover:text-gray-100" href="#">Create account</a></li>
            <li class="mb-2"><a class="inline-block text-2xs text-gray-200 hover:text-gray-100" href="#">Details</a></li>
            <li class="mb-2"><a class="inline-block text-2xs text-gray-200 hover:text-gray-100" href="#">Download</a></li>
            <li><a class="inline-block text-2xs text-gray-200 hover:text-gray-100" href="#">Manage your ID</a></li>
          </ul>
        </div>
      </div>
      <div class="w-full xs:w-1/2 md:w-1/3 lg:w-1/5 px-4 mb-10">
        <h4 class="font-medium text-gray-100 mb-4">Follow</h4>
        <ul>
          <li class="mb-2"><a class="inline-block text-2xs text-gray-200 hover:text-gray-100" href="#">LinkedIn</a></li>
          <li class="mb-2"><a class="inline-block text-2xs text-gray-200 hover:text-gray-100" href="#">Twitter</a></li>
          <li class="mb-2"><a class="inline-block text-2xs text-gray-200 hover:text-gray-100" href="#">Snapchat</a></li>
          <li class="mb-2"><a class="inline-block text-2xs text-gray-200 hover:text-gray-100" href="#">Instagram</a></li>
          <li><a class="inline-block text-2xs text-gray-200 hover:text-gray-100" href="#">Facebook</a></li>
        </ul>
      </div>
      <div class="w-full xs:w-1/2 md:w-1/3 lg:w-1/5 px-4 mb-10">
        <h4 class="font-medium text-gray-100 mb-4">Application</h4>
        <ul>
          <li class="mb-2"><a class="inline-block text-2xs text-gray-200 hover:text-gray-100" href="#">Download Desktop</a></li>
          <li class="mb-2"><a class="inline-block text-2xs text-gray-200 hover:text-gray-100" href="#">Download Mobile</a></li>
          <li class="mb-2"><a class="inline-block text-2xs text-gray-200 hover:text-gray-100" href="#">Your history</a></li>
          <li class="mb-2"><a class="inline-block text-2xs text-gray-200 hover:text-gray-100" href="#">FAQ&rsquo;s</a></li>
          <li><a class="inline-block text-2xs text-gray-200 hover:text-gray-100" href="#">Integrations</a></li>
        </ul>
      </div>
      <div class="w-full xs:w-1/2 md:w-1/3 lg:w-1/5 px-4 mb-10">
        <h4 class="font-medium text-gray-100 mb-4">Support</h4>
        <ul>
          <li class="mb-2"><a class="inline-block text-2xs text-gray-200 hover:text-gray-100" href="#">FAQ&rsquo;s</a></li>
          <li class="mb-2"><a class="inline-block text-2xs text-gray-200 hover:text-gray-100" href="#">Live Chat</a></li>
          <li class="mb-2"><a class="inline-block text-2xs text-gray-200 hover:text-gray-100" href="#">Hotline +442234480171</a></li>
          <li><a class="inline-block text-2xs text-gray-200 hover:text-gray-100" href="#">Messages</a></li>
        </ul>
      </div>
    </div>
    <div class="mt-20 mb-4 pb-3 border-b border-gray-500">
      <div class="flex flex-wrap -mx-4 -mb-2">
        <div class="px-4 mb-2"><a class="inline-block text-xs text-gray-200 hover:text-gray-100" href="#">Privacy Policy</a></div>
        <div class="px-4 mb-2"><a class="inline-block text-xs text-gray-200 hover:text-gray-100" href="#">Terms of Use</a></div>
        <div class="px-4 mb-2"><a class="inline-block text-xs text-gray-200 hover:text-gray-100" href="#">Sales and Refunds</a></div>
        <div class="px-4 mb-2"><a class="inline-block text-xs text-gray-200 hover:text-gray-100" href="#">Legal</a></div>
        <div class="px-4 mb-2"><a class="inline-block text-xs text-gray-200 hover:text-gray-100" href="#">Site Map</a></div>
      </div>
    </div>
    <p class="text-xs text-gray-200">Copyright &copy; 2022 suncealand. All rights reserved.</p>
  </div>
</section>