Token counter

The prompt

Build a token counter with Tailwind CSS for people writing prompts. Use a max-w-2xl card with a heading, a model select of four options with their context sizes, and a large monospaced textarea. Under it, a stats row of four cells separated by vertical rules — characters, words, estimated tokens and estimated cost — each with a figure and a tiny label. Below that, a context usage bar with a fill that turns amber past seventy percent and red past ninety, a label reading tokens used against the window, and a muted line giving the tokens remaining. Finish with three small notes about the estimate being approximate, whitespace counting, and the response sharing the same window. Then add JavaScript that recomputes everything on input with a debounce, estimates tokens at roughly four characters each, prices per million tokens from the selected model, and updates the bar colour by threshold.

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