CTA

            
<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">Buy our awesome product now</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="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>
            
          

            
<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 md:flex md:flex-row md:space-x-8 md:items-center">
    <div class="flex-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>
    <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>
            
          

            
<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-2 gap-8 lg:gap-24 md:items-center">
    <div class="col-span-2 md:col-span-1 order-2 md:order-1">
      <h2 class="text-2xl sm:text-3xl md:text-4xl text-gray-700 font-medium">Join our newsletter</h2>
      <p class="text-xl text-gray-600 mt-4 max-w-3xl">When, while the lovely valley teems with vapour around me, and the meridian sun strikes the upper surface of the impenetrable foliage of my trees</p>
      <form class="flex flex-row space-x-2 mt-6">
        <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>
    </div>
    <div class="col-span-2 md:col-span-1 flex flex-row space-x-2 order-1 md:order-2">
      <img src="http://demo-assets.uibak.com/themesdev/placeholder-horizontal.svg"alt="">
    </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-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-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>
            
          

            
<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-2 gap-8 lg:gap-24 md:items-center">
    <div class="col-span-2 md:col-span-1 flex flex-row space-x-2">
      <img src="http://demo-assets.uibak.com/themesdev/placeholder-square.svg"alt="">
    </div>
    <div class="col-span-2 md:col-span-1">
      <h2 class="text-2xl sm:text-3xl md:text-4xl text-gray-700 font-medium">The best product on the market</h2>
      <p class="text-xl text-gray-600 mt-4 max-w-3xl">When, while the lovely valley teems with vapour around me, and the meridian sun strikes the upper surface of the impenetrable foliage of my trees</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>
</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>
            
          

            
<div class="bg-gray-50 text-gray-600">
  <div class="mx-auto grid grid-cols-2">
    <div class="col-span-2 md:col-span-1">
      <img src="http://demo-assets.uibak.com/themesdev/placeholder-horizontal.svg"alt="image placeholder" class="object-cover min-h-full w-full">
    </div>
    <div class="col-span-2 md:col-span-1 py-6 lg:py-12 p-8 flex items-center justify-center">
      <div>
        <span class="block uppercase font-semibold mb-2">Premium Tailwind CSS</span>
        <h2 class="text-2xl sm:text-3xl md:text-4xl text-gray-700 font-medium">The best product on the market</h2>
        <p class="text-xl text-gray-600 mt-4 max-w-3xl">When, while the lovely valley teems with vapour around me, and the meridian sun strikes the upper surface of the impenetrable foliage of my </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>
  </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>
            
          

            
<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">
    <div class="bg-gray-200 rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-5">
      <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="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4" />
      </svg>
    </div>
    <h2 class="text-2xl sm:text-3xl md:text-4xl text-gray-700 font-medium">Buy our awesome product now</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>
    <div class="max-w-xl mx-auto mt-6 lg:mt-10 mb-4">
      <img src="http://demo-assets.uibak.com/themesdev/placeholder-horizontal.svg"alt="image placeholder" class="rounded-lg">
    </div>
    <div class="flex flex-row space-x-2 justify-center">
      <a href="#" class="inline-block bg-gray-500 font-semibold rounded-lg py-4 px-5 lg:px-8 text-white mt-6">Order now</a>
      <a href="#" class="inline-block bg-transparent font-semibold rounded-lg py-4 px-5 lg:px-8 text-gray-600 mt-6">View demo</a>
    </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-lg mx-auto md:flex md:flex-row md:space-x-8 md:items-center">
    <div class="flex-1">
      <h2 class="text-2xl sm:text-3xl md:text-4xl text-gray-700 font-medium">This is a very short Call to Action</h2>
    </div>
    <div>
      <a href="#" class="inline-block bg-gray-600 font-semibold rounded-lg py-4 px-5 lg:px-8 xl:px-16 text-white mt-6 lg:mt-0">Order now</a>
    </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 order-2 md:order-1 mt-8 md:mt-0">
      <img src="http://demo-assets.uibak.com/themesdev/placeholder-horizontal.svg"alt="Image placeholder" class="rounded-lg w-full">
      <form class="mt-6 lg:mt-8 mx-auto">
        <div class="grid grid-cols-2 gap-6">
          <input type="text" placeholder="Name" class="bg-white border border-gray-300 px-4 py-2 rounded-lg h-14 w-full">
          <input type="Email" placeholder="Email address" class="bg-white border border-gray-300 px-4 py-2 rounded-lg h-14 w-full">
        </div>
        <button class="inline-block bg-gray-600 font-semibold rounded-lg h-14 py-4 px-5 lg:px-8 text-white mt-4">Sign up for free</button>
      </form>
    </div>
    <div class="col-span-2 md:col-span-1 self-center max-w-2xl order-1 md:order-2">
      <h2 class="text-2xl sm:text-3xl md:text-4xl text-gray-700 font-medium">The best features</h2>
      <div class="text-lg text-gray-600">
        <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 class="space-y-6 lg:space-y-8 mt-8">
          <div class="text-left flex space-x-6">
            <div class="bg-gray-200 rounded-full w-16 h-16 flex items-center justify-center ">
              <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="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
              </svg>
            </div>
            <div class="flex-1">
              <h3 class="font-semibold text-lg mb-2">How about if I sleep a little bit</h3>
              <p>Doing business like this takes much more effort than doing your own business at home, and on top of tha of travelling.</p>
            </div>
          </div>
          <div class="text-left flex space-x-6">
            <div class="bg-gray-200 rounded-full w-16 h-16 flex items-center justify-center ">
              <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="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4" />
              </svg>
            </div>
            <div class="flex-1">
              <h3 class="font-semibold text-lg mb-2">He felt a slight itch up on his bell</h3>
              <p>He must have tried it a hundred times, shut his have to look at the floundering legs, and only stopped when.</p>
            </div>
          </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 text-center">
    <div class="bg-gray-200 rounded-lg uppercase inline-block text-xs font-bold py-2 px-4 mb-4">New release</div>
    <h2 class="text-2xl sm:text-3xl md:text-4xl text-gray-700 font-medium">New version with even more components</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>
    <div class="flex flex-row space-x-2 justify-center">
      <a href="#" class="inline-block bg-gray-600 font-semibold rounded-lg py-4 px-5 lg:px-8 text-white mt-6">Download brochure</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>
            
          

            
<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 md:flex md:flex-row md:space-x-8 md:items-center">
    <div class="w-12 self-start pt-2 mb-2">
      <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 5.882V19.24a1.76 1.76 0 01-3.417.592l-2.147-6.15M18 13a3 3 0 100-6M5.436 13.683A4.001 4.001 0 017 6h1.832c4.1 0 7.625-1.234 9.168-3v14c-1.543-1.766-5.067-3-9.168-3H7a3.988 3.988 0 01-1.564-.317z" />
      </svg>
    </div>
    <div class="flex-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>
    <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>
            
          

            
<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 lg:grid-cols-2 gap-8 lg:gap-12 md:items-center">
    <div class="col-span-2 md:col-span-1 order-2 lg:order-1">
      <h2 class="text-2xl sm:text-3xl md:text-4xl text-gray-700 font-medium">We take care of everything</h2>
      <div class="grid grid-cols-1 sm:grid-cols-2 gap-6 lg:gap-8 mt-6">
        <div>
          <h3 class="text-xl font-semibold text-gray-700 block">Took out the window at the</h3>
          <p class="mt-3 text-lg text-gray-600">Doing business like this takes much more effort than doing your own business at home, and on top of</p>
          <a href="#" class="inline-block bg-gray-600 font-semibold rounded-lg py-4 px-5 lg:px-8 text-white mt-6">Read more</a>
        </div>
        <div>
          <h3 class="text-xl font-semibold text-gray-700 block">How about if I sleep a little bit</h3>
          <p class="mt-3 text-lg text-gray-600">Doing business like this takes much more effort than doing your own business at home, and on top of</p>
          <a href="#" class="inline-block bg-gray-600 font-semibold rounded-lg py-4 px-5 lg:px-8 text-white mt-6">Read more</a>
        </div>
      </div>
    </div>
    <div class="col-span-2 md:col-span-1 flex flex-row space-x-2 order-1 lg:order-2">
      <img src="http://demo-assets.uibak.com/themesdev/placeholder-horizontal.svg"alt="">
    </div>
  </div>
</div>
            
          

            
<div class="bg-gray-50 text-gray-600">
  <div class="mx-auto grid grid-cols-2">
    <div class="col-span-2 md:col-span-1 py-6 lg:py-12 xl:py-32 p-8 flex items-center justify-center bg-gray-200 text-center">
      <div>
        <span class="block uppercase font-semibold mb-2">Premium Tailwind CSS</span>
        <h2 class="text-2xl sm:text-3xl md:text-4xl text-gray-700 font-medium">The best product on the market</h2>
        <p class="text-xl text-gray-600 mt-4 max-w-3xl">When, while the lovely valley teems with vapour around me, and the meridian sun strikes the upper surface of the impenetrable foliage of my </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>
    <div class="col-span-2 md:col-span-1 py-6 lg:py-12 xl:py-32 p-8 flex items-center justify-center text-center">
      <div>
        <span class="block uppercase font-semibold mb-2">Premium Tailwind CSS</span>
        <h2 class="text-2xl sm:text-3xl md:text-4xl text-gray-700 font-medium">The best product on the market</h2>
        <p class="text-xl text-gray-600 mt-4 max-w-3xl">When, while the lovely valley teems with vapour around me, and the meridian sun strikes the upper surface of the impenetrable foliage of my </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>
  </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-3 gap-8 lg:gap-24 md:items-center">
    <div class="col-span-3 md:col-span-1 flex flex-row space-x-2">
      <div class="bg-gray-200 p-6 lg:p-8 w-full text-center">
        <span class="text-xl lg:text-2xl font-semibold text-gray-700 mb-2">Monthly costs</span>
        <div class="-mx-6 lg:-mx-8 mt-6 pt-6 border-t border-gray-300 px-6 lg:px-8">
          <ul class="space-y-2"> 
            <li class="flex justify-between space-x-4">
              <span>Storage</span>
              <span>$20</span>
            </li>
            <li class="flex justify-between space-x-4">
              <span>Bandwidth</span>
              <span>$10</span>
            </li>
            <li class="flex justify-between space-x-4">
              <span>Mailboxes</span>
              <span>$5</span>
            </li>
            <li class="flex justify-between space-x-4">
              <span>Support</span>
              <span>Free</span>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="col-span-3 md:col-span-2">
      <h2 class="text-2xl sm:text-3xl md:text-4xl text-gray-700 font-medium">Pro Laravel Hosting</h2>
      <p class="text-xl text-gray-600 mt-4 max-w-3xl">When, while the lovely valley teems with vapour around me, and the meridian sun strikes the upper surface of the impenetrable foliage of my trees</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>
      </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-lg mx-auto grid grid-cols-2 gap-x-8 lg:gap-x-12 ">
    <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"class="w-full" alt="User Image">
    </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">Deep integration, more data</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-1 md:grid-cols-2 gap-8 xl:gap-y-12 ">
        <div class="flex space-x-4">
          <div class="w-16 bg-gray-200 rounded-full p-4 mb-4 mx-auto flex-shrink-0">
            <svg class="h-8 w-8" 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"></path>
            </svg>
          </div>
          <div class="flex-1">
            <span class="font-semibold block text-base md:text-lg mb-1 ">Facebook</span>
            <a href="#">Lean more</a>
          </div>
        </div>
        <div class="flex space-x-4">
          <div class="w-16 bg-gray-200 rounded-full p-4 mb-4 mx-auto flex-shrink-0">
            <svg class="h-8 w-8" 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"></path>
            </svg>
          </div>
          <div class="flex-1">
            <span class="font-semibold block text-base md:text-lg mb-1 ">Twitter</span>
            <a href="#">Lean more</a>
          </div>
        </div>
      </div>
      <div class="text-lg mt-6 font-semibold">
        <a href="#">View all integrations »</a>
      </div>
    </div>
  </div>
</div>
            
          

            
<div class="bg-gray-50 text-gray-600 px-6 lg:px-8 pt-8 pb-12">
  <div class="max-w-screen-lg mx-auto md:flex md:flex-row md:space-x-8 md:items-center bg-gray-200 rounded-lg py-6 px-6">
    <div class="flex-1">
      <h2 class="text-2xl sm:text-3xl  text-gray-700 font-medium">Create your boxify instance in 5 minutes</h2>
      <p class="text-xl text-gray-600 mt-4 max-w-3xl">When, while the lovely valley teems with vapour around me, and the meridian sun strikes the upper surface of the impenetrable foliage of my trees</p>
    </div>
    <div>
      <a href="#" class="inline-block bg-gray-600 font-semibold rounded-lg py-4 px-5 lg:px-8 xl:px-16 text-white mt-6 lg:mt-0">Create account</a>
    </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">Ready to Start? <br> Create your free account.</h2>
    <div class="flex flex-row items-center justify-center space-x-4 mx-auto mt-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>