This week

The prompt

Build a reorderable priority list with Tailwind CSS. Use a max-w-lg card headed by a title, a count of the items and a reset button. Each row is a card with a grip handle on the left, a large monospace rank number, the item title with a one-line note under it, an owner initial in a round badge on the right, and a small "Up next" pill on whichever row sits at the top. Rows lift slightly on hover and the one being dragged goes semi-transparent with a dark ring. Add a hint line explaining that the handle can be dragged or focused and moved with the arrow keys, and a visually hidden live region. Then add JavaScript using pointer events: capture the pointer on the handle, reorder by comparing the pointer against the midpoints of the other rows, renumber the ranks and move the pill as the order changes, support arrow-key moves from a focused handle, keep focus on the handle after a keyboard move, and announce the new position in the live region. Reset restores the original order.

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