Find an hour that works

The prompt

Create a meeting time planner with Tailwind CSS. Use a bordered rounded-2xl card with a header holding a title, a muted line explaining that shaded blocks are working hours, and a small select for the reference city. The body is a grid of four rows, one per city: the left column shows the city name, its UTC offset and the local time of the current selection in monospace; the right column is a track of twenty-four thin cells, coloured neutral-100 outside working hours, neutral-200 for the local working day, and neutral-900 for the currently selected hour, with tiny labels every six cells. Under the rows, a summary strip naming the best overlapping window and how many cities it suits. Then add JavaScript that lets a click or drag on any track pick an hour, recomputes each local time from its offset, marks the selected column across all rows, and updates the summary with how many cities have that hour inside working time.

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