Examples 07

            
<div class="bg-gray-100 text-gray-600 px-6 lg:px-8 py-4 lg:py-5">
  <div class="max-w-screen-xl mx-auto flex justify-between items-center relative">
    <a href="#" class="block flex-shrink-0">
      <img class="h-9" src="http://demo-assets.uibak.com/themesdev/boxify-logo.svg"alt="logo placeholder">
    </a>
    <div class="flex justify-between space-x-4 md:space-x-10 flex-shrink-1 md:flex-grow-0">
      <nav class="hidden md:flex flex-col justify-center items-center p-8 md:p-0 space-y-4 md:space-y-0 md:flex-row md:space-x-4 lg:space-x-8 font-semibold absolute top-16 md:top-0 left-0 w-full md:w-auto  md:relative bg-gray-200 md:bg-transparent">
        <a href="#" class="hover:opacity-70">Home</a>
        <a href="#" class="hover:opacity-70">Services</a>
        <a href="#" class="hover:opacity-70">Pricing</a>
        <a href="#" class="hover:opacity-70">Blog</a>
        <a href="#" class="hover:opacity-70">Contact</a>
      </nav>
      <button class="w-9 bg-gray-600 p-2 rounded-md text-gray-200 block md:hidden">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
          <path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd" />
        </svg>
      </button>
    </div>
  </div>
  <div class="max-w-screen-xl mx-auto text-center mt-8 lg:mt-20 xl:mt-32 mb-8 lg:mb-20 xl:mb-32">
    <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl text-gray-700 font-medium">The bedding was hardly able to cover</h2>
    <p class="text-xl text-gray-600 mt-4 max-w-3xl mx-auto">World among the stalks, and grow familiar with the countless indescribable forms of the insects and flies, then I feel the presence of the Almighty, who formed us in his own image, and the breath</p>
    <a href="#" class="flex items-center space-x-4 justify-center mt-6 lg:mt-12">
      <span class="inline-block bg-gray-600 font-semibold rounded-full w-12 h-12 p-2 text-white">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
          <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd" />
        </svg>
      </span>
      <span class="font-semibold">View Video</span>
    </a>
  </div>
</div>

<div class="bg-gray-50 text-gray-600 px-6 lg:px-8 py-12 lg:pb-20">
  <div class="max-w-screen-xl mx-auto px-6 lg:px-8 xl:px-4 grid grid-cols-1 sm:grid-cols-2 space-y-5 sm:space-y-3 xl:grid-cols-5 col-gap-6 xl:gap-12">
    <img class="h-12 p-1 self-end justify-self-center opacity-75" src="http://demo-assets.uibak.com/themesdev/jobboard-logo.svg"alt="logo placeholder">
    <img class="h-12 p-1 self-end justify-self-center opacity-75" src="http://demo-assets.uibak.com/themesdev/pathway-logo.svg"alt="logo placeholder">
    <img class="h-10 p-1 self-end justify-self-center opacity-75" src="http://demo-assets.uibak.com/themesdev/airstream-logo.svg"alt="logo placeholder">
    <img class="h-10 p-1 self-end justify-self-center opacity-75" src="http://demo-assets.uibak.com/themesdev/drops-logo.svg"alt="logo placeholder">
    <img class="h-12 p-1 self-end justify-self-center opacity-75" src="http://demo-assets.uibak.com/themesdev/fastdelivery-logo.svg"alt="logo placeholder">
  </div>
</div>

<div class="bg-gray-50 text-gray-600 px-6 lg:px-8 pt-12 pb-20">
  <div class="md:grid md:grid-cols-2 xl:grid-cols-3 md:gap-12 xl:gap-y-20 max-w-screen-xl mx-auto space-y-12 md:space-y-0">
    <div class="text-left">
      <div class="w-12 bg-gray-200 rounded-lg p-2 mb-4">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path fill="#fff" d="M12 14l9-5-9-5-9 5 9 5z" />
          <path fill="#fff" d="M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z" />
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 14l9-5-9-5-9 5 9 5zm0 0l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14zm-4 6v-7.5l4-2.222" />
        </svg>
      </div>
      <h3 class="font-semibold text-lg mb-2">Collection of textile</h3>
      <p>One morning, when Gregor Samsa woke from troubled dreams, he found himself It showed transformed.</p>
    </div>
    <div class="text-left">
      <div class="w-12 bg-gray-200 rounded-lg p-2 mb-4">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4" />
        </svg>
      </div>
      <h3 class="font-semibold text-lg mb-2">How about sleep a little bit</h3>
      <p>Doing business like this takes much more effort than doing your own business at home, and on top.</p>
    </div>
    <div class="text-left">
      <div class="w-12 bg-gray-200 rounded-lg p-2 mb-4">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z" />
        </svg>
      </div>
      <h3 class="font-semibold text-lg mb-2">He felt a slight up on his bell</h3>
      <p>He must have tried it a hundred times, shut his eyes so that he wouldn't have to look at the.</p>
    </div>
    <div class="text-left">
      <div class="w-12 bg-gray-200 rounded-lg p-2 mb-4">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z" />
        </svg>
      </div>
      <h3 class="font-semibold text-lg mb-2">But who knows, would do it</h3>
      <p>You've got to get enough sleep. Other travelling salesmen live a life of luxury. For instance.</p>
    </div>
    <div class="text-left">
      <div class="w-12 bg-gray-200 rounded-lg p-2 mb-4">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
        </svg>
      </div>
      <h3 class="font-semibold text-lg mb-2">His boss would certainly</h3>
      <p>Well, there's still some hope; once I've got the money together to pay off my parents.</p>
    </div>
    <div class="text-left">
      <div class="w-12 bg-gray-200 rounded-lg p-2 mb-4">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 3.055A9.001 9.001 0 1020.945 13H11V3.055z" />
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.488 9H15V3.512A9.025 9.025 0 0120.488 9z" />
        </svg>
      </div>
      <h3 class="font-semibold text-lg mb-2">One morning, when Gregor Samsa</h3>
      <p>And even if he did catch the train he would not avoid his boss's anger as the.</p>
    </div>
  </div>
</div>

<div class="bg-gray-50 text-gray-600 px-6 lg:px-8 pt-12 pb-20">
  <div class="max-w-screen-xl mx-auto text-center">
    <h2 class="text-2xl sm:text-3xl md:text-4xl text-gray-700 font-medium">Amazing Features</h2>
    <p class="text-xl lg:text-2xl text-gray-600 mt-2">We are mmitted to a unique, cutting-edge approach to that</p>
  </div>
  <div class="md:grid  items-center md:grid-cols-3 md:gap-12 xl:gap-y-20 max-w-screen-xl mx-auto mt-12 lg:mt-20 space-y-12 md:space-y-0">

    <div class="space-y-12 lg:space-y-20 order-1">
      <div class="text-left">
        <h3 class="font-semibold text-lg mb-2">Collection of textile</h3>
        <p>One morning, when Gregor Samsa woke from troubled dreams, he found himself It showed transformed.</p>
      </div>

      <div class="text-left">
        <h3 class="font-semibold text-lg mb-2">How about sleep a little bit</h3>
        <p>Doing business like this takes much more effort than doing your own business at home, and on top.</p>
      </div>
    </div>
   
    <div class="order-2">
      <img src="http://demo-assets.uibak.com/themesdev/placeholder-square.svg"alt="">
    </div>
    
    <div class="space-y-12 lg:space-y-20 order-3">
      <div class="text-left">
        <h3 class="font-semibold text-lg mb-2">He felt a slight up on his bell</h3>
        <p>He must have tried it a hundred times, shut his eyes so that he wouldn't have to look at the.</p>
      </div>

      <div class="text-left">
        <h3 class="font-semibold text-lg mb-2">But who knows, would do it</h3>
        <p>You've got to get enough sleep. Other travelling salesmen live a life of luxury. For instance.</p>
      </div>
    </div>

  </div>
</div>

<div class="bg-gray-50 text-gray-600 px-6 lg:px-8 pt-12 pb-20">
  <div class="grid grid-cols-2 gap-8 max-w-screen-xl mx-auto ">
    
    <div class="col-span-2 lg:col-span-1">
      <img src="http://demo-assets.uibak.com/themesdev/placeholder-horizontal.svg"alt="image placeholder" class="mb-6 lg:mb-8">
      <h2 class="text-2xl sm:text-3xl md:text-4xl xl:text-5xl text-gray-700 font-medium mb-4 lg:mb-6">This is a great article title about, this 2021 must read</h2>
      <p>One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back.</p>
      <p class="mt-4">The bedding was hardly able to cover it and seemed ready to slide off any moment. His many legs, pitifully thin compared with the size of the rest of him, waved about helplessly as he looked.</p>
      <a href="#" class="inline-block mt-5 font-semibold">Read more ></a>
    </div>
    
    <div class="col-span-2 lg:col-span-1 lg:space-y-2 md:flex lg:flex-col divide-y-2 md:divide-y-0 md:divide-x-2 lg:divide-x-0 divide-gray-300"> 
      
      <div class="flex flex-col lg:flex-row items-start space-y-6 lg:space-y-0 lg:space-x-10 bg-gray-200 p-4 rounded-lg">
        <img src="http://demo-assets.uibak.com/themesdev/placeholder-square.svg"alt="Image placeholder" class="rounded-xl w-24 lg:w-40">
        <div class="self-center">
          <span class="text-xl font-semibold text-gray-700 block">Doing your own business</span>
          <p class="mt-3">Doing business like this takes much more effort than doing your own business at home, and on top of that there's the curse of travelling.</p>
          <a href="#" class="inline-block mt-2">Read more</a>
        </div>
      </div>
  
      <div class="flex flex-col lg:flex-row items-start space-y-6 lg:space-y-0 lg:space-x-10 bg-gray-200 p-4 rounded-lg">
        <img src="http://demo-assets.uibak.com/themesdev/placeholder-square.svg"alt="Image placeholder" class="rounded-xl w-24 lg:w-40">
        <div class="self-center">
          <span class="text-xl font-semibold text-gray-700 block">Shut his eyes so</span>
          <p class="mt-3">He must have tried it a hundred times, shut his eyes so that he wouldn't have to look at the floundering legs, and only stopped when.</p>
          <a href="#" class="inline-block mt-2">Read more</a>
        </div>
      </div>
  
      <div class="flex flex-col lg:flex-row items-start space-y-6 lg:space-y-0 lg:space-x-10 bg-gray-200 p-4 rounded-lg">
        <img src="http://demo-assets.uibak.com/themesdev/placeholder-square.svg"alt="Image placeholder" class="rounded-xl w-24 lg:w-40">
        <div class="self-center">
          <span class="text-xl font-semibold text-gray-700 block">Other travelling salesmen</span>
          <p class="mt-3">You've got to get enough sleep. Other travelling salesmen live a life of luxury. For instance, whenever I go back to the guest.</p>
          <a href="#" class="inline-block mt-2">Read more</a>
        </div>
      </div>

    </div>
  </div>
</div>

<div class="bg-gray-50 text-gray-600 px-6 lg:px-8 py-12 lg:pb-20">
  <div class="max-w-screen-xl mx-auto px-6 lg:px-8 xl:px-4 grid grid-cols-1 sm:grid-cols-2 space-y-5 sm:space-y-3 xl:grid-cols-5 col-gap-6 xl:gap-12">
    <img class="h-12 p-1 self-end justify-self-center opacity-75" src="http://demo-assets.uibak.com/themesdev/jobboard-logo.svg"alt="logo placeholder">
    <img class="h-12 p-1 self-end justify-self-center opacity-75" src="http://demo-assets.uibak.com/themesdev/pathway-logo.svg"alt="logo placeholder">
    <img class="h-10 p-1 self-end justify-self-center opacity-75" src="http://demo-assets.uibak.com/themesdev/airstream-logo.svg"alt="logo placeholder">
    <img class="h-10 p-1 self-end justify-self-center opacity-75" src="http://demo-assets.uibak.com/themesdev/drops-logo.svg"alt="logo placeholder">
    <img class="h-12 p-1 self-end justify-self-center opacity-75" src="http://demo-assets.uibak.com/themesdev/fastdelivery-logo.svg"alt="logo placeholder">
  </div>
</div>

<div class="bg-gray-50 text-gray-600 px-6 lg:px-8 pt-12 pb-20">
  <div class="max-w-screen-xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-12 bg-gray-200 p-8 lg:p-12 rounded-lg ">
    <div class="col-span-1 md:col-span-2 order-2 md:order-1">
      <h2 class="text-2xl sm:text-3xl md:text-4xl text-gray-700 font-medium">This makes a great headline</h2>
      <p class="text-xl  text-gray-600 mt-4 max-w-3xl">World among the stalks, and grow familiar with the countless indescribable forms of the insects and flies, then I feel the presence of the Almighty, who formed us in his own image, and the breath</p>
      <div class="flex flex-row space-x-2">
        <a href="#" class="inline-block bg-gray-600 font-semibold rounded-lg py-4 px-5 lg:px-8 text-white mt-6">Order now</a>
        <a href="#" class="inline-block bg-gray-500 font-semibold rounded-lg py-4 px-5 lg:px-8 text-white mt-6">View pricing</a>
      </div>
    </div>
    <div class="col-span-1 order-1 md:order-2">
      <p class="text-lg italic">"One morning, when Gregor Samsa woke from troubled dreams, he found himself It showed transformed in his bed
        into a horrible vermin. Bad, for quick jigs vex! Fox nymphs."</p>
      <div class="flex flex-row items-center space-x-4 mt-6 lg:mt-8 ">
        <img src="http://demo-assets.uibak.com/themesdev/user-placeholder.svg"alt="User placeholder" class="rounded-full w-16">
        <div class="space-y-1">
          <span class="text-lg font-semibold text-gray-700 block">Alan Gregory</span>
          <span class="text-base font-semibold text-gray-500 block">CEO - Facebook</span>
        </div>
      </div>
    </div>
  </div>
</div>

<footer class="bg-gray-50 text-gray-600 px-6 lg:px-8 py-12">
  <div class="max-w-screen-xl mx-auto mb-12 lg:mb-16  ">
    <img class="h-8" src="http://demo-assets.uibak.com/themesdev/uptimemate-logo-dark.svg"alt="UptimeMate logo">
  </div>
  <div class="max-w-screen-xl mx-auto ">
    <div class="grid grid-cols-8 md:grid-cols-9  lg:grid-cols-8  divide-gray-200 divide-y-2 md:divide-x-2 md:divide-y-0 md:-mx-8">
      <div class="col-span-8 md:col-span-3 lg:col-span-2 md:px-8 py-4 md:py-0">
        <h5 class="text-xl font-semibold text-gray-700">Company</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">Download brochure</a>
            </li>
          </ul>
        </nav>
      </div>
      <div class="col-span-8 md:col-span-3 lg:col-span-3 md:px-8 py-4 md:py-0">
        <h5 class="text-xl font-semibold text-gray-700">Industries</h5>
        <nav class="mt-4">
          <ul class="grid lg:grid-cols-2">
            <li class="mb-2">
              <a href="#" class="font-normal text-base hover:text-gray-400">Employment</a>
            </li>
            <li class="mb-2">
              <a href="#" class="font-normal text-base hover:text-gray-400">Company</a>
            </li>
            <li class="mb-2">
              <a href="#" class="font-normal text-base hover:text-gray-400">Childcare</a>
            </li>
            <li class="mb-2">
              <a href="#" class="font-normal text-base hover:text-gray-400">Download brochure</a>
            </li>
          </ul>
        </nav>
      </div>
      <div class="col-span-8 md:col-span-3 lg:col-span-3 md:px-8 py-4 md:py-0">
        <h5 class="text-xl font-semibold text-gray-700">Follow us</h5>
        <nav class="mt-4">
          <ul class="grid lg:grid-cols-2">
            <li class="mb-2">
              <a href="#" class="flex space-x-2 font-normal text-base hover:text-gray-400">
                <svg class="h-6 w-6" aria-hidden="true" fill="currentColor" viewBox="0 0 24 24">
                  <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>
                <span>
                  Twitter
                </span>
              </a>
            </li>
            <li class="mb-2">
              <a href="#" class="flex space-x-2  font-normal text-base hover:text-gray-400">
                <svg class="h-6 w-6" aria-hidden="true" fill="currentColor" viewBox="0 0 24 24">
                  <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>
                <span>
                  Instagram
                </span>
              </a>
            </li>
            <li class="mb-2">
              <a href="#" class="flex space-x-2  font-normal text-base hover:text-gray-400">
                <svg class="h-6 w-6" aria-hidden="true" fill="currentColor" viewBox="0 0 24 24">
                  <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>
                <span>
                  Facebook
                </span>
              </a>
            </li>
          </ul>
        </nav>
      </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-8 lg:mt-12 border-t-2 border-gray-200 pt-8">
    <nav class="flex flex-wrap justify-center space-x-6"> 
      <a href="#" class="font-normal text-sm hover:text-gray-400 mb-2">Cookie settings</a>
    </nav>
    <p class="text-sm text-center md:text-right">©2021 Company. All rights reserved. | All rights reserved</p>
  </div>
</footer>