Hero's 07

            
<div class="bg-gray-100 text-gray-600 ">
  <div class="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>
  <div class="max-w-screen-xl mx-auto text-center mt-8 sm:mt-12 md:mt-20 xl:mt-48 mb-8 sm:mb-12 md:mb-20 xl:mb-48">
    <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl text-gray-700 font-medium">What are you looking for?</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 </p>
    <div class="flex justify-center items-center  mt-6 lg:mt-12 flex-wrap">
      <a href="#" class="inline-block bg-gray-600 font-semibold rounded-lg py-4 px-5 lg:px-8 text-white mt-6 mx-4">Clothes for men</a>
      <a href="#" class="inline-block bg-gray-600 font-semibold rounded-lg py-4 px-5 lg:px-8 text-white mt-6 mx-4">Clothes for woman</a>
      <a href="#" class="inline-block bg-gray-600 font-semibold rounded-lg py-4 px-5 lg:px-8 text-white mt-6 mx-4">Clothes for children</a>
      <a href="#" class="inline-block bg-gray-600 font-semibold rounded-lg py-4 px-5 lg:px-8 text-white mt-6 mx-4">Sale outlet</a>
    </div>
  </div>
  <div class="bg-gray-200">
    <div class="flex flex-col md:flex-row justify-between max-w-screen-xl mx-auto px-6 lg:px-8 py-4">
      <div class="flex space-x-2 items-center">
        <span class="w-6">
          <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="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z" />
          </svg>
        </span>
        <span>
          Made divided appear let sixth
        </span>
      </div>
      <div class="flex space-x-2 items-center">
        <span class="w-6">
          <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="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z" />
          </svg>
        </span>
        <span>
          Fruitful gathered that upon
        </span>
      </div>
      <div class="flex space-x-2 items-center">
        <span class="w-6">
          <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="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z" />
          </svg>
        </span>
        <span>
          Was multiply saw appear 
        </span>
      </div>
    </div>
  </div>
</div>