Approvals

6 pending
">

The prompt

Design an approvals workspace with Tailwind CSS in two panes. The left pane is a bordered list with a header showing a title and a pending count, three filter chips for pending, approved and rejected, and six request rows: each with a requester avatar, a title line describing what is being asked, a muted line with the amount and the age of the request, and a small type pill. The selected row has a neutral-50 background and a neutral-900 left border. The right pane is a detail panel showing the request title, a status pill, a two-column definition list of six fields, a justification paragraph in a bordered quote block, an attachment row with a file glyph and size, and a sticky footer with a red-outlined Reject button, a bordered "Ask a question" and a dark Approve. Then add JavaScript that swaps the detail panel content when a row is selected and decrements the pending count when a request is approved or rejected.

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