Open demo

CSS code

HTML 
<div class="is-wide"><span class="lbl">Recent orders table</span>
<section class="lb" aria-labelledby="lb-orders-title">
  <div class="lb-head"><div><h3 class="lb-title" id="lb-orders-title">Recent orders</h3><p class="lb-sub">Fernhill Goods · 5 of 184 this week</p></div><a href="#">View all orders</a></div>
  <div class="lb-scroll" role="region" aria-labelledby="lb-orders-title" tabindex="0">
    <table><caption class="sr-only">Recent orders, newest first</caption>
      <thead><tr><th scope="col">Order</th><th scope="col">Customer</th><th scope="col">Date</th><th scope="col" class="num">Total</th><th scope="col">Status</th></tr></thead>
      <tbody>
        <tr><th scope="row"><a href="#">#10491</a></th><td>Hana Kim</td><td><time datetime="2026-10-16">Oct 16</time></td><td class="num">$248.00</td><td><span class="lb-status is-paid"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>Paid</span></td></tr>
        <tr><th scope="row"><a href="#">#10490</a></th><td>Diego Alvarez</td><td><time datetime="2026-10-16">Oct 16</time></td><td class="num">$1,120.50</td><td><span class="lb-status is-pending"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg>Pending</span></td></tr>
        <tr><th scope="row"><a href="#">#10489</a></th><td>Freya Lund</td><td><time datetime="2026-10-15">Oct 15</time></td><td class="num">$76.40</td><td><span class="lb-status is-shipped"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M1 3h15v13H1zM16 8h4l3 3v5h-7z"/><circle cx="5.5" cy="18.5" r="2.5"/><circle cx="18.5" cy="18.5" r="2.5"/></svg>Shipped</span></td></tr>
        <tr><th scope="row"><a href="#">#10488</a></th><td>Omar Haddad</td><td><time datetime="2026-10-15">Oct 15</time></td><td class="num">$312.99</td><td><span class="lb-status is-refunded"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 7v6h6"/><path d="M21 17a9 9 0 0 0-15-6.7L3 13"/></svg>Refunded</span></td></tr>
        <tr><th scope="row"><a href="#">#10487</a></th><td>Chloe Martin</td><td><time datetime="2026-10-15">Oct 15</time></td><td class="num">$59.00</td><td><span class="lb-status is-failed"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="9"/><path d="M15 9l-6 6M9 9l6 6"/></svg>Failed</span></td></tr>
      </tbody></table>
  </div>
</section></div>

<div><span class="lbl">Sales leaderboard</span>
<section class="lb" aria-labelledby="lb-reps-title">
  <div class="lb-head"><div><h3 class="lb-title" id="lb-reps-title">Top sales reps</h3><p class="lb-sub">Q3 2026 · closed-won revenue</p></div></div>
  <div class="lb-scroll" role="region" aria-labelledby="lb-reps-title" tabindex="0">
    <table><caption class="sr-only">Top sales reps by revenue, Q3 2026</caption>
      <thead><tr><th scope="col">Rank</th><th scope="col">Rep</th><th scope="col" class="num">Deals</th><th scope="col" class="num">Revenue</th><th scope="col" class="num">Quota</th></tr></thead>
      <tbody>
        <tr><td><span class="lb-rank is-top" style="background:#fde68a;color:#713f12">1</span></td>
          <th scope="row"><span class="lb-person"><span class="lb-av" style="background:#1f5fae" aria-hidden="true">SR</span><span><b>Sofia Reyes</b><small>Enterprise</small></span></span></th>
          <td class="num">18</td><td class="num">$412,600</td>
          <td><span class="lb-quota"><span class="lb-bar" aria-hidden="true"><i style="width:100%" class="is-over"></i></span><span class="num">128%</span></span></td></tr>
        <tr><td><span class="lb-rank is-top" style="background:#e2e8f0;color:#1e293b">2</span></td>
          <th scope="row"><span class="lb-person"><span class="lb-av" style="background:#0f766e" aria-hidden="true">ML</span><span><b>Marcus Lee</b><small>Mid-market</small></span></span></th>
          <td class="num">26</td><td class="num">$298,400</td>
          <td><span class="lb-quota"><span class="lb-bar" aria-hidden="true"><i style="width:100%" class="is-over"></i></span><span class="num">112%</span></span></td></tr>
        <tr><td><span class="lb-rank is-top" style="background:#fed7aa;color:#7c2d12">3</span></td>
          <th scope="row"><span class="lb-person"><span class="lb-av" style="background:#9333ea" aria-hidden="true">AB</span><span><b>Aisha Bello</b><small>Enterprise</small></span></span></th>
          <td class="num">11</td><td class="num">$276,900</td>
          <td><span class="lb-quota"><span class="lb-bar" aria-hidden="true"><i style="width:100%" class="is-over"></i></span><span class="num">104%</span></span></td></tr>
        <tr><td><span class="lb-rank">4</span></td>
          <th scope="row"><span class="lb-person"><span class="lb-av" style="background:#c2410c" aria-hidden="true">TR</span><span><b>Tomás Ruiz</b><small>SMB</small></span></span></th>
          <td class="num">41</td><td class="num">$188,250</td>
          <td><span class="lb-quota"><span class="lb-bar" aria-hidden="true"><i style="width:94%"></i></span><span class="num">94%</span></span></td></tr>
        <tr><td><span class="lb-rank">5</span></td>
          <th scope="row"><span class="lb-person"><span class="lb-av" style="background:#475569" aria-hidden="true">EN</span><span><b>Emma Novak</b><small>Mid-market</small></span></span></th>
          <td class="num">19</td><td class="num">$171,300</td>
          <td><span class="lb-quota"><span class="lb-bar" aria-hidden="true"><i style="width:86%"></i></span><span class="num">86%</span></span></td></tr>
      </tbody></table>
  </div>
</section></div>

<div><span class="lbl">Top items list</span>
<section class="lb" aria-labelledby="lb-prod-title">
  <div class="lb-head"><div><h3 class="lb-title" id="lb-prod-title">Best-selling products</h3><p class="lb-sub">October 1–15 · by revenue</p></div><a href="#">Report</a></div>
  <ol class="lb-list">
    <li><span class="lb-pos" aria-hidden="true">1</span><div class="lb-item"><div class="lb-item-top"><b>Linen throw blanket</b><span class="num">$82,176</span></div>
      <div class="lb-item-sub"><span>Home · 1,284 sold</span><span class="num">42% of top 5</span></div><span class="lb-bar" aria-hidden="true"><i style="width:42%"></i></span></div></li>
    <li><span class="lb-pos" aria-hidden="true">2</span><div class="lb-item"><div class="lb-item-top"><b>Ceramic pour-over set</b><span class="num">$45,214</span></div>
      <div class="lb-item-sub"><span>Kitchen · 962 sold</span><span class="num">23% of top 5</span></div><span class="lb-bar" aria-hidden="true"><i style="width:23%"></i></span></div></li>
    <li><span class="lb-pos" aria-hidden="true">3</span><div class="lb-item"><div class="lb-item-top"><b>Merino beanie</b><span class="num">$26,250</span></div>
      <div class="lb-item-sub"><span>Apparel · 875 sold</span><span class="num">13% of top 5</span></div><span class="lb-bar" aria-hidden="true"><i style="width:13%"></i></span></div></li>
    <li><span class="lb-pos" aria-hidden="true">4</span><div class="lb-item"><div class="lb-item-top"><b>Oak serving board</b><span class="num">$24,960</span></div>
      <div class="lb-item-sub"><span>Kitchen · 640 sold</span><span class="num">13% of top 5</span></div><span class="lb-bar" aria-hidden="true"><i style="width:13%"></i></span></div></li>
    <li><span class="lb-pos" aria-hidden="true">5</span><div class="lb-item"><div class="lb-item-top"><b>Beeswax candle trio</b><span class="num">$17,052</span></div>
      <div class="lb-item-sub"><span>Home · 588 sold</span><span class="num">9% of top 5</span></div><span class="lb-bar" aria-hidden="true"><i style="width:9%"></i></span></div></li>
  </ol>
</section></div>
CSS 
/* Mini tables and top-item lists. The tables are real <table>s with a caption and scoped headers; narrow
   screens scroll them inside a focusable region. Status is a word plus an icon; numbers are right-aligned tabular figures. */
.lb{--lb-ink:#0f172a;--lb-muted:#4b5768;--lb-line:#e2e8f0;--lb-accent:#1f5fae;--lb-bar:#2a78d6;--lb-over:#15803d;--lb-track:#e2e8f0;
  background:#fff;color:var(--lb-ink);border:1px solid var(--lb-line);border-radius:16px;box-shadow:0 1px 2px rgba(15,23,42,.04),0 8px 24px rgba(15,23,42,.05);min-width:0;overflow:hidden}
.lb-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 18px}
.lb-title{font-size:1rem;font-weight:700}
.lb-sub{font-size:.78rem;color:var(--lb-muted)}
.lb a{color:var(--lb-accent);font-weight:600;text-decoration:none;border-radius:4px}
.lb a:hover{text-decoration:underline}
.lb-head>a{white-space:nowrap}
.lb a:focus-visible,.lb-scroll:focus-visible{outline:2px solid var(--lb-accent);outline-offset:2px}
.lb-scroll{overflow-x:auto}
.lb table{width:100%;border-collapse:collapse;font-size:.86rem;white-space:nowrap}
.lb th,.lb td{padding:11px 18px;text-align:left;border-top:1px solid var(--lb-line);vertical-align:middle}
.lb thead th{font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--lb-muted);background:#f8fafc}
.lb tbody th{font-weight:600}
.lb tbody tr:hover{background:#f8fafc}
.lb .num{text-align:right;font-variant-numeric:tabular-nums}
.lb-status{display:inline-flex;align-items:center;gap:5px;padding:2px 9px 2px 7px;border-radius:999px;font-size:.76rem;font-weight:700}
.lb-status svg{width:13px;height:13px;flex:none}
.lb-status.is-paid{color:#166534;background:#dcfce7}
.lb-status.is-pending{color:#92400e;background:#fef3c7}
.lb-status.is-shipped{color:#1e40af;background:#dbeafe}
.lb-status.is-refunded{color:#334155;background:#e2e8f0}
.lb-status.is-failed{color:#991b1b;background:#fee2e2}
/* leaderboard */
.lb-rank{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;font-weight:700;font-size:.82rem;color:var(--lb-muted);font-variant-numeric:tabular-nums}
.lb-person{display:flex;align-items:center;gap:10px}
.lb-person b{display:block;font-weight:600}
.lb-person small{display:block;font-size:.76rem;font-weight:400;color:var(--lb-muted)}
.lb-av{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;color:#fff;font-size:.74rem;font-weight:700}
.lb-quota{display:flex;align-items:center;gap:10px;justify-content:flex-end}
.lb-quota .num{min-width:4ch;font-weight:600}
.lb-bar{display:block;position:relative;width:90px;height:6px;border-radius:999px;background:var(--lb-track);overflow:hidden}
.lb-bar i{position:absolute;inset:0 auto 0 0;border-radius:inherit;background:var(--lb-bar)}
.lb-bar i.is-over{background:var(--lb-over)}
/* top items */
.lb-list{list-style:none;padding:0 18px 8px}
.lb-list li{display:flex;gap:14px;padding:12px 0;border-top:1px solid var(--lb-line)}
.lb-pos{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:8px;background:#f1f5f9;font-size:.82rem;font-weight:700;color:var(--lb-muted)}
.lb-item{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.lb-item-top,.lb-item-sub{display:flex;justify-content:space-between;gap:12px}
.lb-item-top{font-size:.9rem}
.lb-item-top b{font-weight:600}
.lb-item-top .num{font-weight:700;font-variant-numeric:tabular-nums}
.lb-item-sub{font-size:.76rem;color:var(--lb-muted)}
.lb-item .lb-bar{width:100%;margin-top:4px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

Bootstrap 5 code

Requires: Bootstrap 5.3.8 CSS

HTML 
<div class="row g-4 gy-5 align-items-start">
<div class="col-12"><span class="lbl">Recent orders table</span>
<section class="card lb" aria-labelledby="lb-orders-title">
  <div class="lb-head d-flex justify-content-between align-items-center gap-3"><div><h3 class="lb-title mb-0" id="lb-orders-title">Recent orders</h3><p class="lb-sub mb-0">Fernhill Goods · 5 of 184 this week</p></div><a href="#">View all orders</a></div>
  <div class="table-responsive" role="region" aria-labelledby="lb-orders-title" tabindex="0">
    <table class="table table-hover align-middle"><caption class="visually-hidden">Recent orders, newest first</caption>
      <thead><tr><th scope="col">Order</th><th scope="col">Customer</th><th scope="col">Date</th><th scope="col" class="text-end">Total</th><th scope="col">Status</th></tr></thead>
      <tbody>
        <tr><th scope="row"><a href="#">#10491</a></th><td>Hana Kim</td><td><time datetime="2026-10-16">Oct 16</time></td><td class="text-end num">$248.00</td><td><span class="badge rounded-pill lb-status is-paid"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>Paid</span></td></tr>
        <tr><th scope="row"><a href="#">#10490</a></th><td>Diego Alvarez</td><td><time datetime="2026-10-16">Oct 16</time></td><td class="text-end num">$1,120.50</td><td><span class="badge rounded-pill lb-status is-pending"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg>Pending</span></td></tr>
        <tr><th scope="row"><a href="#">#10489</a></th><td>Freya Lund</td><td><time datetime="2026-10-15">Oct 15</time></td><td class="text-end num">$76.40</td><td><span class="badge rounded-pill lb-status is-shipped"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M1 3h15v13H1zM16 8h4l3 3v5h-7z"/><circle cx="5.5" cy="18.5" r="2.5"/><circle cx="18.5" cy="18.5" r="2.5"/></svg>Shipped</span></td></tr>
        <tr><th scope="row"><a href="#">#10488</a></th><td>Omar Haddad</td><td><time datetime="2026-10-15">Oct 15</time></td><td class="text-end num">$312.99</td><td><span class="badge rounded-pill lb-status is-refunded"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 7v6h6"/><path d="M21 17a9 9 0 0 0-15-6.7L3 13"/></svg>Refunded</span></td></tr>
        <tr><th scope="row"><a href="#">#10487</a></th><td>Chloe Martin</td><td><time datetime="2026-10-15">Oct 15</time></td><td class="text-end num">$59.00</td><td><span class="badge rounded-pill lb-status is-failed"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="9"/><path d="M15 9l-6 6M9 9l6 6"/></svg>Failed</span></td></tr>
      </tbody></table>
  </div>
</section></div>

<div class="col-lg-7"><span class="lbl">Sales leaderboard</span>
<section class="card lb" aria-labelledby="lb-reps-title">
  <div class="lb-head"><h3 class="lb-title mb-0" id="lb-reps-title">Top sales reps</h3><p class="lb-sub mb-0">Q3 2026 · closed-won revenue</p></div>
  <div class="table-responsive" role="region" aria-labelledby="lb-reps-title" tabindex="0">
    <table class="table table-hover align-middle"><caption class="visually-hidden">Top sales reps by revenue, Q3 2026</caption>
      <thead><tr><th scope="col">Rank</th><th scope="col">Rep</th><th scope="col" class="text-end">Deals</th><th scope="col" class="text-end">Revenue</th><th scope="col" class="text-end">Quota</th></tr></thead>
      <tbody>
        <tr><td><span class="lb-rank" style="background:#fde68a;color:#713f12">1</span></td>
          <th scope="row"><span class="d-flex align-items-center gap-2"><span class="lb-av" style="background:#1f5fae" aria-hidden="true">SR</span><span><b class="d-block fw-semibold">Sofia Reyes</b><small class="d-block fw-normal lb-sub">Enterprise</small></span></span></th>
          <td class="text-end num">18</td><td class="text-end num">$412,600</td>
          <td><span class="d-flex align-items-center justify-content-end gap-2"><span class="progress lb-bar" aria-hidden="true"><span class="progress-bar bg-success" style="width:100%"></span></span><span class="num fw-semibold lb-pct">128%</span></span></td></tr>
        <tr><td><span class="lb-rank" style="background:#e2e8f0;color:#1e293b">2</span></td>
          <th scope="row"><span class="d-flex align-items-center gap-2"><span class="lb-av" style="background:#0f766e" aria-hidden="true">ML</span><span><b class="d-block fw-semibold">Marcus Lee</b><small class="d-block fw-normal lb-sub">Mid-market</small></span></span></th>
          <td class="text-end num">26</td><td class="text-end num">$298,400</td>
          <td><span class="d-flex align-items-center justify-content-end gap-2"><span class="progress lb-bar" aria-hidden="true"><span class="progress-bar bg-success" style="width:100%"></span></span><span class="num fw-semibold lb-pct">112%</span></span></td></tr>
        <tr><td><span class="lb-rank" style="background:#fed7aa;color:#7c2d12">3</span></td>
          <th scope="row"><span class="d-flex align-items-center gap-2"><span class="lb-av" style="background:#9333ea" aria-hidden="true">AB</span><span><b class="d-block fw-semibold">Aisha Bello</b><small class="d-block fw-normal lb-sub">Enterprise</small></span></span></th>
          <td class="text-end num">11</td><td class="text-end num">$276,900</td>
          <td><span class="d-flex align-items-center justify-content-end gap-2"><span class="progress lb-bar" aria-hidden="true"><span class="progress-bar bg-success" style="width:100%"></span></span><span class="num fw-semibold lb-pct">104%</span></span></td></tr>
        <tr><td><span class="lb-rank">4</span></td>
          <th scope="row"><span class="d-flex align-items-center gap-2"><span class="lb-av" style="background:#c2410c" aria-hidden="true">TR</span><span><b class="d-block fw-semibold">Tomás Ruiz</b><small class="d-block fw-normal lb-sub">SMB</small></span></span></th>
          <td class="text-end num">41</td><td class="text-end num">$188,250</td>
          <td><span class="d-flex align-items-center justify-content-end gap-2"><span class="progress lb-bar" aria-hidden="true"><span class="progress-bar" style="width:94%"></span></span><span class="num fw-semibold lb-pct">94%</span></span></td></tr>
        <tr><td><span class="lb-rank">5</span></td>
          <th scope="row"><span class="d-flex align-items-center gap-2"><span class="lb-av" style="background:#475569" aria-hidden="true">EN</span><span><b class="d-block fw-semibold">Emma Novak</b><small class="d-block fw-normal lb-sub">Mid-market</small></span></span></th>
          <td class="text-end num">19</td><td class="text-end num">$171,300</td>
          <td><span class="d-flex align-items-center justify-content-end gap-2"><span class="progress lb-bar" aria-hidden="true"><span class="progress-bar" style="width:86%"></span></span><span class="num fw-semibold lb-pct">86%</span></span></td></tr>
      </tbody></table>
  </div>
</section></div>

<div class="col-lg-5"><span class="lbl">Top items list</span>
<section class="card lb" aria-labelledby="lb-prod-title">
  <div class="lb-head d-flex justify-content-between align-items-center gap-3"><div><h3 class="lb-title mb-0" id="lb-prod-title">Best-selling products</h3><p class="lb-sub mb-0">October 1–15 · by revenue</p></div><a href="#">Report</a></div>
  <ol class="list-group list-group-flush">
    <li class="list-group-item d-flex gap-3"><span class="lb-pos" aria-hidden="true">1</span><div class="flex-grow-1 min-w-0 d-flex flex-column gap-1"><div class="d-flex justify-content-between gap-3 lb-item-top"><b class="fw-semibold">Linen throw blanket</b><span class="num fw-bold">$82,176</span></div>
      <div class="d-flex justify-content-between gap-3 lb-sub"><span>Home · 1,284 sold</span><span class="num">42% of top 5</span></div><span class="progress lb-bar w-100 mt-1" aria-hidden="true"><span class="progress-bar" style="width:42%"></span></span></div></li>
    <li class="list-group-item d-flex gap-3"><span class="lb-pos" aria-hidden="true">2</span><div class="flex-grow-1 min-w-0 d-flex flex-column gap-1"><div class="d-flex justify-content-between gap-3 lb-item-top"><b class="fw-semibold">Ceramic pour-over set</b><span class="num fw-bold">$45,214</span></div>
      <div class="d-flex justify-content-between gap-3 lb-sub"><span>Kitchen · 962 sold</span><span class="num">23% of top 5</span></div><span class="progress lb-bar w-100 mt-1" aria-hidden="true"><span class="progress-bar" style="width:23%"></span></span></div></li>
    <li class="list-group-item d-flex gap-3"><span class="lb-pos" aria-hidden="true">3</span><div class="flex-grow-1 min-w-0 d-flex flex-column gap-1"><div class="d-flex justify-content-between gap-3 lb-item-top"><b class="fw-semibold">Merino beanie</b><span class="num fw-bold">$26,250</span></div>
      <div class="d-flex justify-content-between gap-3 lb-sub"><span>Apparel · 875 sold</span><span class="num">13% of top 5</span></div><span class="progress lb-bar w-100 mt-1" aria-hidden="true"><span class="progress-bar" style="width:13%"></span></span></div></li>
    <li class="list-group-item d-flex gap-3"><span class="lb-pos" aria-hidden="true">4</span><div class="flex-grow-1 min-w-0 d-flex flex-column gap-1"><div class="d-flex justify-content-between gap-3 lb-item-top"><b class="fw-semibold">Oak serving board</b><span class="num fw-bold">$24,960</span></div>
      <div class="d-flex justify-content-between gap-3 lb-sub"><span>Kitchen · 640 sold</span><span class="num">13% of top 5</span></div><span class="progress lb-bar w-100 mt-1" aria-hidden="true"><span class="progress-bar" style="width:13%"></span></span></div></li>
    <li class="list-group-item d-flex gap-3"><span class="lb-pos" aria-hidden="true">5</span><div class="flex-grow-1 min-w-0 d-flex flex-column gap-1"><div class="d-flex justify-content-between gap-3 lb-item-top"><b class="fw-semibold">Beeswax candle trio</b><span class="num fw-bold">$17,052</span></div>
      <div class="d-flex justify-content-between gap-3 lb-sub"><span>Home · 588 sold</span><span class="num">9% of top 5</span></div><span class="progress lb-bar w-100 mt-1" aria-hidden="true"><span class="progress-bar" style="width:9%"></span></span></div></li>
  </ol>
</section></div>
</div>
CSS 
/* Bootstrap .card, .table (.table-hover, .table-responsive), .badge, .progress and .list-group. */
.lb{--lb-ink:#0f172a;--lb-muted:#4b5768;--lb-line:#e2e8f0;--lb-accent:#1f5fae;
  --bs-card-border-color:var(--lb-line);--bs-card-border-radius:16px;color:var(--lb-ink);overflow:hidden;box-shadow:0 1px 2px rgba(15,23,42,.04),0 8px 24px rgba(15,23,42,.05);min-width:0}
.lb-head{padding:16px 18px}
.lb-title{font-size:1rem;font-weight:700}
.lb-sub{font-size:.78rem;color:var(--lb-muted)}
.lb a{color:var(--lb-accent);font-weight:600;text-decoration:none;border-radius:4px}
.lb a:hover{text-decoration:underline}
.lb-head>a{white-space:nowrap}
.lb a:focus-visible,.lb .table-responsive:focus-visible{outline:2px solid var(--lb-accent);outline-offset:2px}
.lb .table{--bs-table-color:var(--lb-ink);--bs-table-border-color:var(--lb-line);--bs-table-hover-bg:#f8fafc;--bs-table-hover-color:var(--lb-ink);font-size:.86rem;white-space:nowrap;margin:0}
.lb .table>:not(caption)>*>*{padding:11px 18px;border-top:1px solid var(--lb-line);border-bottom:0}
.lb .table thead th{font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--lb-muted);--bs-table-bg:#f8fafc}
.lb .table tbody th{font-weight:600}
.num{font-variant-numeric:tabular-nums}
.min-w-0{min-width:0}
.lb-status{display:inline-flex;align-items:center;gap:5px;padding:4px 9px 4px 7px;font-size:.76rem}
.lb-status svg{width:13px;height:13px;flex:none}
.lb-status.is-paid{color:#166534;background:#dcfce7}
.lb-status.is-pending{color:#92400e;background:#fef3c7}
.lb-status.is-shipped{color:#1e40af;background:#dbeafe}
.lb-status.is-refunded{color:#334155;background:#e2e8f0}
.lb-status.is-failed{color:#991b1b;background:#fee2e2}
.lb-rank{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;font-weight:700;font-size:.82rem;color:var(--lb-muted)}
.lb-av{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;color:#fff;font-size:.74rem;font-weight:700}
.lb .progress{--bs-progress-height:6px;--bs-progress-bg:#e2e8f0;--bs-progress-bar-bg:#2a78d6;--bs-progress-border-radius:999px;width:90px}
.lb .progress .bg-success{background-color:#15803d!important}
.lb .progress.w-100{width:100%}
.lb-pct{min-width:4ch;text-align:right}
.lb .list-group{--bs-list-group-border-color:var(--lb-line);--bs-list-group-item-padding-x:0;--bs-list-group-item-padding-y:12px;--bs-list-group-color:var(--lb-ink);padding:0 18px 8px}
.lb .list-group-item:first-child{border-top:1px solid var(--lb-line)}
.lb .list-group-item:last-child{border-bottom:0}
.lb-pos{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:8px;background:#f1f5f9;font-size:.82rem;font-weight:700;color:var(--lb-muted)}
.lb-item-top{font-size:.9rem}

Tailwind 4 code

Requires: Tailwind CSS 4

HTML 
<div class="col-span-full"><span class="mb-4 block text-[.72rem] tracking-[.12em] text-[#4b5768] uppercase">Recent orders table</span>
<section class="min-w-0 overflow-hidden rounded-2xl border border-[#e2e8f0] bg-white text-[#0f172a] shadow-[0_1px_2px_rgba(15,23,42,.04),0_8px_24px_rgba(15,23,42,.05)]" aria-labelledby="lb-orders-title">
  <div class="flex items-center justify-between gap-3 px-[18px] py-4"><div><h3 class="text-base font-bold" id="lb-orders-title">Recent orders</h3><p class="text-[.78rem] text-[#4b5768]">Fernhill Goods · 5 of 184 this week</p></div><a href="#" class="whitespace-nowrap rounded font-semibold text-[#1f5fae] no-underline hover:underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#1f5fae]">View all orders</a></div>
  <div class="overflow-x-auto focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#1f5fae]" role="region" aria-labelledby="lb-orders-title" tabindex="0">
    <table class="w-full border-collapse text-left text-[.86rem] whitespace-nowrap"><caption class="sr-only">Recent orders, newest first</caption>
      <thead><tr><th scope="col" class="border-t border-[#e2e8f0] px-[18px] py-[11px] align-middle bg-[#f8fafc] text-[.72rem] font-semibold tracking-[.06em] text-[#4b5768] uppercase">Order</th><th scope="col" class="border-t border-[#e2e8f0] px-[18px] py-[11px] align-middle bg-[#f8fafc] text-[.72rem] font-semibold tracking-[.06em] text-[#4b5768] uppercase">Customer</th><th scope="col" class="border-t border-[#e2e8f0] px-[18px] py-[11px] align-middle bg-[#f8fafc] text-[.72rem] font-semibold tracking-[.06em] text-[#4b5768] uppercase">Date</th><th scope="col" class="border-t border-[#e2e8f0] px-[18px] py-[11px] align-middle bg-[#f8fafc] text-[.72rem] font-semibold tracking-[.06em] text-[#4b5768] uppercase text-right">Total</th><th scope="col" class="border-t border-[#e2e8f0] px-[18px] py-[11px] align-middle bg-[#f8fafc] text-[.72rem] font-semibold tracking-[.06em] text-[#4b5768] uppercase">Status</th></tr></thead>
      <tbody>
        <tr class="hover:bg-[#f8fafc]"><th scope="row" class="border-t border-[#e2e8f0] px-[18px] py-[11px] align-middle font-semibold"><a href="#" class="rounded font-semibold text-[#1f5fae] no-underline hover:underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#1f5fae]">#10491</a></th><td class="border-t border-[#e2e8f0] px-[18px] py-[11px] align-middle">Hana Kim</td><td class="border-t border-[#e2e8f0] px-[18px] py-[11px] align-middle"><time datetime="2026-10-16">Oct 16</time></td><td class="border-t border-[#e2e8f0] px-[18px] py-[11px] align-middle text-right tabular-nums">$248.00</td><td class="border-t border-[#e2e8f0] px-[18px] py-[11px] align-middle"><span class="inline-flex items-center gap-[5px] rounded-full py-0.5 pr-[9px] pl-[7px] text-[.76rem] font-bold text-[#166534] bg-[#dcfce7]"><svg class="size-[13px] flex-none" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>Paid</span></td></tr>
        <tr class="hover:bg-[#f8fafc]"><th scope="row" class="border-t border-[#e2e8f0] px-[18px] py-[11px] align-middle font-semibold"><a href="#" class="rounded font-semibold text-[#1f5fae] no-underline hover:underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#1f5fae]">#10490</a></th><td class="border-t border-[#e2e8f0] px-[18px] py-[11px] align-middle">Diego Alvarez</td><td class="border-t border-[#e2e8f0] px-[18px] py-[11px] align-middle"><time datetime="2026-10-16">Oct 16</time></td><td class="border-t border-[#e2e8f0] px-[18px] py-[11px] align-middle text-right tabular-nums">$1,120.50</td><td class="border-t border-[#e2e8f0] px-[18px] py-[11px] align-middle"><span class="inline-flex items-center gap-[5px] rounded-full py-0.5 pr-[9px] pl-[7px] text-[.76rem] font-bold text-[#92400e] bg-[#fef3c7]"><svg class="size-[13px] flex-none" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg>Pending</span></td></tr>
        <tr class="hover:bg-[#f8fafc]"><th scope="row" class="border-t border-[#e2e8f0] px-[18px] py-[11px] align-middle font-semibold"><a href="#" class="rounded font-semibold text-[#1f5fae] no-underline hover:underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#1f5fae]">#10489</a></th><td class="border-t border-[#e2e8f0] px-[18px] py-[11px] align-middle">Freya Lund</td><td class="border-t border-[#e2e8f0] px-[18px] py-[11px] align-middle"><time datetime="2026-10-15">Oct 15</time></td><td class="border-t border-[#e2e8f0] px-[18px] py-[11px] align-middle text-right tabular-nums">$76.40</td><td class="border-t border-[#e2e8f0] px-[18px] py-[11px] align-middle"><span class="inline-flex items-center gap-[5px] rounded-full py-0.5 pr-[9px] pl-[7px] text-[.76rem] font-bold text-[#1e40af] bg-[#dbeafe]"><svg class="size-[13px] flex-none" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M1 3h15v13H1zM16 8h4l3 3v5h-7z"/><circle cx="5.5" cy="18.5" r="2.5"/><circle cx="18.5" cy="18.5" r="2.5"/></svg>Shipped</span></td></tr>
        <tr class="hover:bg-[#f8fafc]"><th scope="row" class="border-t border-[#e2e8f0] px-[18px] py-[11px] align-middle font-semibold"><a href="#" class="rounded font-semibold text-[#1f5fae] no-underline hover:underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#1f5fae]">#10488</a></th><td class="border-t border-[#e2e8f0] px-[18px] py-[11px] align-middle">Omar Haddad</td><td class="border-t border-[#e2e8f0] px-[18px] py-[11px] align-middle"><time datetime="2026-10-15">Oct 15</time></td><td class="border-t border-[#e2e8f0] px-[18px] py-[11px] align-middle text-right tabular-nums">$312.99</td><td class="border-t border-[#e2e8f0] px-[18px] py-[11px] align-middle"><span class="inline-flex items-center gap-[5px] rounded-full py-0.5 pr-[9px] pl-[7px] text-[.76rem] font-bold text-[#334155] bg-[#e2e8f0]"><svg class="size-[13px] flex-none" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 7v6h6"/><path d="M21 17a9 9 0 0 0-15-6.7L3 13"/></svg>Refunded</span></td></tr>
        <tr class="hover:bg-[#f8fafc]"><th scope="row" class="border-t border-[#e2e8f0] px-[18px] py-[11px] align-middle font-semibold"><a href="#" class="rounded font-semibold text-[#1f5fae] no-underline hover:underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#1f5fae]">#10487</a></th><td class="border-t border-[#e2e8f0] px-[18px] py-[11px] align-middle">Chloe Martin</td><td class="border-t border-[#e2e8f0] px-[18px] py-[11px] align-middle"><time datetime="2026-10-15">Oct 15</time></td><td class="border-t border-[#e2e8f0] px-[18px] py-[11px] align-middle text-right tabular-nums">$59.00</td><td class="border-t border-[#e2e8f0] px-[18px] py-[11px] align-middle"><span class="inline-flex items-center gap-[5px] rounded-full py-0.5 pr-[9px] pl-[7px] text-[.76rem] font-bold text-[#991b1b] bg-[#fee2e2]"><svg class="size-[13px] flex-none" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="9"/><path d="M15 9l-6 6M9 9l6 6"/></svg>Failed</span></td></tr>
      </tbody></table>
  </div>
</section></div>

<div><span class="mb-4 block text-[.72rem] tracking-[.12em] text-[#4b5768] uppercase">Sales leaderboard</span>
<section class="min-w-0 overflow-hidden rounded-2xl border border-[#e2e8f0] bg-white text-[#0f172a] shadow-[0_1px_2px_rgba(15,23,42,.04),0_8px_24px_rgba(15,23,42,.05)]" aria-labelledby="lb-reps-title">
  <div class="px-[18px] py-4"><h3 class="text-base font-bold" id="lb-reps-title">Top sales reps</h3><p class="text-[.78rem] text-[#4b5768]">Q3 2026 · closed-won revenue</p></div>
  <div class="overflow-x-auto focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#1f5fae]" role="region" aria-labelledby="lb-reps-title" tabindex="0">
    <table class="w-full border-collapse text-left text-[.86rem] whitespace-nowrap"><caption class="sr-only">Top sales reps by revenue, Q3 2026</caption>
      <thead><tr><th scope="col" class="border-t border-[#e2e8f0] px-[18px] py-[11px] align-middle bg-[#f8fafc] text-[.72rem] font-semibold tracking-[.06em] text-[#4b5768] uppercase">Rank</th><th scope="col" class="border-t border-[#e2e8f0] px-[18px] py-[11px] align-middle bg-[#f8fafc] text-[.72rem] font-semibold tracking-[.06em] text-[#4b5768] uppercase">Rep</th><th scope="col" class="border-t border-[#e2e8f0] px-[18px] py-[11px] align-middle bg-[#f8fafc] text-[.72rem] font-semibold tracking-[.06em] text-[#4b5768] uppercase text-right">Deals</th><th scope="col" class="border-t border-[#e2e8f0] px-[18px] py-[11px] align-middle bg-[#f8fafc] text-[.72rem] font-semibold tracking-[.06em] text-[#4b5768] uppercase text-right">Revenue</th><th scope="col" class="border-t border-[#e2e8f0] px-[18px] py-[11px] align-middle bg-[#f8fafc] text-[.72rem] font-semibold tracking-[.06em] text-[#4b5768] uppercase text-right">Quota</th></tr></thead>
      <tbody>
        <tr class="hover:bg-[#f8fafc]"><td class="border-t border-[#e2e8f0] px-[18px] py-[11px] align-middle"><span class="inline-grid size-7 place-items-center rounded-full text-[.82rem] font-bold tabular-nums bg-[#fde68a] text-[#713f12]">1</span></td>
          <th scope="row" class="border-t border-[#e2e8f0] px-[18px] py-[11px] align-middle font-semibold"><span class="flex items-center gap-2.5"><span class="grid size-[34px] flex-none place-items-center rounded-full bg-[#1f5fae] text-[.74rem] font-bold text-white" aria-hidden="true">SR</span><span><b class="block font-semibold">Sofia Reyes</b><small class="block text-[.76rem] font-normal text-[#4b5768]">Enterprise</small></span></span></th>
          <td class="border-t border-[#e2e8f0] px-[18px] py-[11px] align-middle text-right tabular-nums">18</td><td class="border-t border-[#e2e8f0] px-[18px] py-[11px] align-middle text-right tabular-nums">$412,600</td>
          <td class="border-t border-[#e2e8f0] px-[18px] py-[11px] align-middle"><span class="flex items-center justify-end gap-2.5"><span class="relative block h-1.5 w-[90px] overflow-hidden rounded-full bg-[#e2e8f0]" aria-hidden="true"><i class="absolute inset-y-0 left-0 w-[100%] rounded-full bg-[#15803d]"></i></span><span class="min-w-[4ch] text-right font-semibold tabular-nums">128%</span></span></td></tr>
        <tr class="hover:bg-[#f8fafc]"><td class="border-t border-[#e2e8f0] px-[18px] py-[11px] align-middle"><span class="inline-grid size-7 place-items-center rounded-full text-[.82rem] font-bold tabular-nums bg-[#e2e8f0] text-[#1e293b]">2</span></td>
          <th scope="row" class="border-t border-[#e2e8f0] px-[18px] py-[11px] align-middle font-semibold"><span class="flex items-center gap-2.5"><span class="grid size-[34px] flex-none place-items-center rounded-full bg-[#0f766e] text-[.74rem] font-bold text-white" aria-hidden="true">ML</span><span><b class="block font-semibold">Marcus Lee</b><small class="block text-[.76rem] font-normal text-[#4b5768]">Mid-market</small></span></span></th>
          <td class="border-t border-[#e2e8f0] px-[18px] py-[11px] align-middle text-right tabular-nums">26</td><td class="border-t border-[#e2e8f0] px-[18px] py-[11px] align-middle text-right tabular-nums">$298,400</td>
          <td class="border-t border-[#e2e8f0] px-[18px] py-[11px] align-middle"><span class="flex items-center justify-end gap-2.5"><span class="relative block h-1.5 w-[90px] overflow-hidden rounded-full bg-[#e2e8f0]" aria-hidden="true"><i class="absolute inset-y-0 left-0 w-[100%] rounded-full bg-[#15803d]"></i></span><span class="min-w-[4ch] text-right font-semibold tabular-nums">112%</span></span></td></tr>
        <tr class="hover:bg-[#f8fafc]"><td class="border-t border-[#e2e8f0] px-[18px] py-[11px] align-middle"><span class="inline-grid size-7 place-items-center rounded-full text-[.82rem] font-bold tabular-nums bg-[#fed7aa] text-[#7c2d12]">3</span></td>
          <th scope="row" class="border-t border-[#e2e8f0] px-[18px] py-[11px] align-middle font-semibold"><span class="flex items-center gap-2.5"><span class="grid size-[34px] flex-none place-items-center rounded-full bg-[#9333ea] text-[.74rem] font-bold text-white" aria-hidden="true">AB</span><span><b class="block font-semibold">Aisha Bello</b><small class="block text-[.76rem] font-normal text-[#4b5768]">Enterprise</small></span></span></th>
          <td class="border-t border-[#e2e8f0] px-[18px] py-[11px] align-middle text-right tabular-nums">11</td><td class="border-t border-[#e2e8f0] px-[18px] py-[11px] align-middle text-right tabular-nums">$276,900</td>
          <td class="border-t border-[#e2e8f0] px-[18px] py-[11px] align-middle"><span class="flex items-center justify-end gap-2.5"><span class="relative block h-1.5 w-[90px] overflow-hidden rounded-full bg-[#e2e8f0]" aria-hidden="true"><i class="absolute inset-y-0 left-0 w-[100%] rounded-full bg-[#15803d]"></i></span><span class="min-w-[4ch] text-right font-semibold tabular-nums">104%</span></span></td></tr>
        <tr class="hover:bg-[#f8fafc]"><td class="border-t border-[#e2e8f0] px-[18px] py-[11px] align-middle"><span class="inline-grid size-7 place-items-center rounded-full text-[.82rem] font-bold tabular-nums text-[#4b5768]">4</span></td>
          <th scope="row" class="border-t border-[#e2e8f0] px-[18px] py-[11px] align-middle font-semibold"><span class="flex items-center gap-2.5"><span class="grid size-[34px] flex-none place-items-center rounded-full bg-[#c2410c] text-[.74rem] font-bold text-white" aria-hidden="true">TR</span><span><b class="block font-semibold">Tomás Ruiz</b><small class="block text-[.76rem] font-normal text-[#4b5768]">SMB</small></span></span></th>
          <td class="border-t border-[#e2e8f0] px-[18px] py-[11px] align-middle text-right tabular-nums">41</td><td class="border-t border-[#e2e8f0] px-[18px] py-[11px] align-middle text-right tabular-nums">$188,250</td>
          <td class="border-t border-[#e2e8f0] px-[18px] py-[11px] align-middle"><span class="flex items-center justify-end gap-2.5"><span class="relative block h-1.5 w-[90px] overflow-hidden rounded-full bg-[#e2e8f0]" aria-hidden="true"><i class="absolute inset-y-0 left-0 w-[94%] rounded-full bg-[#2a78d6]"></i></span><span class="min-w-[4ch] text-right font-semibold tabular-nums">94%</span></span></td></tr>
        <tr class="hover:bg-[#f8fafc]"><td class="border-t border-[#e2e8f0] px-[18px] py-[11px] align-middle"><span class="inline-grid size-7 place-items-center rounded-full text-[.82rem] font-bold tabular-nums text-[#4b5768]">5</span></td>
          <th scope="row" class="border-t border-[#e2e8f0] px-[18px] py-[11px] align-middle font-semibold"><span class="flex items-center gap-2.5"><span class="grid size-[34px] flex-none place-items-center rounded-full bg-[#475569] text-[.74rem] font-bold text-white" aria-hidden="true">EN</span><span><b class="block font-semibold">Emma Novak</b><small class="block text-[.76rem] font-normal text-[#4b5768]">Mid-market</small></span></span></th>
          <td class="border-t border-[#e2e8f0] px-[18px] py-[11px] align-middle text-right tabular-nums">19</td><td class="border-t border-[#e2e8f0] px-[18px] py-[11px] align-middle text-right tabular-nums">$171,300</td>
          <td class="border-t border-[#e2e8f0] px-[18px] py-[11px] align-middle"><span class="flex items-center justify-end gap-2.5"><span class="relative block h-1.5 w-[90px] overflow-hidden rounded-full bg-[#e2e8f0]" aria-hidden="true"><i class="absolute inset-y-0 left-0 w-[86%] rounded-full bg-[#2a78d6]"></i></span><span class="min-w-[4ch] text-right font-semibold tabular-nums">86%</span></span></td></tr>
      </tbody></table>
  </div>
</section></div>

<div><span class="mb-4 block text-[.72rem] tracking-[.12em] text-[#4b5768] uppercase">Top items list</span>
<section class="min-w-0 overflow-hidden rounded-2xl border border-[#e2e8f0] bg-white text-[#0f172a] shadow-[0_1px_2px_rgba(15,23,42,.04),0_8px_24px_rgba(15,23,42,.05)]" aria-labelledby="lb-prod-title">
  <div class="flex items-center justify-between gap-3 px-[18px] py-4"><div><h3 class="text-base font-bold" id="lb-prod-title">Best-selling products</h3><p class="text-[.78rem] text-[#4b5768]">October 1–15 · by revenue</p></div><a href="#" class="whitespace-nowrap rounded font-semibold text-[#1f5fae] no-underline hover:underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#1f5fae]">Report</a></div>
  <ol class="px-[18px] pb-2">
    <li class="flex gap-3.5 border-t border-[#e2e8f0] py-3"><span class="grid size-7 flex-none place-items-center rounded-lg bg-[#f1f5f9] text-[.82rem] font-bold text-[#4b5768]" aria-hidden="true">1</span><div class="flex min-w-0 flex-1 flex-col gap-[3px]"><div class="flex justify-between gap-3 text-[.9rem]"><b class="font-semibold">Linen throw blanket</b><span class="font-bold tabular-nums">$82,176</span></div>
      <div class="flex justify-between gap-3 text-[.76rem] text-[#4b5768]"><span>Home · 1,284 sold</span><span class="tabular-nums">42% of top 5</span></div><span class="relative mt-1 block h-1.5 w-full overflow-hidden rounded-full bg-[#e2e8f0]" aria-hidden="true"><i class="absolute inset-y-0 left-0 w-[42%] rounded-full bg-[#2a78d6]"></i></span></div></li>
    <li class="flex gap-3.5 border-t border-[#e2e8f0] py-3"><span class="grid size-7 flex-none place-items-center rounded-lg bg-[#f1f5f9] text-[.82rem] font-bold text-[#4b5768]" aria-hidden="true">2</span><div class="flex min-w-0 flex-1 flex-col gap-[3px]"><div class="flex justify-between gap-3 text-[.9rem]"><b class="font-semibold">Ceramic pour-over set</b><span class="font-bold tabular-nums">$45,214</span></div>
      <div class="flex justify-between gap-3 text-[.76rem] text-[#4b5768]"><span>Kitchen · 962 sold</span><span class="tabular-nums">23% of top 5</span></div><span class="relative mt-1 block h-1.5 w-full overflow-hidden rounded-full bg-[#e2e8f0]" aria-hidden="true"><i class="absolute inset-y-0 left-0 w-[23%] rounded-full bg-[#2a78d6]"></i></span></div></li>
    <li class="flex gap-3.5 border-t border-[#e2e8f0] py-3"><span class="grid size-7 flex-none place-items-center rounded-lg bg-[#f1f5f9] text-[.82rem] font-bold text-[#4b5768]" aria-hidden="true">3</span><div class="flex min-w-0 flex-1 flex-col gap-[3px]"><div class="flex justify-between gap-3 text-[.9rem]"><b class="font-semibold">Merino beanie</b><span class="font-bold tabular-nums">$26,250</span></div>
      <div class="flex justify-between gap-3 text-[.76rem] text-[#4b5768]"><span>Apparel · 875 sold</span><span class="tabular-nums">13% of top 5</span></div><span class="relative mt-1 block h-1.5 w-full overflow-hidden rounded-full bg-[#e2e8f0]" aria-hidden="true"><i class="absolute inset-y-0 left-0 w-[13%] rounded-full bg-[#2a78d6]"></i></span></div></li>
    <li class="flex gap-3.5 border-t border-[#e2e8f0] py-3"><span class="grid size-7 flex-none place-items-center rounded-lg bg-[#f1f5f9] text-[.82rem] font-bold text-[#4b5768]" aria-hidden="true">4</span><div class="flex min-w-0 flex-1 flex-col gap-[3px]"><div class="flex justify-between gap-3 text-[.9rem]"><b class="font-semibold">Oak serving board</b><span class="font-bold tabular-nums">$24,960</span></div>
      <div class="flex justify-between gap-3 text-[.76rem] text-[#4b5768]"><span>Kitchen · 640 sold</span><span class="tabular-nums">13% of top 5</span></div><span class="relative mt-1 block h-1.5 w-full overflow-hidden rounded-full bg-[#e2e8f0]" aria-hidden="true"><i class="absolute inset-y-0 left-0 w-[13%] rounded-full bg-[#2a78d6]"></i></span></div></li>
    <li class="flex gap-3.5 border-t border-[#e2e8f0] py-3"><span class="grid size-7 flex-none place-items-center rounded-lg bg-[#f1f5f9] text-[.82rem] font-bold text-[#4b5768]" aria-hidden="true">5</span><div class="flex min-w-0 flex-1 flex-col gap-[3px]"><div class="flex justify-between gap-3 text-[.9rem]"><b class="font-semibold">Beeswax candle trio</b><span class="font-bold tabular-nums">$17,052</span></div>
      <div class="flex justify-between gap-3 text-[.76rem] text-[#4b5768]"><span>Home · 588 sold</span><span class="tabular-nums">9% of top 5</span></div><span class="relative mt-1 block h-1.5 w-full overflow-hidden rounded-full bg-[#e2e8f0]" aria-hidden="true"><i class="absolute inset-y-0 left-0 w-[9%] rounded-full bg-[#2a78d6]"></i></span></div></li>
  </ol>
</section></div>

About this set

Compact tables and ranked lists for a dashboard. The recent orders table lists five orders with order number, customer, date, right-aligned total and a status badge such as Paid, Pending, Shipped, Refunded or Failed, each with its own icon. The sales leaderboard ranks five reps by quarterly revenue with a numbered rank, gold, silver and bronze tints for the top three, avatar initials, deals won, revenue and a quota bar with the percentage printed beside it. The top items list is an ordered list of best-selling products with category, units sold, revenue and a share bar. Both tables are real table elements with a caption and scoped column and row headers, so screen readers announce each cell with its header. On narrow screens they scroll sideways inside a region that can be focused and scrolled with the keyboard instead of breaking the page. Numbers use tabular figures and are right-aligned so columns of money line up. Use the table for recent records, the leaderboard for rankings and the list where a full table would be too heavy. No JavaScript.

What’s included

  • Recent orders table with icon-and-word status badges
  • Sales leaderboard with rank, quota bar and printed percentage
  • Top products list with share bars
  • Real tables with captions and scoped headers
  • Keyboard-scrollable table region on small screens
  • Bootstrap version uses .table, .table-responsive, .progress and .list-group

Accessibility

Tables have a visually hidden caption, scope on header cells and a row header per row. The scrolling wrapper is a focusable region named by the widget heading, with a visible focus outline. Status, rank and quota are always written as text; bars are decorative and hidden from screen readers.

Customise it

Set --lb-accent, --lb-bar, --lb-over and --lb-line on .lb, and edit the .lb-status rules for badge colours. In Bootstrap the table and progress variables are set inside .lb; in Tailwind change the bg- and text- classes on the badges and bars.