Build an offline-sync explainer with Tailwind CSS: a horizontal state strip walking through Online, Connection lost, Queued changes, and Synced, each state with an icon, a one-line explanation and a small device mockup showing what the user sees. Highlight the current state as the visitor scrolls, and add a note about conflict resolution when two devices edit the same item.
提示词保持英文原文——直接粘贴进 Claude、Cursor、v0 或任何 AI 编程工具即可使用。