Build an offices section with Tailwind CSS. A heading, a line inviting people to drop in, then a four-column grid of city cards. Each card carries a data-office attribute and shows the city name with the country under it, a two-line street address, a phone number and an email link, and a footer strip separated by a border holding a live local time in monospaced type on the left and an open/closed pill on the right. Keep the cards light — thin border, rounded-2xl, generous padding — and drop to two columns on sm and one on mobile. Then add JavaScript that stores each office's IANA time zone and opening hours, formats the current time in that zone with Intl.DateTimeFormat, decides whether the desk is open from the zone's own weekday and hour rather than the visitor's, paints the pill green for open and grey for closed with an "Opens 09:00" style hint when shut, and refreshes every thirty seconds so the clocks stay honest.
Paste it into Claude, Cursor, v0 or any AI coding tool. Prefer the
finished markup? .
Build an offices section with Tailwind CSS. A heading, a line inviting people to drop in, then a four-column grid of city cards. Each card carries a data-office attribute and shows the city name with the country under it, a two-line street address, a phone number and an email link, and a footer strip separated by a border holding a live local time in monospaced type on the left and an open/closed pill on the right. Keep the cards light — thin border, rounded-2xl, generous padding — and drop to two columns on sm and one on mobile. Then add JavaScript that stores each office's IANA time zone and opening hours, formats the current time in that zone with Intl.DateTimeFormat, decides whether the desk is open from the zone's own weekday and hour rather than the visitor's, paints the pill green for open and grey for closed with an "Opens 09:00" style hint when shut, and refreshes every thirty seconds so the clocks stay honest.
