Tailwind Team Components in Gradia library

<section class="relative pt-24 pb-36 overflow-hidden">
  <div class="container mx-auto px-4">
    <h2 class="mb-5 max-w-2xl mx-auto font-heading font-bold text-center text-6xl sm:text-7xl text-gray-900" >Our happy team</h2>
    <p class="mb-24 text-base max-w-md mx-auto text-center text-gray-600" >Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit.</p>
    <div class="flex flex-wrap -m-7 mb-12">
      <div class="w-full md:w-1/2 p-7">
        <div class="flex flex-wrap -m-3.5">
          <div class="w-auto p-3.5"><img src="gradia-assets/images/teams/avatar1.png" alt=""></div>
          <div class="flex-1 p-3.5">
            <p class="mb-6 text-lg text-gray-700" >Lorem ipsum dolor sit amet, consec tetur adipis cing elit. Eleifend id vulpu tate amet nunc. Elit sagittis sollici tudin cursus aliquam quis dui. Ut curabitur morbi nunc sit leo tellus neque dolor. Amet sem egestas.</p>
            <h3 class="font-heading font-bold text-lg text-gray-900" >Darrell Steward, CEO</h3>
          </div>
        </div>
      </div>
      <div class="w-full md:w-1/2 p-7">
        <div class="flex flex-wrap -m-3.5">
          <div class="w-auto p-3.5"><img src="gradia-assets/images/teams/avatar2.png" alt=""></div>
          <div class="flex-1 p-3.5">
            <p class="mb-6 text-lg text-gray-700" >Lorem ipsum dolor sit amet, consec tetur adipis cing elit. Eleifend id vulpu tate amet nunc. Elit sagittis sollici tudin cursus aliquam quis dui. Ut curabitur morbi nunc sit leo tellus neque dolor. Amet sem egestas.</p>
            <h3 class="font-heading font-bold text-lg text-gray-900" >Cody Fisher, CTO</h3>
          </div>
        </div>
      </div>
    </div>
    <div class="flex flex-wrap -m-7">
      <div class="w-full md:w-1/2 p-7">
        <div class="flex flex-wrap -m-3.5">
          <div class="flex-1 p-3.5 order-1">
            <p class="mb-6 text-lg text-gray-700" >Lorem ipsum dolor sit amet, consec tetur adipis cing elit. Eleifend id vulpu tate amet nunc. Elit sagittis sollici tudin cursus aliquam quis dui. Ut curabitur morbi nunc sit leo tellus neque dolor. Amet sem egestas.</p>
            <h3 class="font-heading font-bold text-lg text-gray-900" >Guy Hawkins, CMO</h3>
          </div>
          <div class="w-auto p-3.5 md:order-1"><img src="gradia-assets/images/teams/avatar3.png" alt=""></div>
        </div>
      </div>
      <div class="w-full md:w-1/2 p-7">
        <div class="flex flex-wrap -m-3.5">
          <div class="flex-1 p-3.5 order-1">
            <p class="mb-6 text-lg text-gray-700" >Lorem ipsum dolor sit amet, consec tetur adipis cing elit. Eleifend id vulpu tate amet nunc. Elit sagittis sollici tudin cursus aliquam quis dui. Ut curabitur morbi nunc sit leo tellus neque dolor. Amet sem egestas.</p>
            <h3 class="font-heading font-bold text-lg text-gray-900" >Annette White, COO</h3>
          </div>
          <div class="w-auto p-3.5 md:order-1"><img src="gradia-assets/images/teams/avatar4.png" alt=""></div>
        </div>
      </div>
    </div>
  </div>
</section>