Features 18

            
<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 self-center max-w-2xl text-lg text-gray-600 order-2 md:order-1">
      <div class="space-y-6 lg:space-y-8 ">
        <div>
          <button class="flex justify-between w-full mb-2 border-b border-gray-300 px-2 py-2">
            <span class="flex-1 flex space-x-2 items-center">
              <svg class="w-6" 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 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
              </svg>
              <span class="font-semibold text-lg flex-1 text-left">How about if I sleep a little bit</span>
            </span>
            <svg class="w-5 self-end" 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 9l-7 7-7-7" />
            </svg>
          </button>
          <div class="pl-10 pt-2">
            <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>
          <button class="flex justify-between w-full mb-2 border-b border-gray-300 px-2 py-2">
            <span class="flex-1 flex space-x-2 items-center">
              <svg class="w-6" 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="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
              </svg>
              <span class="font-semibold text-lg flex-1 text-left">He felt a slight itch up on his bell</span>
            </span>
            <svg class="w-5 self-end" 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 9l-7 7-7-7" />
            </svg>
          </button>
          <div class="pl-10 pt-2 hidden">
            <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>
          <button class="flex justify-between w-full mb-2 border-b border-gray-300 px-2 py-2">
            <span class="flex-1 flex space-x-2 items-center">
              <svg class="w-6" 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 15.546c-.523 0-1.046.151-1.5.454a2.704 2.704 0 01-3 0 2.704 2.704 0 00-3 0 2.704 2.704 0 01-3 0 2.704 2.704 0 00-3 0 2.704 2.704 0 01-3 0 2.701 2.701 0 00-1.5-.454M9 6v2m3-2v2m3-2v2M9 3h.01M12 3h.01M15 3h.01M21 21v-7a2 2 0 00-2-2H5a2 2 0 00-2 2v7h18zm-3-9v-2a2 2 0 00-2-2H8a2 2 0 00-2 2v2h12z" />
              </svg>
              <span class="font-semibold text-lg flex-1 text-left">But who knows, maybe that would do it</span>
            </span>
            <svg class="w-5 self-end" 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 9l-7 7-7-7" />
            </svg>
          </button>
          <div class="pl-10 pt-2 hidden">
            <p>You've got to get enough sleep. Other travelling of luxury. For instance, whenever I go back to the
              guest.</p>
          </div>
        </div>
        <div>
          <button class="flex justify-between w-full mb-2 border-b border-gray-300 px-2 py-2">
            <span class="flex-1 flex space-x-2 items-center">
              <svg class="w-6" 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 8h2a2 2 0 012 2v6a2 2 0 01-2 2h-2v4l-4-4H9a1.994 1.994 0 01-1.414-.586m0 0L11 14h4a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2v4l.586-.586z" />
              </svg>
              <span class="font-semibold text-lg flex-1 text-left">For instance, whenever I go back to the</span>
            </span>
            <svg class="w-5 self-end" 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 9l-7 7-7-7" />
            </svg>
          </button>
          <div class="pl-10 pt-2 hidden">
            <p>But who knows, maybe that would do it e must have tried it a hundred times, shut his have to</p>
          </div>
        </div>
      </div>
    </div>
    <div class="col-span-2 md:col-span-1 mb-6 md:mb-0 order-1 md:order-2 ">
      <img src="http://demo-assets.uibak.com/themesdev/placeholder-square.svg"alt="Image placeholder" class="rounded-lg w-full">
    </div>
  </div>
</div>