Video Thumbnail Testimonials

<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">
    Hear it from them
  </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 overflow-hidden rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-gray-900">
        <!-- The thumbnail is a gradient stand-in, not a remote poster. The play
             control is a real link with an accessible name - not a bare icon. -->
        <a href="#" class="group relative block aspect-video bg-gradient-to-br from-slate-700 to-slate-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-blue-400">
          <span class="absolute inset-0 grid place-items-center">
            <span class="grid h-12 w-12 place-items-center rounded-full bg-white/90 shadow-md transition-transform group-hover:scale-110 motion-reduce:transition-none">
              <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" class="h-5 w-5 translate-x-0.5 text-gray-900"><path d="M8 5v14l11-7z" /></svg>
            </span>
          </span>
          <span class="sr-only">Play video testimonial from Amara Okafor</span>
        </a>
        <figcaption class="flex flex-1 flex-col p-5">
          <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>
          <span class="mt-3 text-sm">
            <span class="font-semibold text-gray-900 dark:text-gray-100">Amara Okafor</span>
            <span class="text-gray-500 dark:text-gray-400"> · Northwind</span>
          </span>
        </figcaption>
      </figure>
    </li>
    <!-- Repeat <li> per testimonial. -->
  </ul>
</section>