Make it look like yours

The prompt

Create a workspace branding step with Tailwind CSS in two columns. The left column is the form: a step label and heading, a workspace name field, a logo control showing a square preview tile with the current initial beside an outline "Upload" button and a muted "Remove" link plus a hint about file size, a colour picker row of eight round swatches where the selected one carries a ring, and a subdomain field with a fixed suffix rendered as a muted addon inside the input shell. The right column is a live preview: a small browser chrome with dots and an address bar showing the subdomain, then a mock app header using the chosen colour and initial, and two placeholder content rows. Then add JavaScript that mirrors the name, initial, colour and subdomain into the preview as they change, slugifies the subdomain field, and keeps the selected swatch ringed.

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