Examples 02

            
<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 grid grid-cols-2 gap-6 mb-8 lg:mb-20 mt-12 lg:mt-20">
    <div class="col-span-2 md:col-span-1">
      <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl text-gray-700 font-medium">Amazing Features for your next project or website</h2>
    </div>
    <div class="flex md:justify-end col-span-2 md:col-span-1">
      <div class="max-w-md md:pt-4">
        <p class="text-lg text-gray-600">You've got to get enough sleep. Other travelling salesmen live a life of luxury. For instance.</p>
        <a href="#" class="font-semibold mt-3 inline-block">Learn more</a>
      </div>
    </div>
  </div>

  <div class="max-w-screen-xl mx-auto mb-12">
    <img src="http://demo-assets.uibak.com/themesdev/placeholder-horizontal.svg"alt="image placeholder" class="rounded-lg">
  </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-2 sm:grid-cols-3 space-y-5 sm:space-y-3 xl:grid-cols-6 col-gap-6 mb-8 lg:mb-10">
    <img class="h-12 p-1 self-end justify-self-center" src="http://demo-assets.uibak.com/themesdev/boxify-logo.svg"alt="logo placeholder">
    <img class="h-10 p-1 self-end justify-self-center" src="http://demo-assets.uibak.com/themesdev/edge-logo.svg"alt="logo placeholder">
    <img class="h-10 p-1 self-end justify-self-center" src="http://demo-assets.uibak.com/themesdev/sbalbew-logo.svg"alt="logo placeholder">
    <img class="h-10 p-1 self-end justify-self-center" src="http://demo-assets.uibak.com/themesdev/drops-logo.svg"alt="logo placeholder">
    <img class="h-12 p-1 self-end justify-self-center" src="http://demo-assets.uibak.com/themesdev/pathway-logo.svg"alt="logo placeholder">
    <img class="h-12 p-1 self-end justify-self-center" src="http://demo-assets.uibak.com/themesdev/feedback-logo.svg"alt="logo placeholder">
  </div>
  <div class="max-w-screen-lg mx-auto mt-8 lg:mt-12  text-center">
    <p class="text-lg lg:text-xl text-gray-600">
      Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary
    </p>
    <a href="#" class="inline-block bg-gray-600 font-semibold rounded-lg py-4 px-5 lg:px-8 text-white mt-6 lg:mt-10">Order our product now</a>
  </div>
</div>

<div class="bg-gray-50 text-gray-600 px-6 lg:px-8 pt-12 pb-20">
  <div class="max-w-screen-lg mx-auto space-y-20 md:space-y-16 ">
    <div class="flex flex-col md:flex-row items-center md:space-x-10 space-y-6 md:space-y-0">
      <img src="http://demo-assets.uibak.com/themesdev/placeholder-square.svg"alt="User placeholder" class="rounded-lg w-48 md:order-1">
      <div class="flex-1 md:order-2">
        <h3 class="font-semibold text-lg lg:text-xl mb-2">He felt a slight itch up on his bell</h3>
        <div class="text-lg lg:text-xl">
          <p>Quick brown dogs jump over the lazy fox. The jay, pig, fox,
            zebra, and my wolves quack! Blowzy red vixens fight for a quick jump. Joaquin Phoenix was gazed.</p>
          <a href="#" class="mt-5 inline-block">Read more »</a>
        </div>
      </div>
    </div>

    <div class="flex flex-col md:flex-row items-center space-y-6 md:space-x-10 md:space-x-reverse md:space-y-0">
      <img src="http://demo-assets.uibak.com/themesdev/placeholder-square.svg"alt="User placeholder" class="rounded-lg w-48 md:order-2">
      <div class="flex-1 md:order-1">
        <h3 class="font-semibold text-lg lg:text-xl mb-2">He felt a slight itch up on his bell</h3>
        <div class="text-lg lg:text-xl">
          <p>Quick brown dogs jump over the lazy fox. The jay, pig, fox,
            zebra, and my wolves quack! Blowzy red vixens fight for a quick jump. Joaquin Phoenix was gazed.</p>
          <a href="#" class="mt-5 inline-block">Read more »</a>
        </div>
      </div>
    </div>

    <div class="flex flex-col md:flex-row items-center md:space-x-10 space-y-6 md:space-y-0">
      <img src="http://demo-assets.uibak.com/themesdev/placeholder-square.svg"alt="User placeholder" class="rounded-lg w-48 md:order-1">
      <div class="flex-1 md:order-2">
        <h3 class="font-semibold text-lg lg:text-xl mb-2">He felt a slight itch up on his bell</h3>
        <div class="text-lg lg:text-xl">
          <p>Quick brown dogs jump over the lazy fox. The jay, pig, fox,
            zebra, and my wolves quack! Blowzy red vixens fight for a quick jump. Joaquin Phoenix was gazed.</p>
          <a href="#" class="mt-5 inline-block">Read more »</a>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="bg-gray-50 text-gray-100 px-6 lg:px-8 py-12">
  <div class="max-w-screen-xl mx-auto grid grid-cols-1 gap-6 lg:gap-x-8">
    <div class="bg-gray-600 px-6 lg:px-12 pt-20 lg:pt-32 xl:pt-48 pb-8 lg:pb-12 rounded">
      <h3 class="font-semibold text-lg mb-2">Collection of textile</h3>
      <p>One morning, when Gregor Samsa woke from troubled dreams, he found It showed transformed.</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">Free demo for WindyBlocks</h2>
    <form class="grid grid-cols-2 md:grid-cols-4 gap-4 mt-6 lg:mt-8 mx-auto">
      <input type="text" placeholder="Name" class="bg-white border border-gray-300 px-4 py-2 flex-1 rounded-lg h-14">
      <input type="Email" placeholder="Email address" class="bg-white border border-gray-300 px-4 py-2 flex-1 rounded-lg h-14">
      <input type="password" placeholder="password" class="bg-white border border-gray-300 px-4 py-2 flex-1 rounded-lg h-14 col-span-2 md:col-span-1">
      <button class="inline-block bg-gray-600 font-semibold rounded-lg h-14 py-4 px-5 lg:px-8 text-white justify-self-center md:justify-self-auto col-span-2 md:col-span-1">Sign up for free</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>
      <img class="h-8" src="http://demo-assets.uibak.com/themesdev/uptimemate-logo-dark.svg"alt="UptimeMate logo">
      <p class="mt-4">Let our designs work for you. And save valuable time during your next business adventure.</p>
    </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">General Terms & Conditions</a>
          </li>
          <li>
            <a href="#" class="font-normal text-base hover:text-gray-400">Data Processing Agreement</a>
          </li>
          <li>
            <a href="#" class="font-normal text-base hover:text-gray-400">Privacy Statement</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-400">support@company.com</a>
          </div>
        </div>
      </div>
    </div>
    <div>
      <h5 class="text-xl font-semibold text-gray-700">Latest news</h5>
      <div class="space-y-8 mt-4">
        <a href="#" class="flex items-start space-x-4">
          <img class="h-12 mt-1 rounded-lg overflow-hidden" src="http://demo-assets.uibak.com/themesdev/placeholder-gray.svg"alt="Gray image placeholder">
          <div class="flex-1">
            <p>Lorem ipsum dolor sit amet, consec tetur ad ipiscing elit. Nam non dictum magna.</p>
            <strong class="font-semibold block mt-2 text-sm text-gray-500">2019-10-21</strong>
          </div>
        </a>
        <a href="#" class="flex items-start space-x-4">
          <img class="h-12 mt-1 rounded-lg overflow-hidden" src="http://demo-assets.uibak.com/themesdev/placeholder-gray.svg"alt="Gray image placeholder">
          <div class="flex-1">
            <p>Lorem ipsum dolor sit amet, consec tetur ad ipiscing elit. Nam non dictum magna.</p>
            <strong class="font-semibold block mt-2 text-sm text-gray-500">2019-10-21</strong>
          </div>
        </a>
      </div>
    </div>
  </div>
  <div class="max-w-screen-xl mx-auto flex flex-col items-center mt-16">
    <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>
</footer>