Compact app footer bar

Create a slim in-product footer bar with Tailwind CSS — the kind that sits under a logged-in dashboard rather than a marketing page. One row, small type, a top border, with three zones: on the left a wordmark, a monospaced build version pill, and a status link showing a green dot with "All systems normal"; in the middle a set of quiet utility links (Docs, Keyboard shortcuts, Report a bug, Changelog) that collapse away below md; on the right a keyboard hint showing ⌘ and K in individual key caps, a region and language select styled as a bare control, and the copyright. Keep the whole bar to a single line on desktop, let it wrap into a tidy stack on mobile, and use hover colours rather than underlines so it stays visually quiet under an app.

<footer class="border-t border-neutral-200 bg-white px-6 py-3">
  <div class="mx-auto flex max-w-7xl flex-wrap items-center gap-x-6 gap-y-3 text-xs text-neutral-500">
    <div class="flex items-center gap-3">
      <span class="text-sm font-semibold text-neutral-900">Acme</span>
      <span class="rounded-md border border-neutral-200 px-1.5 py-0.5 font-mono text-[11px] text-neutral-500">v4.2.1</span>
      <a href="#" class="flex items-center gap-1.5 transition hover:text-neutral-900">
        <span class="h-1.5 w-1.5 rounded-full bg-green-500"></span> All systems normal
      </a>
    </div>

    <nav class="hidden items-center gap-5 md:flex">
      <a href="#" class="transition hover:text-neutral-900">Docs</a>
      <a href="#" class="transition hover:text-neutral-900">Keyboard shortcuts</a>
      <a href="#" class="transition hover:text-neutral-900">Report a bug</a>
      <a href="#" class="transition hover:text-neutral-900">Changelog</a>
    </nav>

    <div class="ml-auto flex flex-wrap items-center gap-x-5 gap-y-2">
      <span class="hidden items-center gap-1 text-neutral-400 lg:flex">
        Press
        <kbd class="rounded border border-neutral-200 bg-neutral-50 px-1.5 py-0.5 font-mono text-[11px] text-neutral-600">⌘</kbd>
        <kbd class="rounded border border-neutral-200 bg-neutral-50 px-1.5 py-0.5 font-mono text-[11px] text-neutral-600">K</kbd>
        to search
      </span>

      <label class="flex items-center gap-1.5">
        <span class="text-neutral-400"><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"><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3c2.3 2.47 3.45 5.47 3.45 9S14.3 18.53 12 21c-2.3-2.47-3.45-5.47-3.45-9S9.7 5.47 12 3Z"/></svg></span>
        <select class="bg-transparent text-xs text-neutral-600 outline-none transition hover:text-neutral-900">
          <option>English (UK)</option>
          <option>English (US)</option>
          <option>Deutsch</option>
          <option>日本語</option>
        </select>
      </label>

      <span class="text-neutral-400">© 2026 Acme Labs</span>
    </div>
  </div>
</footer>