Marketplace take-rate tiers

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.

<section class="mx-auto max-w-4xl px-6 py-16">
  <span class="inline-flex rounded-full border border-neutral-200 px-3 py-1 text-xs font-medium text-neutral-600">No listing fees</span>
  <h2 class="mt-4 text-3xl font-semibold tracking-tight text-neutral-900">We only earn when you sell</h2>
  <p class="mt-3 max-w-xl leading-relaxed text-neutral-500">
    No monthly subscription and nothing to pay for listings that never sell. The commission falls as your volume grows, measured on a rolling 30-day window.
  </p>

  <div class="mt-9 overflow-hidden rounded-2xl border border-neutral-200 bg-white">
    <table class="w-full text-sm">
      <thead>
        <tr class="border-b border-neutral-200 bg-neutral-50 text-left text-[11px] uppercase tracking-widest text-neutral-400">
          <th class="px-6 py-3 font-medium">Monthly sales</th>
          <th class="px-6 py-3 text-center font-medium">Commission</th>
          <th class="px-6 py-3 text-right font-medium">Fee on a $80 order</th>
        </tr>
      </thead>
      <tbody class="divide-y divide-neutral-100">
        <tr>
          <td class="px-6 py-5 font-medium text-neutral-900">Up to $2,000</td>
          <td class="px-6 py-5 text-center"><span class="text-2xl font-semibold text-neutral-900">9%</span></td>
          <td class="px-6 py-5 text-right font-mono text-neutral-600">$7.20</td>
        </tr>
        <tr class="bg-neutral-50">
          <td class="px-6 py-5">
            <span class="flex flex-wrap items-center gap-2 font-medium text-neutral-900">$2,000 – $10,000 <span class="rounded-full bg-neutral-900 px-2 py-0.5 text-[10px] font-medium text-white">Most sellers</span></span>
          </td>
          <td class="px-6 py-5 text-center"><span class="text-2xl font-semibold text-neutral-900">7%</span></td>
          <td class="px-6 py-5 text-right font-mono text-neutral-600">$5.60</td>
        </tr>
        <tr>
          <td class="px-6 py-5 font-medium text-neutral-900">$10,000 – $50,000</td>
          <td class="px-6 py-5 text-center"><span class="text-2xl font-semibold text-neutral-900">5%</span></td>
          <td class="px-6 py-5 text-right font-mono text-neutral-600">$4.00</td>
        </tr>
        <tr>
          <td class="px-6 py-5 font-medium text-neutral-900">Above $50,000</td>
          <td class="px-6 py-5 text-center"><span class="text-2xl font-semibold text-neutral-900">3.5%</span></td>
          <td class="px-6 py-5 text-right font-mono text-neutral-600">$2.80</td>
        </tr>
      </tbody>
    </table>
  </div>

  <div class="mt-6 grid gap-4 sm:grid-cols-3">
    <div class="rounded-xl border border-neutral-200 p-5">
      <span class="grid h-9 w-9 place-items-center rounded-lg bg-neutral-100 text-neutral-700"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3.5 2"/></svg></span>
      <p class="mt-3 text-sm font-medium text-neutral-900">Payouts every Friday</p>
      <p class="mt-1 text-sm leading-relaxed text-neutral-500">Cleared funds land within two working days, with a statement per payout.</p>
    </div>
    <div class="rounded-xl border border-neutral-200 p-5">
      <span class="grid h-9 w-9 place-items-center rounded-lg bg-neutral-100 text-neutral-700"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="M12 3 4.5 6v5.5c0 4.7 3.2 7.7 7.5 9.5 4.3-1.8 7.5-4.8 7.5-9.5V6L12 3Z"/><path d="m9 12 2 2 4-4"/></svg></span>
      <p class="mt-3 text-sm font-medium text-neutral-900">We absorb chargebacks</p>
      <p class="mt-1 text-sm leading-relaxed text-neutral-500">On orders that passed our fraud checks, the dispute cost is ours, not yours.</p>
    </div>
    <div class="rounded-xl border border-neutral-200 p-5">
      <span class="grid h-9 w-9 place-items-center rounded-lg bg-neutral-100 text-neutral-700"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="m12 3 9 9-9 9-9-9 9-9Z"/><path d="m12 7 5 5-5 5-5-5 5-5Z"/></svg></span>
      <p class="mt-3 text-sm font-medium text-neutral-900">The rate includes</p>
      <p class="mt-1 text-sm leading-relaxed text-neutral-500">Hosting, search placement, buyer support and returns handling.</p>
    </div>
  </div>

  <div class="mt-6 grid gap-px overflow-hidden rounded-2xl bg-neutral-800 sm:grid-cols-4">
    <div class="bg-neutral-900 px-5 py-6 text-center text-white">
      <p class="text-[11px] uppercase tracking-widest text-neutral-500">Order</p>
      <p class="mt-2 font-mono text-xl font-semibold">$80.00</p>
    </div>
    <div class="bg-neutral-900 px-5 py-6 text-center text-white">
      <p class="text-[11px] uppercase tracking-widest text-neutral-500">Commission 7%</p>
      <p class="mt-2 font-mono text-xl font-semibold">−$5.60</p>
    </div>
    <div class="bg-neutral-900 px-5 py-6 text-center text-white">
      <p class="text-[11px] uppercase tracking-widest text-neutral-500">Processing</p>
      <p class="mt-2 font-mono text-xl font-semibold">−$1.42</p>
    </div>
    <div class="bg-neutral-900 px-5 py-6 text-center text-white">
      <p class="text-[11px] uppercase tracking-widest text-neutral-500">You receive</p>
      <p class="mt-2 font-mono text-xl font-semibold text-green-400">$72.98</p>
    </div>
  </div>
</section>