Team voices for careers

Build an employee testimonial section with Tailwind CSS for a careers page. Open with a small "Life here" label, a heading and a paragraph noting the quotes are unedited and the people are reachable. Then a three-column grid of employee cards: each is a bordered rounded-xl card with a square avatar block using a coloured background and initials, a name, a role and tenure line, a quote of two sentences, and a footer row with two tiny tag pills describing what they work on. Give one card a neutral-900 background with inverted text. Below, a bordered strip split into three parts showing average tenure, the share of internal promotions and the number of countries the team spans, each with a figure and a muted label, and finish with a line offering to connect candidates with anyone on the page before they apply.

<section class="mx-auto max-w-6xl px-6 py-16">
  <div class="max-w-2xl">
    <p class="text-xs font-medium uppercase tracking-widest text-neutral-400">Life here</p>
    <h2 class="mt-3 text-3xl font-semibold tracking-tight text-neutral-900">Unedited, and they will take your call</h2>
    <p class="mt-3 leading-relaxed text-neutral-500">
      We asked six people what they would tell a friend considering the job. Nothing below was rewritten by marketing, which you can probably tell.
    </p>
  </div>

  <div class="mt-10 grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
    <article class="rounded-xl border border-neutral-200 bg-white p-6">
      <span class="grid h-12 w-12 place-items-center rounded-xl bg-neutral-900 text-sm font-medium text-white">MO</span>
      <p class="mt-4 text-sm font-medium text-neutral-900">Mira Osei</p>
      <p class="text-xs text-neutral-500">Staff Engineer · 4 years</p>
      <blockquote class="mt-3 text-sm leading-relaxed text-neutral-600">"I have shipped less code here than anywhere else and had more effect. Most of the work is deciding what not to build."</blockquote>
      <div class="mt-4 flex flex-wrap gap-1.5 border-t border-neutral-100 pt-4">
        <span class="rounded bg-neutral-100 px-2 py-0.5 text-[10px] text-neutral-600">Storage</span>
        <span class="rounded bg-neutral-100 px-2 py-0.5 text-[10px] text-neutral-600">On-call</span>
      </div>
    </article>

    <article class="rounded-xl bg-neutral-900 p-6 text-white">
      <span class="grid h-12 w-12 place-items-center rounded-xl bg-white/10 text-sm font-medium">JP</span>
      <p class="mt-4 text-sm font-medium">Jules Park</p>
      <p class="text-xs text-neutral-400">Product Designer · 2 years</p>
      <blockquote class="mt-3 text-sm leading-relaxed text-neutral-300">"Nobody has ever asked me to make something look more impressive than it is. That was not true at my last two jobs."</blockquote>
      <div class="mt-4 flex flex-wrap gap-1.5 border-t border-neutral-800 pt-4">
        <span class="rounded bg-white/10 px-2 py-0.5 text-[10px] text-neutral-300">Design system</span>
        <span class="rounded bg-white/10 px-2 py-0.5 text-[10px] text-neutral-300">Research</span>
      </div>
    </article>

    <article class="rounded-xl border border-neutral-200 bg-white p-6">
      <span class="grid h-12 w-12 place-items-center rounded-xl bg-amber-500 text-sm font-medium text-white">DK</span>
      <p class="mt-4 text-sm font-medium text-neutral-900">Dana Køhler</p>
      <p class="text-xs text-neutral-500">Support Engineer · 3 years</p>
      <blockquote class="mt-3 text-sm leading-relaxed text-neutral-600">"Support sits in the same standup as the engineers. When I say a thing is broken, it gets fixed that week, not that quarter."</blockquote>
      <div class="mt-4 flex flex-wrap gap-1.5 border-t border-neutral-100 pt-4">
        <span class="rounded bg-neutral-100 px-2 py-0.5 text-[10px] text-neutral-600">Customer engineering</span>
      </div>
    </article>

    <article class="rounded-xl border border-neutral-200 bg-white p-6">
      <span class="grid h-12 w-12 place-items-center rounded-xl bg-green-600 text-sm font-medium text-white">RG</span>
      <p class="mt-4 text-sm font-medium text-neutral-900">Ravi Gopal</p>
      <p class="text-xs text-neutral-500">Engineering Manager · 5 years</p>
      <blockquote class="mt-3 text-sm leading-relaxed text-neutral-600">"The four-day week is real. It survived a funding round and an outage, which is when you find out whether a policy is a policy."</blockquote>
      <div class="mt-4 flex flex-wrap gap-1.5 border-t border-neutral-100 pt-4">
        <span class="rounded bg-neutral-100 px-2 py-0.5 text-[10px] text-neutral-600">Platform</span>
        <span class="rounded bg-neutral-100 px-2 py-0.5 text-[10px] text-neutral-600">Hiring</span>
      </div>
    </article>

    <article class="rounded-xl border border-neutral-200 bg-white p-6">
      <span class="grid h-12 w-12 place-items-center rounded-xl bg-blue-600 text-sm font-medium text-white">LR</span>
      <p class="mt-4 text-sm font-medium text-neutral-900">Lena Rask</p>
      <p class="text-xs text-neutral-500">Technical Writer · 1 year</p>
      <blockquote class="mt-3 text-sm leading-relaxed text-neutral-600">"Documentation is treated as part of the feature, not an afterthought. I review pull requests and I can block them."</blockquote>
      <div class="mt-4 flex flex-wrap gap-1.5 border-t border-neutral-100 pt-4">
        <span class="rounded bg-neutral-100 px-2 py-0.5 text-[10px] text-neutral-600">Docs</span>
      </div>
    </article>

    <article class="rounded-xl border border-neutral-200 bg-white p-6">
      <span class="grid h-12 w-12 place-items-center rounded-xl bg-neutral-500 text-sm font-medium text-white">TS</span>
      <p class="mt-4 text-sm font-medium text-neutral-900">Tom Silva</p>
      <p class="text-xs text-neutral-500">Principal Engineer · 6 years</p>
      <blockquote class="mt-3 text-sm leading-relaxed text-neutral-600">"I joined as the fourth employee and I still recognise the company. Growing carefully is a choice somebody keeps making."</blockquote>
      <div class="mt-4 flex flex-wrap gap-1.5 border-t border-neutral-100 pt-4">
        <span class="rounded bg-neutral-100 px-2 py-0.5 text-[10px] text-neutral-600">Architecture</span>
        <span class="rounded bg-neutral-100 px-2 py-0.5 text-[10px] text-neutral-600">Mentoring</span>
      </div>
    </article>
  </div>

  <div class="mt-8 grid grid-cols-1 divide-y divide-neutral-200 rounded-2xl border border-neutral-200 bg-neutral-50 text-center sm:grid-cols-3 sm:divide-x sm:divide-y-0">
    <div class="px-6 py-6"><p class="text-2xl font-semibold text-neutral-900">3.8 yrs</p><p class="mt-1 text-xs uppercase tracking-widest text-neutral-400">Average tenure</p></div>
    <div class="px-6 py-6"><p class="text-2xl font-semibold text-neutral-900">64%</p><p class="mt-1 text-xs uppercase tracking-widest text-neutral-400">Promoted internally</p></div>
    <div class="px-6 py-6"><p class="text-2xl font-semibold text-neutral-900">9</p><p class="mt-1 text-xs uppercase tracking-widest text-neutral-400">Countries</p></div>
  </div>

  <p class="mt-5 text-center text-sm text-neutral-500">
    Want to speak to any of them before applying? <a href="#" class="font-medium text-neutral-900 underline underline-offset-4">Ask us</a> and we will put you in touch, with no recruiter on the call.
  </p>
</section>