# Customers Revenue Table

> A customers table with avatars, plan, last active time and monthly revenue plus a total header.

- Kind: Element
- Page: https://ownlyplans.com/bhaskar/customers-revenue-table/
- Licence: MIT (do anything, keep the notice)

## Code

`index.html`

```html
<div class='tb'><div class='th'><div><h4>Customers</h4><p>4 accounts</p></div><div class='tm'><small>MRR</small><b>$87/mo</b></div></div><table><thead><tr><th>Customer</th><th>Plan</th><th>Last active</th><th class='r'>MRR</th></tr></thead><tbody><tr><td><div class='who'><i class='av' style='background:linear-gradient(135deg,#fda4af,#fb7185)'>AK</i><div><b>Arun Kapoor</b><small>Studio Dev</small></div></div></td><td>Team</td><td>2h ago</td><td class='r'>$49</td></tr><tr><td><div class='who'><i class='av' style='background:linear-gradient(135deg,#a5b4fc,#6366f1)'>RS</i><div><b>Rupam Sen</b><small>Design Lab</small></div></div></td><td>Pro</td><td>1d ago</td><td class='r'>$19</td></tr><tr><td><div class='who'><i class='av' style='background:linear-gradient(135deg,#86efac,#22c55e)'>AC</i><div><b>Ava Chen</b><small>Northwind</small></div></div></td><td>Pro</td><td>3d ago</td><td class='r'>$19</td></tr><tr><td><div class='who'><i class='av' style='background:linear-gradient(135deg,#fcd34d,#f59e0b)'>SO</i><div><b>Sofia Ortiz</b><small>Harbor Labs</small></div></div></td><td>Free</td><td>1w ago</td><td class='r'>—</td></tr></tbody></table></div>
```

`styles.css`

```css
.tb{width:min(560px,96%);margin:auto;background:#fff;border:1px solid #e8e8e8;border-radius:16px;overflow:hidden;font-family:Inter,Arial,sans-serif;color:#111}.tb table{width:100%;border-collapse:collapse}.tb th{padding:12px 18px;font-size:12.5px;font-weight:500;color:#737373;text-align:left;border-bottom:1px solid #f0f0f0}.tb td{padding:12px 18px;font-size:14px;border-top:1px solid #f4f4f4}.tb tbody tr:first-child td{border-top:0}.av{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;margin-right:12px;vertical-align:middle;color:#fff;font:600 11px Inter,Arial,sans-serif;font-style:normal}.who{display:flex;align-items:center}.who b{display:block;font-weight:500}.who small{display:block;font-size:12.5px;color:#737373}.r{text-align:right!important}.th{display:flex;justify-content:space-between;align-items:flex-start;padding:16px 18px 14px}.th h4{margin:0;font-size:15px;font-weight:600}.th p{margin:3px 0 0;font-size:13px;color:#737373}.tm{text-align:right}.tm small{display:block;font-size:12px;color:#8a8a8a}.tm b{font-size:16px}.tb td:first-child{padding-right:6px}@media(max-width:480px){.tb th:nth-child(3),.tb td:nth-child(3){display:none}}
```

## About

A card table with title, account count and total MRR in the header. Rows show avatar, name, company, plan, recency and revenue.

---
Also available as JSON: https://ownlyplans.com/bhaskar/customers-revenue-table/?format=json
MCP server: https://ownlyplans.com/mcp