Expense approval interface
A green approvals queue: expense cards are approved one by one with a stamp and the pending total counts down.
Use it with Claude or any AI tool. Copy the prompt and paste it in. The link inside gives the AI the whole page as Markdown.
Live preview of the result built from this prompt. Click to pause.
Overview
A manager approval list with four expense cards. Two of them get an APPROVED stamp and slide away, the cards below move up and the Pending total counts down from $4,820 to $3,940. Topic inspired by OpenDesign’s public dashboard prompt list; this prompt and design are written from scratch.
Build it step by step
Sign in to tick steps off-
1
Paste the prompt
One prompt builds the queue.
Make a single-file HTML expense approval screen, 1280x720, pale green background #f2f7f1, ink #12301f, accent green #16a34a. System fonts, no libraries. Header: H1 "Expense approvals", muted "4 waiting on you" and on the right a Pending total (label above, 34px number) that counts from $4,820 down to $3,940 with a CSS @property integer animation. Four absolutely positioned white cards (104px tall, 18px radius): a striped receipt thumbnail, title and meta line (person, date, category), the amount on the right (24px bold) and two buttons Reject (grey) and Approve (green): Client dinner $486.20, Flight to Berlin $1,240.00, Conference tickets x3 $894.00, Design software annual $2,199.80. Motion (8 second loop): cards rise in. The first card gets a rotated green APPROVED stamp that scales from 2x to 1x, then the card slides right and fades; the cards below move up one slot. Repeat for the third card. The pending total counts down while this happens. Fade out at the end and restart. Respect prefers-reduced-motion. Return only the complete HTML.
-
2
Check the approvals
Stamped cards should slide away and the rest should move up.
-
3
Check the total
Pending should count down to $3,940.
Done when You can see it working in the browser.
-
4
Make it real
Replace sample data and add real approve and reject actions.
Files and links
What people built
Show yoursNobody has shared a build yet. Yours could be the first.
Show what you built
Built this plan? Sign in to share your demo video, live app and screenshots.