Tables

const items = [
  { sku: 'SVC-101', name: 'Discovery workshop', qty: 2, unit: 1850 },
  // ...
];

const money = (n: number) =>
  `$${n.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;

<table tw="w-full border border-slate-300 text-[10.5px]">
  <thead>
    <tr tw="bg-slate-100 font-bold">
      <th tw="border-b border-slate-300 p-2 text-left">SKU</th>
      <th tw="border-b border-slate-300 p-2 text-left">Description</th>
      <th tw="border-b border-slate-300 p-2 text-right">Qty</th>
      <th tw="border-b border-slate-300 p-2 text-right">Amount</th>
    </tr>
  </thead>
  <tbody>
    {items.map((it) => (
      <tr key={it.sku} tw="border-b border-slate-200">
        <td tw="p-2 align-top">{it.sku}</td>
        <td tw="p-2 align-top">{it.name}</td>
        <td tw="p-2 text-right align-top">{String(it.qty)}</td>
        <td tw="p-2 text-right align-top">{money(it.qty * it.unit)}</td>
      </tr>
    ))}
  </tbody>
</table>

<div tw="mt-6 flex justify-end" style={{ breakInside: 'avoid' }}>
  <div tw="flex w-[260px] flex-col text-[11px]">
    <div tw="flex justify-between py-1">
      <span tw="text-slate-500">Subtotal</span>
      <span>{money(subtotal)}</span>
    </div>
    <div tw="flex justify-between py-2 text-[13px] font-bold text-slate-900">
      <span>Total due</span>
      <span>{money(total)}</span>
    </div>
  </div>
</div>