Pay As You Go Pricing Block for React

Edit the RESOURCES array at the top of the file. Each resource has its name, the unit a rate buys ("per 1M requests"), its monthly free allowance as an amount and a unit, and three steps: the starting rate and the two volume steps, each a range label and a rate in dollars per unit. A rate is written with at least two decimals and as many more as it needs, so $0.20 and $0.0000166 both read right. COLUMNS holds the four column names; to show more steps, add one to each resource and one column.

Give each resource a metered, graduated price in your billing system, with the free allowance as a first tier at zero and one tier per step. Report usage from your platform as it happens, and let the billing system apply the tiers at the end of the period. The call to action is a real link: point its href at your sign-up route, since nothing is charged until usage passes a free tier.

Each resource is a list item headed by its name as an h3, followed by a description list of its four values. Every value is a term and its description ("Starting rate", "$0.20, 1M to 100M"), so it reads the same on a phone and on a desktop: from md the terms are visually hidden and the column labels above the list, which are decoration, take their place. The header's button is a plain link.

Below the md breakpoint each row is a heading over a two-by-two grid: the free allowance and the starting rate, then the two volume steps, each with its own label above it. There is no minimum width and no sideways scrolling. The call to action stays in the header, full width under the sentence, so it is on the first screen.

The rows mirror: the plan name moves to the right and the steps run right to left, in the order the sentence reads. Rates are always written left to right (dir="ltr"), so $0.0000166 keeps its sign, point and digits in order, and ranges and units are isolated with bdi so their numbers and letters don't reorder.

Use rate rows when you bill on three or more resources and the rates and their steps are what visitors compare: the starting rate is the number to find, so it is the biggest. Use a usage slider with an estimate when visitors care more about a monthly total than about unit rates, and plan cards when each resource needs a longer explanation.