Split Layout Feature Comparison Table Hero Block for React

Each entry in ROWS is a feature and its values, one true or false per column id. The columns are COLUMNS: an id, the label in the header, the starting price in US dollars a month and featured, which sets your own column in bolder type and tints it. To compare with a second alternative, add its id to ColumnId, an entry to COLUMNS and a value to every row. Five to seven rows keep the table about as tall as the copy beside it.

It's a native table named "Us compared with others". The column labels are column headers and each feature is a row header, so a screen reader reads a cell with both, such as "Real-time collaboration, Others, Not included".

The check and the dash are hidden from assistive technology, and each cell carries a visually hidden "Included" or "Not included". The prices are read as "$19 per month".

You can: change the "Others" label to the product you compare against, and it's read with every cell of its column. Only claim what a buyer can verify on the other product's own pricing page today, and check the table each time either product ships a plan change. A generic "Others" column keeps the claim about the category rather than one company.

Each price is plain text from its column's price: the dollar sign, the number and "/mo" sit in one dir="ltr" span, so "$19/mo" never reverses in a right-to-left page, and the "/mo" is shown but hidden from screen readers, which read "per month" instead. For another currency, change the sign and the numbers, or format them with Intl.NumberFormat.

Below the lg breakpoint the halves stack, the copy first so both buttons are on the first screen, then the table in its frame. The table is table-fixed with two narrow value columns, so the feature names wrap instead of pushing the table wider, and it fits without scrolling down to 320px. The headline steps down to text-4xl, and the calls to action and the trust points wrap.

Use it when your visitors already know the alternative and arrive comparing, from a "vs" search or a review site, and a handful of differences make the case. For a full feature-by-feature comparison of your own plans, use a pricing comparison table further down the page; to sell your strengths without naming an alternative, use feature badges or cards.