Examples 09

            
<div class="bg-gray-100 text-gray-600 px-6 lg:px-8 py-6">
  <div class="max-w-screen-xl mx-auto flex justify-between items-center relative">
    <a href="#">
      <img class="h-8" src="http://demo-assets.uibak.com/themesdev/drops-logo.svg"alt="logo placeholder">
    </a>
    <nav class="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">Contact</a>
    </nav>
  </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">
    <img src="http://demo-assets.uibak.com/themesdev/placeholder-horizontal.svg"alt="image placeholder" class="rounded-lg">
  </div>

  <div class="max-w-screen-md mx-auto mt-8 lg:mt-12">
    <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 is a 2021 must read.</h2>
    <p class="md:text-lg">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, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections. 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 md:text-lg">Read more ></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-lg mx-auto">
    <div class="grid md:grid-cols-2 gap-12 lg:gap-x-8">
      <div class="self-center">
        <p class="text-lg text-gray-600">
          Far far away, behind the word mountains, far from the Consonantia, blind texts. Separated they live in Bookmarksgrove right at the coast Low of the Semantics, a named Duden flows by their place and supplies it with  
        </p>
        <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>
      </div>
      <div class="border-t-2 lg:border-t-0 lg:border-l-2 border-gray-200 lg:pl-8 pt-6 lg:pt-0">
        <img class="h-12 p-1 opacity-75 mb-5" src="http://demo-assets.uibak.com/themesdev/fastdelivery-logo.svg"alt="logo placeholder">
        <p class="text-lg italic">"Two driven jocks help fax my big quiz. Quick, Baz, get my woven flax jodhpurs! "Now fax quiz Jack! " my brave ghost pled. Five quacking zephyrs jolt my wax bed."</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-12">
          <div class="space-y-1">
            <span class="text-base font-semibold text-gray-700 block">Tanya Gilbert</span>
            <span class="text-sm font-semibold text-gray-500 block">CEO - Google</span>
          </div>
        </div>
      </div>
    </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 grid grid-cols-1 md:grid-cols-3 md:divide-x-2 space-y-8 md:space-y-0">
    <div class="px-4 md:px-8 lg:px-12">
      <h3 class="text-xl font-semibold text-gray-700 block">The bedding was hardly able</h3>
      <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</p>
    </div>
    <div class="px-4 md:px-8 lg:px-12">
      <h3 class="text-xl font-semibold text-gray-700 block">Took out the window at the</h3>
      <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</p>
    </div>
    <div class="px-4 md:px-8 lg:px-12">
      <h3 class="text-xl font-semibold text-gray-700 block">Lifted his head a little he could see</h3>
      <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</p>
    </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 grid grid-cols-2 gap-x-8 lg:gap-x-12 xl:gap-x-20">
    <div class="col-span-2 md:col-span-1 mb-8 md:mb-0 ">
      <img src="http://demo-assets.uibak.com/themesdev/placeholder-square.svg"alt="Image placeholder" class="rounded-lg w-full">
    </div>
    <div class="col-span-2 md:col-span-1 self-center max-w-2xl text-lg text-gray-600">
      <h2 class="text-2xl sm:text-3xl md:text-4xl text-gray-700 font-medium">The best features</h2>
      <div class="text-lg mb-12">
        <p class="mt-6">Everyone realizes why a new common language would be desirable: one could refuse to pay
          expensive translators. To achieve this, it would be necessary to have uniform grammar</p>
      </div>
      <div class="grid grid-cols-2 gap-6 xl:gap-y-12 ">
        <div class="text-center">
          <div class="w-16 bg-gray-200 rounded-full p-4 mb-4 mx-auto">
            <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>
          <span class="font-semibold block text-base md:text-lg mb-2">His boss would certainly</span>
        </div>
        <div class="text-center">
          <div class="w-16 bg-gray-200 rounded-full p-4 mb-4 mx-auto">
            <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>
          <span class="font-semibold block text-base md:text-lg mb-2">Turned to look out</span>
        </div>
        <div class="text-center">
          <div class="w-16 bg-gray-200 rounded-full p-4 mb-4 mx-auto">
            <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="M17.657 18.657A8 8 0 016.343 7.343S7 9 9 10c0-2 .5-5 2.986-7C14 5 16.09 5.777 17.656 7.343A7.975 7.975 0 0120 13a7.975 7.975 0 01-2.343 5.657z" />
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.879 16.121A3 3 0 1012.015 11L11 14H9c0 .768.293 1.536.879 2.121z" />
            </svg>
          </div>
          <span class="font-semibold block text-base md:text-lg mb-2">One morning, when Samsa</span>
        </div>
        <div class="text-center">
          <div class="w-16 bg-gray-200 rounded-full p-4 mb-4 mx-auto">
            <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 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4" />
            </svg>
          </div>
          <span class="font-semibold block text-base md:text-lg mb-2">Window at the dull weather</span>
        </div>
      </div>
    </div>
  </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-4 md:gap-12 xl:gap-y-20 max-w-screen-xl mx-auto space-y-6 md:space-y-0">
    <div class="flex flex-row justify-between space-x-3 bg-gray-200 p-4 rounded-lg">
      <div>
        <span class="text-base">Students</span>
        <span class="block font-semibold text-3xl mb-2">221</span>
      </div>
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-8">
        <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>
   
    <div class="flex flex-row justify-between space-x-3 bg-gray-200 p-4 rounded-lg">
      <div>
        <span class="text-base">Books</span>
        <span class="block font-semibold text-3xl mb-2">3000</span>
      </div>
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-8">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
      </svg>
    </div>

    <div class="flex flex-row justify-between space-x-3 bg-gray-200 p-4 rounded-lg">
      <div>
        <span class="text-base">Hours of material</span>
        <span class="block font-semibold text-3xl mb-2">12000</span>
      </div>
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-8">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
      </svg>
    </div>

    <div class="flex flex-row justify-between space-x-3 bg-gray-200 p-4 rounded-lg">
      <div>
        <span class="text-base">Locations</span>
        <span class="block font-semibold text-3xl mb-2">12</span>
      </div>
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-8">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
      </svg>
    </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">Always stay up to date</h2>
    <form class="flex flex-row space-x-2 mt-6 lg:mt-8 max-w-lg mx-auto">
      <input type="text" placeholder="enter email address" class="bg-white border border-gray-300 px-4 py-2 flex-1 rounded-lg">
      <button class="inline-block bg-gray-600 font-semibold rounded-lg py-4 px-5 lg:px-8 text-white">Subscribe</button>
    </form>
    <p class="text-lg text-gray-600 mt-4 lg:mt-8 max-w-3xl mx-auto">World among the stalks, and grow familiar with the countless  the insects and flies, then I feel the presence of the Almighty, who formed us in his own image, and the breath</p>
  </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 grid md:grid-cols-2 lg:grid-cols-4 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>
          <li>
            <a href="#" class="font-normal text-base hover:text-gray-400">Healthcare</a>
          </li>
        </ul>
      </nav>
    </div>
    <div class="flex flex-col items-start space-y-10">
      <img class="h-10" src="http://demo-assets.uibak.com/themesdev/pathway-logo.svg"alt="PathWay logo">
      <div class="flex-1 flex flex-col justify-end">
        <div class="flex items-center space-x-2">
          <a href="#" class="hover:text-gray-500">
            <span class="sr-only">Facebook</span>
            <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>
          </a>
          <a href="#" class="hover:text-gray-500">
            <span class="sr-only">Instagram</span>
            <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>
          </a>
          <a href="#" class="hover:text-gray-500">
            <span class="sr-only">Twitter</span>
            <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>
          </a>
        </div>
        <div class="text-sm mt-4">
          ©2021 Company. All rights reserved.
        </div>
      </div>
    </div>
  </div>
</footer>