<!-- This example requires Tailwind CSS v2.0+ -->
<template>
  <div class="bg-white">
    <div class="mx-auto max-w-7xl py-12 px-4 sm:px-6 lg:py-16 lg:px-8">
      <p class="text-center text-lg font-semibold text-gray-600">Trusted by over 5 very average small businesses</p>
      <div class="mt-6 grid grid-cols-2 gap-0.5 md:grid-cols-3 lg:mt-8">
        <div class="col-span-1 flex justify-center bg-gray-50 py-8 px-8">
          <img class="max-h-12" src="https://tailwindui.com/img/logos/transistor-logo-gray-400.svg" alt="Workcation" />
        </div>
        <div class="col-span-1 flex justify-center bg-gray-50 py-8 px-8">
          <img class="max-h-12" src="https://tailwindui.com/img/logos/mirage-logo-gray-400.svg" alt="Mirage" />
        </div>
        <div class="col-span-1 flex justify-center bg-gray-50 py-8 px-8">
          <img class="max-h-12" src="https://tailwindui.com/img/logos/tuple-logo-gray-400.svg" alt="Tuple" />
        </div>
        <div class="col-span-1 flex justify-center bg-gray-50 py-8 px-8">
          <img class="max-h-12" src="https://tailwindui.com/img/logos/laravel-logo-gray-400.svg" alt="Laravel" />
        </div>
        <div class="col-span-1 flex justify-center bg-gray-50 py-8 px-8">
          <img class="max-h-12" src="https://tailwindui.com/img/logos/statickit-logo-gray-400.svg" alt="StaticKit" />
        </div>
        <div class="col-span-1 flex justify-center bg-gray-50 py-8 px-8">
          <img class="max-h-12" src="https://tailwindui.com/img/logos/statamic-logo-gray-400.svg" alt="Statamic" />
        </div>
      </div>
    </div>
  </div>
</template>
