Simple three-column

simpleThreeColumn

<div class="grid grid-rows-3 md:grid-rows-1 md:grid-cols-3 md:col-gap-5 row-gap-5 md:col-gap-0 py-10 px-5 bg-white">
  <div class="flex flex-col">
    <div class="h-16 md:h-10 w-16 md:w-10 bg-indigo-700 rounded-md flex justify-center items-center">
      <svg
        class="h-10 md:h-6 w-10 md:w-6 text-white fill-current"
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 24 24"
      >
        <path d="M4.06 13a8 8 0 0 0 5.18 6.51A18.5 18.5 0 0 1 8.02 13H4.06zm0-2h3.96a18.5 18.5 0 0 1 1.22-6.51A8 8 0 0 0 4.06 11zm15.88 0a8 8 0 0 0-5.18-6.51A18.5 18.5 0 0 1 15.98 11h3.96zm0 2h-3.96a18.5 18.5 0 0 1-1.22 6.51A8 8 0 0 0 19.94 13zm-9.92 0c.16 3.95 1.23 7 1.98 7s1.82-3.05 1.98-7h-3.96zm0-2h3.96c-.16-3.95-1.23-7-1.98-7s-1.82 3.05-1.98 7zM12 22a10 10 0 1 1 0-20 10 10 0 0 1 0 20z"/>
      </svg>
    </div>
    <h4 class="mt-2 text-gray-900 font-semibold text-xl md:text-lg">Competitive exchange rates</h4>
    <p class="text-gray-700 text-lg md:text-base mt-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam at egestas mi, ac interdum mi.</p>
  </div>
  <div class="flex flex-col">
    <div class="h-16 md:h-10 w-16 md:w-10 bg-indigo-700 rounded-md flex justify-center items-center">
      <svg
        class="h-10 md:h-6 w-10 md:w-6 text-white fill-current"
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 24 24"
      >
        <path class="heroicon-ui" d="M12 22a10 10 0 1 1 0-20 10 10 0 0 1 0 20zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm1-11v2h1a3 3 0 0 1 0 6h-1v1a1 1 0 0 1-2 0v-1H8a1 1 0 0 1 0-2h3v-2h-1a3 3 0 0 1 0-6h1V6a1 1 0 0 1 2 0v1h3a1 1 0 0 1 0 2h-3zm-2 0h-1a1 1 0 1 0 0 2h1V9zm2 6h1a1 1 0 0 0 0-2h-1v2z"/>
      </svg>
    </div>
    <h4 class="mt-2 text-gray-900 font-semibold text-xl md:text-lg">No hidden fees</h4>
    <p class="text-gray-700 text-lg md:text-base mt-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam at egestas mi, ac interdum mi.</p>
  </div>
  <div class="flex flex-col">
    <div class="h-16 md:h-10 w-16 md:w-10 bg-indigo-700 rounded-md flex justify-center items-center">
      <svg
        class="h-10 md:h-6 w-10 md:w-6 text-white fill-current"
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 24 24"
      >
        <path class="heroicon-ui" d="M16.21 16.95a5 5 0 0 1-4.02 4.9l-3.85.77a1 1 0 0 1-.9-.27l-.71-.7a2 2 0 0 1 0-2.83l1.44-1.45a13.17 13.17 0 0 1-1.42-1.41L5.31 17.4a2 2 0 0 1-2.83 0l-.7-.7a1 1 0 0 1-.28-.9l.77-3.86a5 5 0 0 1 4.9-4.02h.86a13.07 13.07 0 0 1 12.82-5.47 1 1 0 0 1 .83.83A12.98 12.98 0 0 1 16.2 16.1v.85zm-4.41 2.94a3 3 0 0 0 2.41-2.94v-1.4a1 1 0 0 1 .47-.84A11.04 11.04 0 0 0 19.8 4.33 10.98 10.98 0 0 0 9.42 9.45a1 1 0 0 1-.85.47h-1.4a3 3 0 0 0-2.94 2.4l-.66 3.34.33.33 2.24-2.24a1 1 0 0 1 1.52.12 11.08 11.08 0 0 0 2.6 2.6 1 1 0 0 1 .12 1.52l-2.24 2.24.33.33 3.33-.67zM15 10a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"/>
      </svg>
    </div>
    <h4 class="mt-2 text-gray-900 font-semibold text-xl md:text-lg">Transfers are instant</h4>
    <p class="text-gray-700 text-lg md:text-base mt-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam at egestas mi, ac interdum mi.</p>
  </div>
</div>