A real pandas export of a fictional estimate: $2,050 known subtotal; handoff pending.

Select the code and use your copy shortcut. Changes in this preview are temporary.

<!doctype html>
<html lang="en"><head><meta charset="utf-8"><meta name="nos-demo-layout" content="responsive-lab"><meta name="viewport" content="width=device-width,initial-scale=1">
<title>Website prototype estimate</title><style>
*{box-sizing:border-box}body{margin:0;background:#eeeae2;color:#252620;font:16px/1.55 system-ui,-apple-system,Segoe UI,sans-serif}main{max-width:920px;margin:38px auto;padding:32px clamp(16px,5vw,46px);background:#fffdf7;border-top:6px solid #9b481e}.eyebrow{color:#725b46;margin:0;font-weight:650}h1{font:500 clamp(31px,5vw,47px)/1.15 Georgia,serif;margin:16px 0;max-width:660px}.lede{max-width:650px;margin:0 0 26px;color:#55564d}table{width:100%;border-collapse:collapse;table-layout:fixed;font-size:16px}caption{text-align:left;font-weight:650;padding:0 0 13px}th,td{padding:14px 6px;border-bottom:1px solid #dedbd2;overflow-wrap:anywhere;vertical-align:top;font-variant-numeric:tabular-nums}thead th{background:#f0ede4;text-align:right}thead th:first-child{text-align:left}th:first-child,td:first-child{width:34%}th:nth-child(2),td:nth-child(2){width:20%}th:nth-child(3),td:nth-child(3){width:18%}th:last-child,td:last-child{width:28%}tbody tr:last-child{background:#fff2d7}.subtotal{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:21px 0 8px;font-weight:650}.subtotal strong{font:500 clamp(31px,6vw,45px)/1.2 Georgia,serif}.note{padding:15px 17px;border-left:3px solid #9b481e;background:#f5eee3;margin:17px 0 23px}.note p{margin:0}h2{font-size:18px;margin:0 0 8px}footer{border-top:1px solid #d4cec0;padding-top:17px;margin-top:26px;color:#646353}@media(max-width:600px){main{margin:0;padding:23px 16px 30px}th,td{padding:12px 4px}h1{font-size:33px}.subtotal{align-items:flex-start}}@media print{body{background:white}main{margin:0;border-top:3px solid #9b481e}}
</style></head><body><main><p class="eyebrow">PROJECT ESTIMATE / REVIEW COPY</p><h1>Website prototype estimate</h1><p class="lede">Original fictional example. The known work is priced below; handoff hours still need agreement.</p>
<style type="text/css">
#T_project_estimate_row0_col0, #T_project_estimate_row1_col0, #T_project_estimate_row2_col0, #T_project_estimate_row3_col0 {
  text-align: left;
}
#T_project_estimate_row0_col1, #T_project_estimate_row0_col2, #T_project_estimate_row0_col3, #T_project_estimate_row1_col1, #T_project_estimate_row1_col2, #T_project_estimate_row1_col3, #T_project_estimate_row2_col1, #T_project_estimate_row2_col2, #T_project_estimate_row2_col3, #T_project_estimate_row3_col1, #T_project_estimate_row3_col2, #T_project_estimate_row3_col3 {
  text-align: right;
}
</style>
<table id="T_project_estimate">
  <caption>Illustrative estimate — handoff hours pending</caption>
  <thead>
    <tr>
      <th id="T_project_estimate_level0_col0" class="col_heading level0 col0" >Work</th>
      <th id="T_project_estimate_level0_col1" class="col_heading level0 col1" >Hours</th>
      <th id="T_project_estimate_level0_col2" class="col_heading level0 col2" >Rate</th>
      <th id="T_project_estimate_level0_col3" class="col_heading level0 col3" >Amount</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td id="T_project_estimate_row0_col0" class="data row0 col0" >Discovery</td>
      <td id="T_project_estimate_row0_col1" class="data row0 col1" >6</td>
      <td id="T_project_estimate_row0_col2" class="data row0 col2" >$95</td>
      <td id="T_project_estimate_row0_col3" class="data row0 col3" >$570</td>
    </tr>
    <tr>
      <td id="T_project_estimate_row1_col0" class="data row1 col0" >Prototype review</td>
      <td id="T_project_estimate_row1_col1" class="data row1 col1" >12</td>
      <td id="T_project_estimate_row1_col2" class="data row1 col2" >$95</td>
      <td id="T_project_estimate_row1_col3" class="data row1 col3" >$1,140</td>
    </tr>
    <tr>
      <td id="T_project_estimate_row2_col0" class="data row2 col0" >QA</td>
      <td id="T_project_estimate_row2_col1" class="data row2 col1" >4</td>
      <td id="T_project_estimate_row2_col2" class="data row2 col2" >$85</td>
      <td id="T_project_estimate_row2_col3" class="data row2 col3" >$340</td>
    </tr>
    <tr>
      <td id="T_project_estimate_row3_col0" class="data row3 col0" >Handoff</td>
      <td id="T_project_estimate_row3_col1" class="data row3 col1" >Pending</td>
      <td id="T_project_estimate_row3_col2" class="data row3 col2" >$85</td>
      <td id="T_project_estimate_row3_col3" class="data row3 col3" >Pending</td>
    </tr>
  </tbody>
</table>

<div class="subtotal"><span>Known subtotal</span><strong>$2,050</strong></div>
<div class="note"><p><strong>This is not the final price.</strong> Handoff hours and their amount remain pending. A missing amount has not been replaced with zero.</p></div>
<h2>What to confirm</h2><p>Check the three priced work items and agree the handoff hours before a final estimate is issued.</p>
<footer>Generated from the accompanying Python source · pandas 2.3.1 · static report, no live updates.</footer></main></body></html>