Star Rating Testimonial Cards

<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">
    Rated by real users
  </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">
        <!-- The whole row is one image with a worded label; the five glyphs
             themselves are aria-hidden so the rating is announced once. -->
        <div class="flex items-center gap-0.5" role="img" aria-label="Rated 5 out of 5">
          <svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" class="h-4 w-4 text-amber-400"><path d="M10 1.5l2.6 5.27 5.82.85-4.21 4.1.99 5.79L10 14.77l-5.2 2.73.99-5.79-4.21-4.1 5.82-.85L10 1.5z" /></svg>
          <svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" class="h-4 w-4 text-amber-400"><path d="M10 1.5l2.6 5.27 5.82.85-4.21 4.1.99 5.79L10 14.77l-5.2 2.73.99-5.79-4.21-4.1 5.82-.85L10 1.5z" /></svg>
          <svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" class="h-4 w-4 text-amber-400"><path d="M10 1.5l2.6 5.27 5.82.85-4.21 4.1.99 5.79L10 14.77l-5.2 2.73.99-5.79-4.21-4.1 5.82-.85L10 1.5z" /></svg>
          <svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" class="h-4 w-4 text-amber-400"><path d="M10 1.5l2.6 5.27 5.82.85-4.21 4.1.99 5.79L10 14.77l-5.2 2.73.99-5.79-4.21-4.1 5.82-.85L10 1.5z" /></svg>
          <svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" class="h-4 w-4 text-amber-400"><path d="M10 1.5l2.6 5.27 5.82.85-4.21 4.1.99 5.79L10 14.77l-5.2 2.73.99-5.79-4.21-4.1 5.82-.85L10 1.5z" /></svg>
        </div>
        <blockquote class="mt-4 flex-1 text-sm leading-relaxed text-gray-700 dark:text-gray-300">
          &ldquo;It paid for itself in the first month.&rdquo;
        </blockquote>
        <figcaption class="mt-4 text-sm">
          <span class="font-semibold text-gray-900 dark:text-gray-100">Priya Nair</span>
          <span class="text-gray-500 dark:text-gray-400"> · Engineering Lead</span>
        </figcaption>
      </figure>
    </li>
    <!-- Repeat <li> per review. -->
  </ul>
</section>