Hiring call-to-action

Design a careers call-to-action with Tailwind CSS. Use a max-w-4xl neutral-900 card with rounded-2xl corners. The upper block is centred: a small pill reading how many roles are open, a heading, a paragraph in light grey about how the team works, and a row of four tiny facts separated by dots — remote policy, size, funding stage and the four-day-week note. Under a neutral-800 divider, a list of five role rows, each a link with the job title in white medium weight on the left, a muted line under it giving the team and location, and on the right a small bordered pill with the employment type and an arrow that shifts on hover. Close with a footer row holding a muted line about speculative applications with an email link, and a bordered "See all openings" button on the right.

<section class="mx-auto max-w-4xl px-6 py-16">
  <div class="rounded-2xl bg-neutral-900 p-9 text-white">
    <div class="text-center">
      <span class="inline-flex rounded-full border border-neutral-700 px-3 py-1 text-xs font-medium text-neutral-300">5 roles open</span>
      <h2 class="mt-5 text-3xl font-semibold tracking-tight">Come and work on the boring parts</h2>
      <p class="mx-auto mt-4 max-w-xl leading-relaxed text-neutral-400">
        Small team, long horizons, and a strong preference for writing things down. We ship on Tuesdays, we do not do take-home tests longer than three hours, and we pay the same rate wherever you live.
      </p>
      <div class="mt-6 flex flex-wrap items-center justify-center gap-x-3 gap-y-1 text-xs text-neutral-500">
        <span>Remote across CET ±3</span><span>·</span><span>28 people</span><span>·</span><span>Series B, profitable</span><span>·</span><span>Four-day week</span>
      </div>
    </div>

    <div class="mt-9 divide-y divide-neutral-800 border-t border-neutral-800">
      <a href="#" class="group flex items-center gap-4 py-4">
        <span class="min-w-0 flex-1">
          <span class="block text-sm font-medium">Senior Backend Engineer</span>
          <span class="block text-xs text-neutral-500">Storage team · Remote or Rotterdam</span>
        </span>
        <span class="shrink-0 rounded-full border border-neutral-700 px-3 py-1 text-[11px] text-neutral-300">Full time</span>
        <span class="shrink-0 text-neutral-600 transition group-hover:translate-x-0.5 group-hover:text-white">→</span>
      </a>
      <a href="#" class="group flex items-center gap-4 py-4">
        <span class="min-w-0 flex-1">
          <span class="block text-sm font-medium">Product Designer</span>
          <span class="block text-xs text-neutral-500">Design · Remote</span>
        </span>
        <span class="shrink-0 rounded-full border border-neutral-700 px-3 py-1 text-[11px] text-neutral-300">Full time</span>
        <span class="shrink-0 text-neutral-600 transition group-hover:translate-x-0.5 group-hover:text-white">→</span>
      </a>
      <a href="#" class="group flex items-center gap-4 py-4">
        <span class="min-w-0 flex-1">
          <span class="block text-sm font-medium">Support Engineer</span>
          <span class="block text-xs text-neutral-500">Customer engineering · Remote, Americas</span>
        </span>
        <span class="shrink-0 rounded-full border border-neutral-700 px-3 py-1 text-[11px] text-neutral-300">Full time</span>
        <span class="shrink-0 text-neutral-600 transition group-hover:translate-x-0.5 group-hover:text-white">→</span>
      </a>
      <a href="#" class="group flex items-center gap-4 py-4">
        <span class="min-w-0 flex-1">
          <span class="block text-sm font-medium">Technical Writer</span>
          <span class="block text-xs text-neutral-500">Documentation · Remote</span>
        </span>
        <span class="shrink-0 rounded-full border border-neutral-700 px-3 py-1 text-[11px] text-neutral-300">Contract</span>
        <span class="shrink-0 text-neutral-600 transition group-hover:translate-x-0.5 group-hover:text-white">→</span>
      </a>
      <a href="#" class="group flex items-center gap-4 py-4">
        <span class="min-w-0 flex-1">
          <span class="block text-sm font-medium">Engineering Intern</span>
          <span class="block text-xs text-neutral-500">Platform · Rotterdam, 6 months</span>
        </span>
        <span class="shrink-0 rounded-full border border-neutral-700 px-3 py-1 text-[11px] text-neutral-300">Paid</span>
        <span class="shrink-0 text-neutral-600 transition group-hover:translate-x-0.5 group-hover:text-white">→</span>
      </a>
    </div>

    <div class="mt-8 flex flex-wrap items-center justify-between gap-4 border-t border-neutral-800 pt-6">
      <p class="max-w-sm text-xs leading-relaxed text-neutral-500">
        Nothing fits but you think we should talk? Write to <a href="#" class="font-medium text-neutral-300 underline underline-offset-4">[email protected]</a>. A person reads every one.
      </p>
      <a href="#" class="rounded-xl border border-neutral-700 px-5 py-2.5 text-sm font-medium text-neutral-200 transition hover:bg-neutral-800">See all openings</a>
    </div>
  </div>
</section>