Footer with careers highlight

Design a footer with Tailwind CSS that gives hiring a visible slot. The layout is a grid where the first column spans two: a wordmark, a two-line description, and then a bordered rounded-xl careers card with a small pill reading how many roles are open, a line of copy, two compact role rows with the title and location and a chevron, and a text link to all openings. The remaining three columns are ordinary link lists headed Product, Resources and Company. Below a hairline, a bottom bar with the copyright on the left and, on the right, a small status link with a green dot plus two legal links. Give the careers card a faint neutral-50 background so it reads as a distinct block without shouting, and stack everything cleanly on small screens.

<footer class="border-t border-neutral-200 bg-white">
  <div class="mx-auto max-w-6xl px-6 py-14">
    <div class="grid gap-10 lg:grid-cols-5">
      <div class="lg:col-span-2">
        <p class="text-lg font-semibold tracking-tight text-neutral-900">Meridian</p>
        <p class="mt-2 max-w-xs text-sm leading-relaxed text-neutral-500">
          Tools for teams who measure things carefully and argue about the definitions afterwards.
        </p>

        <div class="mt-6 max-w-sm rounded-xl border border-neutral-200 bg-neutral-50 p-5">
          <div class="flex items-center justify-between">
            <p class="text-sm font-semibold text-neutral-900">We are hiring</p>
            <span class="rounded-full bg-neutral-900 px-2.5 py-0.5 text-[11px] font-medium text-white">5 open</span>
          </div>
          <p class="mt-1.5 text-sm text-neutral-500">Remote across CET ±3, four-day week, same pay wherever you live.</p>

          <div class="mt-4 space-y-1">
            <a href="#" class="group flex items-center gap-3 rounded-lg bg-white px-3 py-2.5 ring-1 ring-neutral-200 transition hover:ring-neutral-300">
              <span class="min-w-0 flex-1">
                <span class="block truncate text-sm font-medium text-neutral-900">Senior Backend Engineer</span>
                <span class="block text-xs text-neutral-500">Storage · Remote</span>
              </span>
              <span class="text-neutral-300 transition group-hover:translate-x-0.5">›</span>
            </a>
            <a href="#" class="group flex items-center gap-3 rounded-lg bg-white px-3 py-2.5 ring-1 ring-neutral-200 transition hover:ring-neutral-300">
              <span class="min-w-0 flex-1">
                <span class="block truncate text-sm font-medium text-neutral-900">Product Designer</span>
                <span class="block text-xs text-neutral-500">Design · Remote</span>
              </span>
              <span class="text-neutral-300 transition group-hover:translate-x-0.5">›</span>
            </a>
          </div>

          <a href="#" class="mt-3 inline-block text-xs font-medium text-neutral-900 underline underline-offset-4">All five openings <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="M14 4h6v6M20 4l-9 9"/><path d="M18 13v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h6"/></svg></a>
        </div>
      </div>

      <div>
        <p class="text-xs font-semibold uppercase tracking-widest text-neutral-400">Product</p>
        <ul class="mt-4 space-y-2.5 text-sm text-neutral-500">
          <li><a href="#" class="transition hover:text-neutral-900">Overview</a></li>
          <li><a href="#" class="transition hover:text-neutral-900">Integrations</a></li>
          <li><a href="#" class="transition hover:text-neutral-900">Pricing</a></li>
          <li><a href="#" class="transition hover:text-neutral-900">Security</a></li>
        </ul>
      </div>

      <div>
        <p class="text-xs font-semibold uppercase tracking-widest text-neutral-400">Resources</p>
        <ul class="mt-4 space-y-2.5 text-sm text-neutral-500">
          <li><a href="#" class="transition hover:text-neutral-900">Documentation</a></li>
          <li><a href="#" class="transition hover:text-neutral-900">Guides</a></li>
          <li><a href="#" class="transition hover:text-neutral-900">Changelog</a></li>
          <li><a href="#" class="transition hover:text-neutral-900">Community</a></li>
        </ul>
      </div>

      <div>
        <p class="text-xs font-semibold uppercase tracking-widest text-neutral-400">Company</p>
        <ul class="mt-4 space-y-2.5 text-sm text-neutral-500">
          <li><a href="#" class="transition hover:text-neutral-900">About</a></li>
          <li><a href="#" class="transition hover:text-neutral-900">Journal</a></li>
          <li><a href="#" class="transition hover:text-neutral-900">Customers</a></li>
          <li><a href="#" class="transition hover:text-neutral-900">Contact</a></li>
        </ul>
      </div>
    </div>

    <div class="mt-12 flex flex-col gap-3 border-t border-neutral-200 pt-6 text-xs text-neutral-400 sm:flex-row sm:items-center sm:justify-between">
      <p>© 2026 Meridian Systems BV</p>
      <div class="flex flex-wrap items-center gap-5">
        <a href="#" class="flex items-center gap-1.5 transition hover:text-neutral-700"><span class="h-1.5 w-1.5 rounded-full bg-green-500"></span> All systems operational</a>
        <a href="#" class="transition hover:text-neutral-700">Terms</a>
        <a href="#" class="transition hover:text-neutral-700">Privacy</a>
      </div>
    </div>
  </div>
</footer>