Layout our Team - Tailwind Component

<section class="relative py-20 h-screen overflow-hidden bg-gradient-to-t from-pink-300 via-purple-300 to-indigo-400">
  <div
    class="w-64 md:w-96 h-96 md:h-full bg-blue-200 bg-opacity-30 absolute -top-64 md:-top-96 right-20 md:right-32 rounded-full pointer-events-none -rotate-45 transform">
  </div>
  <div
    class="w-96 h-full bg-blue-300 bg-opacity-20 absolute -bottom-96 right-64 rounded-full pointer-events-none -rotate-45 transform">
  </div>

  <span class="absolute bottom-0 left-0"> </span>

  <div class="relative px-16 mx-auto max-w-7xl">
    <div class="flex flex-col justify-center items-center mb-12">
      <h1 class="text-5xl font-semibold text-gray-50">Our Scientific Leadership Team</h1>
      <p class="text-gray-200 font-medium mt-6 text-center">What happens when a Harvard trained physiologist,
        biochemist, and a registered dietician <br> walk into a lab? <span
          class="underline text-gray-200 cursor-pointer hover:text-gray-50">Essential for women</span></p>
    </div>
    <div class=" grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-2 w-full">
      <div class="flex flex-col items-center justify-center col-span-1">
        <div class="relative p-5">
          <div class="absolute z-10 w-full h-full -mt-5 -ml-5 rounded-full rounded-tr-none bg-blue-100"></div>
          <img class="relative z-20 w-full rounded-full"
            src="https://images.unsplash.com/photo-1618077360395-f3068be8e001?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Nnx8bWFuJTIwZmFjZXxlbnwwfDJ8MHx8&auto=format&fit=crop&w=500&q=80">
        </div>
        <div class="mt-3 space-y-2 text-center">
          <div class="space-y-1 text-lg font-medium leading-6">
            <h3 class="text-indigo-800 font-semibold text-lg">Dr. Luke Bucci, PhD, CCN, CNS</h3>
            <p class="text-gray-700 text-sm">VP. Research & Development <br> (Biomedical Sciences)</p>
          </div>
        </div>
      </div>

      <div class="flex flex-col items-center justify-center col-span-1">
        <div class="relative p-5">
          <div class="absolute z-10 w-full h-full -mt-5 -ml-5 rounded-full rounded-tr-none bg-yellow-100"></div>
          <img class="relative z-20 w-full rounded-full"
            src="https://images.unsplash.com/photo-1512518607807-17e94dc9a5d0?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Nzh8fHdvbWFufGVufDB8MnwwfHw%3D&auto=format&fit=crop&w=500&q=80">
        </div>
        <div class="mt-3 space-y-2 text-center">
          <div class="space-y-1 text-lg font-medium leading-6">
            <h3 class="text-indigo-800 font-semibold text-lg">Dr. Mastaneh Sharafi, PhD, RD</h3>
            <p class="text-gray-700 text-sm">Director, Scientific Affairs <br> (Nutritional Sciences)</p>
          </div>
        </div>
      </div>

      <div class="flex flex-col items-center justify-center col-span-1">
        <div class="relative p-5">
          <div class="absolute z-10 w-full h-full -mt-5 -ml-5 rounded-full rounded-tr-none bg-pink-100"></div>
          <img class="relative z-20 w-full rounded-full"
            src="https://images.unsplash.com/photo-1597248374161-426f0d6d2fc9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTA3fHx3b21hbiUyMGZhY2V8ZW58MHwyfDB8fA%3D%3D&auto=format&fit=crop&w=500&q=80">
        </div>
        <div class="mt-3 space-y-2 text-center">
          <div class="space-y-1 text-lg font-medium leading-6">
            <h3 class="text-indigo-800 font-semibold text-lg">Dr. Marie Caudill, PhD, RD</h3>
            <p class="text-gray-700 text-sm">Professor, Cornell University <br> (Nutritional Sciences)</p>
          </div>
        </div>
      </div>

      <div class="flex flex-col items-center justify-center col-span-1">
        <div class="relative p-5">
          <div class="absolute z-10 w-full h-full -mt-5 -ml-5 rounded-full rounded-tr-none bg-green-100"></div>
          <img class="relative z-20 w-full rounded-full"
            src="https://images.unsplash.com/photo-1542909192-2f2241a99c9d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8OTF8fG1hbiUyMGZhY2V8ZW58MHwyfDB8fA%3D%3D&auto=format&fit=crop&w=500&q=80">
        </div>
        <div class="mt-3 space-y-2 text-center">
          <div class="space-y-1 text-lg font-medium leading-6">
            <h3 class="text-indigo-800 font-semibold text-lg">Dr. Nima Alamdari, PhD</h3>
            <p class="text-gray-700 text-sm">Chief Scientific Officer <br> (Physiology)</p>
          </div>
        </div>
      </div>

    </div>
  </div>
</section>

<style>
  @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap');

  body {
    font-family: 'Poppins', sans-serif;
  }
</style>