Three-Column Testimonial Grid

<section class="mx-auto w-full max-w-6xl px-4 py-12 sm:px-6">
  <h2 class="mb-8 text-center text-2xl font-bold tracking-tight text-gray-900 sm:text-3xl dark:text-gray-100">
    Loved by teams everywhere
  </h2>

  <ul class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
    <li>
      <figure class="flex h-full flex-col rounded-2xl border border-gray-200 bg-white p-6 dark:border-gray-800 dark:bg-gray-900">
        <blockquote class="flex-1 text-sm leading-relaxed text-gray-700 dark:text-gray-300">
          &ldquo;We shipped in a week what used to take a quarter.&rdquo;
        </blockquote>
        <figcaption class="mt-5 flex items-center gap-3">
          <span aria-hidden="true" class="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-gradient-to-br from-blue-500 to-violet-500 text-xs font-semibold text-white">
            AO
          </span>
          <span class="min-w-0">
            <span class="block truncate text-sm font-semibold text-gray-900 dark:text-gray-100">Amara Okafor</span>
            <span class="block truncate text-xs text-gray-500 dark:text-gray-400">Head of Operations, Northwind</span>
          </span>
        </figcaption>
      </figure>
    </li>
    <!-- Repeat <li> per testimonial. Cards use h-full so a longer quote in one
         column does not leave its neighbours short. -->
  </ul>
</section>