<ul class="flex mt-5 flex-wrap justify-center items-center">
  <li class="mx-6 mt-5">
    <div class="
            py-8
            px-8
            max-w-sm
            mx-auto
            bg-white
            rounded-xl
            shadow-md
            space-y-2
            sm:py-4
            sm:flex
            sm:items-center
            sm:space-y-0 sm:space-x-6
          ">
      <img class="block mx-auto h-24 rounded-full sm:mx-0 sm:flex-shrink-0" src="  https://picsum.photos/300/300?pepple=10" alt="Woman's Face" />
      <div class="text-center space-y-2 sm:text-left">
        <div class="space-y-0.5">
          <p class="text-lg text-black font-semibold">Erin Lindford</p>
          <p class="text-gray-500 font-medium">Product Engineer</p>
        </div>
        <button class="
                px-4
                py-1
                text-sm text-purple-600
                font-semibold
                rounded-full
                border border-purple-200
                hover:text-white
                hover:bg-purple-600
                hover:border-transparent
                focus:outline-none
                focus:ring-2 focus:ring-purple-600 focus:ring-offset-2
              ">
          Message
        </button>
      </div>
    </div>
  </li>
  <li class="mx-6 mt-5">
    <div class="
            py-8
            px-8
            max-w-sm
            mx-auto
            bg-white
            rounded-xl
            shadow-md
            space-y-2
            sm:py-4
            sm:flex
            sm:items-center
            sm:space-y-0 sm:space-x-6
          ">
      <img class="block mx-auto h-24 rounded-full sm:mx-0 sm:flex-shrink-0" src="  https://picsum.photos/300/300?pepple=20" alt="Woman's Face" />
      <div class="text-center space-y-2 sm:text-left">
        <div class="space-y-0.5">
          <p class="text-lg text-black font-semibold">Erin Lindford</p>
          <p class="text-gray-500 font-medium">Product Engineer</p>
        </div>
        <button class="
                px-4
                py-1
                text-sm text-blue-600
                font-semibold
                rounded-full
                border border-purple-200
                hover:text-white
                hover:bg-blue-600
                hover:border-transparent
                focus:outline-none
                focus:ring-2 focus:ring-blue-600 focus:ring-offset-2
              ">
          Message
        </button>
      </div>
    </div>
  </li>
  <li class="mx-6 mt-5">
    <div class="
            py-8
            px-8
            max-w-sm
            mx-auto
            bg-white
            rounded-xl
            shadow-md
            space-y-2
            sm:py-4
            sm:flex
            sm:items-center
            sm:space-y-0 sm:space-x-6
          ">
      <img class="block mx-auto h-24 rounded-full sm:mx-0 sm:flex-shrink-0" src="  https://picsum.photos/300/300?pepple=30" alt="Woman's Face" />
      <div class="text-center space-y-2 sm:text-left">
        <div class="space-y-0.5">
          <p class="text-lg text-black font-semibold">Erin Lindford</p>
          <p class="text-gray-500 font-medium">Product Engineer</p>
        </div>
        <button class="
                px-4
                py-1
                text-sm text-red-600
                font-semibold
                rounded-full
                border border-purple-200
                hover:text-white
                hover:bg-red-600
                hover:border-transparent
                focus:outline-none
                focus:ring-2 focus:ring-red-600 focus:ring-offset-2
              ">
          Message
        </button>
      </div>
    </div>
  </li>
  <li class="mx-6 mt-5">
    <div class="
            py-8
            px-8
            max-w-sm
            mx-auto
            bg-white
            rounded-xl
            shadow-md
            space-y-2
            sm:py-4
            sm:flex
            sm:items-center
            sm:space-y-0 sm:space-x-6
          ">
      <img class="block mx-auto h-24 rounded-full sm:mx-0 sm:flex-shrink-0" src="  https://picsum.photos/300/300?pepple=50" alt="Woman's Face" />
      <div class="text-center space-y-2 sm:text-left">
        <div class="space-y-0.5">
          <p class="text-lg text-black font-semibold">Erin Lindford</p>
          <p class="text-gray-500 font-medium">Product Engineer</p>
        </div>
        <button class="
                px-4
                py-1
                text-sm text-green-600
                font-semibold
                rounded-full
                border border-purple-200
                hover:text-white
                hover:bg-green-600
                hover:border-transparent
                focus:outline-none
                focus:ring-2 focus:ring-green-600 focus:ring-offset-2
              ">
          Message
        </button>
      </div>
    </div>
  </li>
</ul>