Team Hover Bio Overlay

<section class="mx-auto w-full max-w-6xl 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">Meet the team</h2>

  <ul class="mt-10 grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
    <li>
      <!--
        The bio reveal is tied to :hover AND :focus-visible on the same link, so
        keyboard users get the same information mouse users do. The scrim behind
        the bio is what keeps it at 4.5:1 over the gradient.
      -->
      <a href="#" class="group relative flex aspect-square flex-col justify-end overflow-hidden rounded-2xl bg-gradient-to-br from-blue-500 to-indigo-600 p-5 text-white focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-blue-400 dark:focus-visible:ring-offset-gray-900">
        <span aria-hidden="true" class="absolute inset-0 flex items-center justify-center text-4xl font-bold text-white/90 transition-opacity duration-200 group-hover:opacity-0 group-focus-visible:opacity-0 motion-reduce:transition-none">PR</span>
        <div class="relative">
          <h3 class="text-base font-semibold">Priya Raman</h3>
          <p class="text-sm text-white/80">Co-founder, strategy</p>
        </div>
        <p class="absolute inset-0 flex items-center bg-black/60 p-5 text-sm leading-relaxed opacity-0 transition-opacity duration-200 group-hover:opacity-100 group-focus-visible:opacity-100 motion-reduce:transition-none">Fifteen years turning vague briefs into things that can be built.</p>
      </a>
    </li>
  </ul>
</section>