Circular Avatars

<section class="mx-auto w-full max-w-5xl px-4 py-12 sm:px-6 sm:py-16">
  <h2 class="text-center text-2xl font-bold tracking-tight text-gray-900 sm:text-3xl dark:text-gray-100">The whole crew</h2>

  <!-- Compact avatars pack denser than cards: 2 -> 3 -> 4 -> 6 columns. -->
  <ul class="mt-10 grid grid-cols-2 gap-6 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6">
    <li class="flex flex-col items-center text-center">
      <span aria-hidden="true" class="inline-flex h-20 w-20 items-center justify-center rounded-full bg-gradient-to-br from-blue-500 to-indigo-600 text-xl font-semibold text-white ring-2 ring-white dark:ring-gray-900">PR</span>
      <h3 class="mt-3 text-sm font-semibold text-gray-900 dark:text-gray-100">Priya Raman</h3>
      <p class="text-xs text-gray-600 dark:text-gray-400">Strategy</p>
    </li>
    <li class="flex flex-col items-center text-center">
      <span aria-hidden="true" class="inline-flex h-20 w-20 items-center justify-center rounded-full bg-gradient-to-br from-emerald-500 to-teal-600 text-xl font-semibold text-white ring-2 ring-white dark:ring-gray-900">TA</span>
      <h3 class="mt-3 text-sm font-semibold text-gray-900 dark:text-gray-100">Tom Ashcroft</h3>
      <p class="text-xs text-gray-600 dark:text-gray-400">Engineering</p>
    </li>
  </ul>
</section>