team #1

Preview Code

<div class="max-w-7xl mx-auto px-8 lg:px-12 py-24">
  <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-zinc-900 lg:text-balance"
    >
      Introducing our team
    </h2>
    <p class="text-base mt-4 font-medium text-zinc-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-zinc-200 lg:grid-cols-4 lg:border-x border-zinc-200 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-zinc-900">
            Fernando Monte
          </h3>
          <p class="text-base font-medium text-zinc-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-zinc-900">
            Juan Echanove
          </h3>
          <p class="text-base font-medium text-zinc-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-zinc-900">
            Hanako Yamada
          </h3>
          <p class="text-base font-medium text-zinc-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-zinc-900">
            Heidi Herrera
          </h3>
          <p class="text-base font-medium text-zinc-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-zinc-500">We are hiring</p>
    <a
      class="text-base flex items-center font-medium text-blue-500 gap-2 hover:text-zinc-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>