Footers 02

            
<footer class="bg-gray-50 text-gray-600 px-6 lg:px-8 py-6 md:py-12">
  <div class="max-w-screen-xl mx-auto border-b-2 border-gray-200 mb-12 lg:mb-16 py-6 md:py-12 lg:pb-20 md:flex md:justify-between md:items-center md:flex-row md:space-x-12 space-y-6 ">
    <div class="max-w-3xl flex-1 ">
      <h4 class="text-2xl sm:text-3xl md:text-4xl text-gray-700 font-medium">You Think You Know What Life Is?</h4>
      <p class="text-base md:text-xl font-medium text-gray-500 mt-4 leading-relaxed">Promise your reader something valuable. Will you teach her how to learn a new skill? Will you persuade her to do something she’s never done before?</p>
    </div>
    <a href="#" class="inline-block bg-gray-600 font-semibold rounded-lg py-4 px-5 lg:px-8 text-white">Start 21-day free trail</a>
  </div>
  <div class="max-w-screen-xl mx-auto grid md:grid-cols-2 lg:grid-cols-5 gap-6 lg:gap-x-8">
    <div>
      <h5 class="text-xl font-semibold text-gray-700">Product</h5>
      <nav class="mt-4">
        <ul class="space-y-2">
          <li>
            <a href="#" class="font-normal text-base hover:text-gray-400">Landingpages</a>
          </li>
          <li>
            <a href="#" class="font-normal text-base hover:text-gray-400">Features</a>
          </li>
          <li>
            <a href="#" class="font-normal text-base hover:text-gray-400">Documentation</a>
          </li>
          <li>
            <a href="#" class="font-normal text-base hover:text-gray-400">Careers</a>
          </li>   
          <li>
            <a href="#" class="font-normal text-base hover:text-gray-400">Blocks</a>
          </li>
        </ul>
      </nav>
    </div>
    <div>
      <h5 class="text-xl font-semibold text-gray-700">Industries</h5>
      <nav class="mt-4">
        <ul class="space-y-2">
          <li>
            <a href="#" class="font-normal text-base hover:text-gray-400">Employment</a>
          </li>
          <li>
            <a href="#" class="font-normal text-base hover:text-gray-400">Childcare</a>
          </li>
          <li>
            <a href="#" class="font-normal text-base hover:text-gray-400">Education</a>
          </li>
          <li>
            <a href="#" class="font-normal text-base hover:text-gray-400">Accountancy</a>
          </li>
          <li>
            <a href="#" class="font-normal text-base hover:text-gray-400">Wholesale</a>
          </li>
        </ul>
      </nav>
    </div>
    <div>
      <h5 class="text-xl font-semibold text-gray-700">About us</h5>
      <nav class="mt-4">
        <ul class="space-y-2">
          <li>
            <a href="#" class="font-normal text-base hover:text-gray-400">Company</a>
          </li>
          <li>
            <a href="#" class="font-normal text-base hover:text-gray-400">Download brochure</a>
          </li>
          <li>
            <a href="#" class="font-normal text-base hover:text-gray-400">Media Kit</a>
          </li>
          <li>
            <a href="#" class="font-normal text-base hover:text-gray-400">Accountancy</a>
          </li>
        </ul>
      </nav>
    </div>
    <div>
      <h5 class="text-xl font-semibold text-gray-700">Legal</h5>
      <nav class="mt-4">
        <ul class="space-y-2">
          <li>
            <a href="#" class="font-normal text-base hover:text-gray-400">Terms and conditions</a>
          </li>
          <li>
            <a href="#" class="font-normal text-base hover:text-gray-400">Security</a>
          </li>
          <li>
            <a href="#" class="font-normal text-base hover:text-gray-400">Privacy and Cookie Statement</a>
          </li>
          <li>
            <a href="#" class="font-normal text-base hover:text-gray-400">Processor Agreement</a>
          </li>
          <li>
            <a href="#" class="font-normal text-base hover:text-gray-400">Sitemap</a>
          </li>
        </ul>
      </nav>
    </div>
   
    <div>
      <h5 class="text-xl font-semibold text-gray-700">Contact</h5>
      <div class="space-y-4 md:space-y-6 mt-4">
        <div class="flex items-start space-x-4">
          <div>
            <svg class="w-6 h-6 mt-1 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
          </div>
          <div class="flex-1">
            <address class="not-italic">
              Rorikstraat 159<br>
              Wijk bij Duurstede<br>
              The Netherlands
            </address>
          </div>
        </div>
        <div class="flex items-start space-x-4">
          <div>
            <svg class="w-6 h-6 mt-1 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path></svg>
          </div>
          <div class="flex-1">
            <a href="#" class="hover:text-gray-500">support@hello.com</a>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="max-w-screen-xl mx-auto flex flex-col md:flex-row justify-between items-center space-y-4 mt-16 lg:mt-20">
    <img class="h-8" src="http://demo-assets.uibak.com/themesdev/uptimemate-logo-dark.svg"alt="UptimeMate logo">
    <div class="text-sm">
      ©2021 Company. All rights reserved.
    </div>
  </div>
</footer>