Footer

Compact app footer bar

Slim in-product strip with status and locale

Live preview

The prompt

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.

Paste it into Claude, Cursor, v0 or any AI coding tool. Prefer the finished markup? .

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.