Design a commission pricing section with Tailwind CSS for a marketplace. Open with a heading, a paragraph explaining there is no monthly fee and the platform only earns when the seller does, and a small pill reading "No listing fees". Below, a bordered rounded-2xl table with four rows: monthly sales volume bands on the left, the take rate as a large percentage in the middle, and the effective fee on a sample order on the right; highlight the second row as the typical band with a neutral-50 background and a small "Most sellers" pill. Under the table, three explainer cards in a grid covering payout timing, chargeback handling and what the rate includes, each with a glyph tile and two lines of copy. Finish with a worked example strip on neutral-900: a sale amount, the commission, the payment processing cost and the seller payout, laid out as four cells separated by vertical rules.
Paste it into Claude, Cursor, v0 or any AI coding tool. Prefer the
finished markup? .
Design a commission pricing section with Tailwind CSS for a marketplace. Open with a heading, a paragraph explaining there is no monthly fee and the platform only earns when the seller does, and a small pill reading "No listing fees". Below, a bordered rounded-2xl table with four rows: monthly sales volume bands on the left, the take rate as a large percentage in the middle, and the effective fee on a sample order on the right; highlight the second row as the typical band with a neutral-50 background and a small "Most sellers" pill. Under the table, three explainer cards in a grid covering payout timing, chargeback handling and what the rate includes, each with a glyph tile and two lines of copy. Finish with a worked example strip on neutral-900: a sale amount, the commission, the payment processing cost and the seller payout, laid out as four cells separated by vertical rules.
