team #01

<section>
  <div class="relative px-8 py-24 mx-auto md:px-12 lg:px-24 max-w-7xl">
    <div class="max-w-xl mx-auto text-center lg:text-balance">
      <p class="text-sm font-bold uppercase text-blue-600">Tagline</p>
      <h2
        class="text-2xl md:text-3xl lg:text-4xl mt-4 font-semibold text-base-900 lg:text-balance"
      >
        Introducing our team
      </h2>
      <p class="text-base mt-4 font-medium text-base-500">
        Uniting talent with vision. Get to know the dedicated professionals who
        blend their skills and passion to lead us to new heights.
      </p>
    </div>
    <ul
      role="list"
      class="mt-12 text-center grid sm:grid-cols-2 md:grid-cols-3 lg:divide-x divide-base-200 lg:grid-cols-4 lg:border-x lg:mt-24"
    >
      <li class="p-8">
        <div class="flex flex-col gap-4">
          <img
            class="object-cover mx-auto rounded-full size-16 lg:size-20"
            src="/avatars/1.jpg"
            alt="#_"
          />
          <div>
            <h3 class="text-lg md:text-xl font-medium text-base-900">
              Fernando Monte
            </h3>
            <p class="text-base font-medium text-base-500">
              Creator of Oxbow UI.com
            </p>
          </div>
        </div>
      </li>
      <li class="p-8">
        <div class="flex flex-col gap-4">
          <img
            class="object-cover mx-auto rounded-full size-16 lg:size-20"
            src="/avatars/2.jpg"
            alt="#_"
          />
          <div>
            <h3 class="text-lg md:text-xl font-medium text-base-900">
              Juan Echanove
            </h3>
            <p class="text-base font-medium text-base-500">
              Founder of Pay Oneeer
            </p>
          </div>
        </div>
      </li>
      <li class="p-8">
        <div class="flex flex-col gap-4">
          <img
            class="object-cover mx-auto rounded-full size-16 lg:size-20"
            src="/avatars/3.jpg"
            alt="#_"
          />
          <div>
            <h3 class="text-lg md:text-xl font-medium text-base-900">
              Hanako Yamada
            </h3>
            <p class="text-base font-medium text-base-500">Founder of Fesla</p>
          </div>
        </div>
      </li>
      <li class="p-8">
        <div class="flex flex-col gap-4">
          <img
            class="object-cover mx-auto rounded-full size-16 lg:size-20"
            src="/avatars/4.jpg"
            alt="#_"
          />
          <div>
            <h3 class="text-lg md:text-xl font-medium text-base-900">
              Heidi Herrera
            </h3>
            <p class="text-base font-medium text-base-500">COO at Pff Inc</p>
          </div>
        </div>
      </li>
    </ul>
    <div class="flex items-center justify-center mt-8 text-center gap-2">
      <p class="text-base font-medium text-base-500">We are hiring</p>
      <a
        class="text-base flex items-center font-medium text-blue-500 gap-2 hover:text-base-900"
        href="#_"
      >
        See all our open roles
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
          class="icon icon-tabler-chevron-right size-4"
        >
          <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
          <path d="M9 6l6 6l-6 6"></path>
        </svg>
      </a>
    </div>
  </div>
</section>