<div class="max-w-2xl mx-auto px-4">
  <div class="items-start justify-between sm:flex">
      <div>
          <h4 class="text-gray-800 text-xl font-semibold">Team members</h4>
          <p class="mt-2 text-gray-600 text-base sm:text-sm">Give your team members access to manage the system.</p>
      </div>
      <a href="javascript:void(0)" class="inline-flex items-center justify-center gap-1 py-2 px-3 mt-2 font-medium text-sm text-center text-white bg-indigo-600 hover:bg-indigo-500 active:bg-indigo-700 rounded-lg sm:mt-0">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
              <path stroke-linecap="round" stroke-linejoin="round" d="M12 6v12m6-6H6" />
          </svg>
          New member
      </a>
  </div>
  <ul class="mt-12 divide-y">
      <!-- Repeat this block for each member -->
      <li class="py-5">
          <div class="flex gap-3">
              <img src="https://api.uifaces.co/our-content/donated/xZ4wg2Xj.jpg" class="flex-none w-12 h-12 rounded-full" alt="John lorin's avatar">
              <div>
                  <span class="block text-sm text-gray-700 font-semibold">John lorin</span>
                  <span class="block text-sm text-gray-600">john@example.com</span>
              </div>
          </div>
      </li>
      <!-- Repeat the above block for each member in your 'members' array -->
  </ul>
</div>