Create a feature flag rollout control with Tailwind CSS. Use a max-w-xl card headed by the flag name, its monospace key, and a switch on the right that arms or kills the flag entirely. Under it, a three-way segmented control for development, staging and production. Then the dial: an oversized percentage figure with a range slider beneath it, and below that a grid of a hundred small rounded squares, twenty to a row, each standing for one percent of traffic, filled squares showing who currently gets the flag. Add a line reading the estimated audience against the environment total, an amber note that only appears past half of production traffic, and a short list of override rules with their own pills. Then add JavaScript that redraws the grid and the audience count as the slider moves, swaps the environment totals, shows the warning by threshold, and greys the whole dial out with the flag reading off when the kill switch is thrown.
Paste it into Claude, Cursor, v0 or any AI coding tool. Prefer the
finished markup? .
Create a feature flag rollout control with Tailwind CSS. Use a max-w-xl card headed by the flag name, its monospace key, and a switch on the right that arms or kills the flag entirely. Under it, a three-way segmented control for development, staging and production. Then the dial: an oversized percentage figure with a range slider beneath it, and below that a grid of a hundred small rounded squares, twenty to a row, each standing for one percent of traffic, filled squares showing who currently gets the flag. Add a line reading the estimated audience against the environment total, an amber note that only appears past half of production traffic, and a short list of override rules with their own pills. Then add JavaScript that redraws the grid and the audience count as the slider moves, swaps the environment totals, shows the warning by threshold, and greys the whole dial out with the flag reading off when the kill switch is thrown.
