Open demo

CSS code

HTML 
<div><span class="lbl">Week strip with agenda</span>
<section class="tw" aria-labelledby="sc-title">
  <div class="tw-head"><div><h3 class="tw-title" id="sc-title">Today’s schedule</h3><p class="tw-sub">Friday, October 16, 2026</p></div></div>
  <ol class="sc-week" aria-label="Week of October 12">
      <li><span>Mon</span><b>12</b><i aria-hidden="true">••</i><span class="sr-only">, 2 events</span></li>
      <li><span>Tue</span><b>13</b><i aria-hidden="true">•</i><span class="sr-only">, 1 event</span></li>
      <li><span>Wed</span><b>14</b><i aria-hidden="true">•••</i><span class="sr-only">, 3 events</span></li>
      <li><span>Thu</span><b>15</b><i aria-hidden="true"></i></li>
      <li aria-current="date"><span>Fri</span><b>16</b><i aria-hidden="true">•••</i><span class="sr-only">, 4 events</span></li>
      <li><span>Sat</span><b>17</b><i aria-hidden="true"></i></li>
      <li><span>Sun</span><b>18</b><i aria-hidden="true">•</i><span class="sr-only">, 1 event</span></li>
  </ol>
  <ul class="sc-list">
      <li style="--cat:#2a78d6"><p class="sc-time"><time>09:30</time><span class="sr-only"> to </span><time>10:00</time></p><div><p class="sc-ev">Product standup <span class="sc-now">Now</span></p><p class="sc-meta">Meeting · Product team · Video call</p></div></li>
      <li style="--cat:#9333ea"><p class="sc-time"><time>11:00</time><span class="sr-only"> to </span><time>12:00</time></p><div><p class="sc-ev">Q4 pricing review</p><p class="sc-meta">Review · Ana, Leo +3 · Room Fjord</p></div></li>
      <li style="--cat:#0f766e"><p class="sc-time"><time>14:00</time><span class="sr-only"> to </span><time>14:30</time></p><div><p class="sc-ev">1:1 with Ana Petrova</p><p class="sc-meta">1:1 · Room Birch</p></div></li>
      <li style="--cat:#c2410c"><p class="sc-time"><time>16:00</time><span class="sr-only"> to </span><time>16:45</time></p><div><p class="sc-ev">Customer call: Larkspur Studio</p><p class="sc-meta">External · Failed payment follow-up</p></div></li>
  </ul>
</section></div>

<div><span class="lbl">To-do list with checkboxes</span>
<section class="tw" aria-labelledby="td-title" data-todo>
  <div class="tw-head"><div><h3 class="tw-title" id="td-title">My tasks</h3><p class="tw-sub">Ops board · this week</p></div></div>
  <div class="td-progress"><progress max="7" value="3" aria-hidden="true" data-todo-bar></progress><span aria-live="polite" data-todo-count>3 of 7 done</span></div>
  <ul class="td-list">
      <li><input type="checkbox" id="td-1" aria-describedby="td-1-m" checked><div><label for="td-1">Send Q3 invoice reminders</label><p class="td-meta" id="td-1-m"><span class="td-pri is-high">High</span>Billing · Today</p></div></li>
      <li><input type="checkbox" id="td-2" aria-describedby="td-2-m" checked><div><label for="td-2">Review onboarding email copy</label><p class="td-meta" id="td-2-m"><span class="td-pri is-med">Medium</span>Marketing · Today</p></div></li>
      <li><input type="checkbox" id="td-3" aria-describedby="td-3-m"><div><label for="td-3">Approve October payroll</label><p class="td-meta" id="td-3-m"><span class="td-pri is-high">High</span>Finance · Today</p></div></li>
      <li><input type="checkbox" id="td-4" aria-describedby="td-4-m"><div><label for="td-4">Reply to Larkspur Studio</label><p class="td-meta" id="td-4-m"><span class="td-pri is-high">High</span>Support · Today</p></div></li>
      <li><input type="checkbox" id="td-5" aria-describedby="td-5-m" checked><div><label for="td-5">Update churn dashboard filters</label><p class="td-meta" id="td-5-m"><span class="td-pri is-low">Low</span>Analytics · Yesterday</p></div></li>
      <li><input type="checkbox" id="td-6" aria-describedby="td-6-m"><div><label for="td-6">Slides for Q4 pricing review</label><p class="td-meta" id="td-6-m"><span class="td-pri is-med">Medium</span>Product · Mon, Oct 19</p></div></li>
      <li><input type="checkbox" id="td-7" aria-describedby="td-7-m"><div><label for="td-7">Book venue for team offsite</label><p class="td-meta" id="td-7-m"><span class="td-pri is-low">Low</span>Ops · Fri, Oct 23</p></div></li>
  </ul>
</section></div>

<div><span class="lbl">Upcoming deadlines</span>
<section class="tw" aria-labelledby="dl-title">
  <div class="tw-head"><div><h3 class="tw-title" id="dl-title">Deadlines</h3><p class="tw-sub">Next 7 days · 6 open</p></div></div>
  <div class="dl">
    <h4 class="dl-group">Overdue</h4>
    <ul>
      <li><span class="dl-av" style="background:#0f766e" aria-hidden="true">JB</span><div><p class="dl-task">Renew SSL certificate for the shop</p><p class="dl-meta">Infrastructure · <span class="dl-over"><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 7v5M12 16h.01"/></svg>2 days overdue</span></p></div></li>
      <li><span class="dl-av" style="background:#1f5fae" aria-hidden="true">MO</span><div><p class="dl-task">Submit VAT return</p><p class="dl-meta">Finance · <span class="dl-over"><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 7v5M12 16h.01"/></svg>1 day overdue</span></p></div></li>
    </ul>
    <h4 class="dl-group">Today · Fri, Oct 16</h4>
    <ul>
      <li><span class="dl-av" style="background:#9333ea" aria-hidden="true">PN</span><div><p class="dl-task">Ship v4.19 release notes</p><p class="dl-meta">Product · <span class="dl-due"><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>Due 17:00</span></p></div></li>
      <li><span class="dl-av" style="background:#c2410c" aria-hidden="true">LM</span><div><p class="dl-task">Publish October newsletter</p><p class="dl-meta">Marketing · <span class="dl-due"><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>Due 18:00</span></p></div></li>
    </ul>
    <h4 class="dl-group">Mon, Oct 19</h4>
    <ul>
      <li><span class="dl-av" style="background:#1f5fae" aria-hidden="true">MO</span><div><p class="dl-task">Close Q3 books</p><p class="dl-meta">Finance · <span class="dl-due"><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>Due 12:00</span></p></div></li>
      <li><span class="dl-av" style="background:#0f766e" aria-hidden="true">JB</span><div><p class="dl-task">Security review: SSO rollout</p><p class="dl-meta">Infrastructure · <span class="dl-due"><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>Due 15:00</span></p></div></li>
    </ul>
  </div>
</section></div>
CSS 
/* Calendar and to-do widgets. Today is marked with aria-current="date"; event categories are a colour bar plus a word;
   to-dos are real checkboxes with <label>s, and a short script keeps the "n of N done" count in step. */
.tw{--tw-ink:#0f172a;--tw-muted:#4b5768;--tw-line:#e2e8f0;--tw-accent:#1f5fae;--tw-box:#64748b;
  background:#fff;color:var(--tw-ink);border:1px solid var(--tw-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}
.tw-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 18px 12px}
.tw-title{font-size:1rem;font-weight:700}
.tw-sub{font-size:.78rem;color:var(--tw-muted)}
/* schedule */
.sc-week{list-style:none;display:grid;grid-template-columns:repeat(7,1fr);gap:4px;padding:0 14px 14px;border-bottom:1px solid var(--tw-line)}
.sc-week li{display:flex;flex-direction:column;align-items:center;gap:1px;padding:6px 0 4px;border-radius:10px;font-size:.7rem;color:var(--tw-muted)}
.sc-week b{font-size:.95rem;color:var(--tw-ink);font-variant-numeric:tabular-nums}
.sc-week i{font-style:normal;height:10px;line-height:10px;letter-spacing:1px;color:var(--tw-accent)}
.sc-week li[aria-current]{background:var(--tw-accent);color:#fff}
.sc-week li[aria-current] b,.sc-week li[aria-current] i{color:#fff}
.sc-list{list-style:none;padding:6px 18px 14px}
.sc-list li{display:grid;grid-template-columns:52px 1fr;gap:10px;padding:10px 0 10px 12px;border-left:3px solid var(--cat);margin:8px 0;background:#f8fafc;border-radius:0 10px 10px 0}
.sc-time{display:flex;flex-direction:column;font-size:.8rem;font-weight:600;font-variant-numeric:tabular-nums;color:var(--tw-ink)}
.sc-time time+span+time{font-weight:400;color:var(--tw-muted)}
.sc-ev{font-size:.88rem;font-weight:600}
.sc-meta{font-size:.76rem;color:var(--tw-muted)}
.sc-now{display:inline-block;margin-left:6px;padding:0 7px;border-radius:999px;background:#dcfce7;color:#166534;font-size:.7rem;font-weight:700;vertical-align:1px}
/* to-do */
.td-progress{display:flex;align-items:center;gap:10px;padding:0 18px 12px;font-size:.78rem;color:var(--tw-muted);font-variant-numeric:tabular-nums}
.td-progress progress{-webkit-appearance:none;appearance:none;flex:1;height:6px;border:0;border-radius:999px;background:var(--tw-line);overflow:hidden}
.td-progress progress::-webkit-progress-bar{background:var(--tw-line)}
.td-progress progress::-webkit-progress-value{background:#2a78d6;border-radius:999px}
.td-progress progress::-moz-progress-bar{background:#2a78d6;border-radius:999px}
.td-list{list-style:none;padding:0 18px 10px}
.td-list li{display:flex;align-items:flex-start;gap:12px;padding:11px 0;border-top:1px solid var(--tw-line)}
.td-list input{-webkit-appearance:none;appearance:none;flex:none;width:20px;height:20px;margin-top:1px;border:2px solid var(--tw-box);border-radius:6px;background:#fff;cursor:pointer;display:grid;place-items:center;transition:background .15s,border-color .15s}
.td-list input::after{content:"";width:9px;height:5px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:translateY(-1px) rotate(-45deg) scale(0);transition:transform .15s}
.td-list input:checked{background:var(--tw-accent);border-color:var(--tw-accent)}
.td-list input:checked::after{transform:translateY(-1px) rotate(-45deg) scale(1)}
.td-list input:focus-visible{outline:2px solid var(--tw-accent);outline-offset:2px}
.td-list label{font-size:.88rem;font-weight:600;cursor:pointer}
.td-list input:checked+div label{text-decoration:line-through;color:var(--tw-muted);font-weight:500}
.td-meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:.76rem;color:var(--tw-muted);margin-top:2px}
.td-pri{padding:0 7px;border-radius:5px;font-size:.7rem;font-weight:700}
.td-pri.is-high{color:#991b1b;background:#fee2e2}
.td-pri.is-med{color:#92400e;background:#fef3c7}
.td-pri.is-low{color:#334155;background:#e2e8f0}
/* deadlines */
.dl{padding:0 18px 12px}
.dl-group{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--tw-muted);padding:10px 0 4px}
.dl ul{list-style:none}
.dl li{display:flex;gap:10px;align-items:flex-start;padding:9px 0;border-top:1px solid var(--tw-line)}
.dl-av{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;color:#fff;font-size:.68rem;font-weight:700}
.dl-task{font-size:.86rem;font-weight:600}
.dl-meta{font-size:.76rem;color:var(--tw-muted)}
.dl-over,.dl-due{display:inline-flex;align-items:center;gap:4px;font-weight:600}
.dl-over{color:#b91c1c}
.dl-over svg,.dl-due svg{width:13px;height:13px}
.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}
@media (prefers-reduced-motion:reduce){.td-list input,.td-list input::after{transition:none}}
JavaScript 
// Keeps the "n of N done" line and the bar in step with the checkboxes.
document.querySelectorAll('[data-todo]').forEach(box => {
  const items = box.querySelectorAll('input[type="checkbox"]'), out = box.querySelector('[data-todo-count]'), bar = box.querySelector('[data-todo-bar]');
  const update = () => {
    const done = [...items].filter(i => i.checked).length;
    if (out) out.textContent = `${done} of ${items.length} done`;
    if (bar) { bar.max = items.length; bar.value = done; }
  };
  items.forEach(i => i.addEventListener('change', update));
  update();
});

Bootstrap 5 code

Requires: Bootstrap 5.3.8 CSS

HTML 
<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-3 gy-5 align-items-start">
<div class="col"><span class="lbl">Week strip with agenda</span>
<section class="card tw" aria-labelledby="sc-title">
  <div class="tw-head"><h3 class="tw-title mb-0" id="sc-title">Today’s schedule</h3><p class="tw-sub mb-0">Friday, October 16, 2026</p></div>
  <ol class="sc-week list-unstyled mb-0" aria-label="Week of October 12">
      <li class="d-flex flex-column align-items-center"><span>Mon</span><b>12</b><i aria-hidden="true">••</i><span class="visually-hidden">, 2 events</span></li>
      <li class="d-flex flex-column align-items-center"><span>Tue</span><b>13</b><i aria-hidden="true">•</i><span class="visually-hidden">, 1 event</span></li>
      <li class="d-flex flex-column align-items-center"><span>Wed</span><b>14</b><i aria-hidden="true">•••</i><span class="visually-hidden">, 3 events</span></li>
      <li class="d-flex flex-column align-items-center"><span>Thu</span><b>15</b><i aria-hidden="true"></i></li>
      <li class="d-flex flex-column align-items-center" aria-current="date"><span>Fri</span><b>16</b><i aria-hidden="true">•••</i><span class="visually-hidden">, 4 events</span></li>
      <li class="d-flex flex-column align-items-center"><span>Sat</span><b>17</b><i aria-hidden="true"></i></li>
      <li class="d-flex flex-column align-items-center"><span>Sun</span><b>18</b><i aria-hidden="true">•</i><span class="visually-hidden">, 1 event</span></li>
  </ol>
  <ul class="sc-list list-unstyled mb-0">
      <li style="--cat:#2a78d6"><p class="sc-time mb-0"><time>09:30</time><span class="visually-hidden"> to </span><time>10:00</time></p><div><p class="sc-ev mb-0">Product standup <span class="badge rounded-pill sc-now">Now</span></p><p class="sc-meta mb-0">Meeting · Product team · Video call</p></div></li>
      <li style="--cat:#9333ea"><p class="sc-time mb-0"><time>11:00</time><span class="visually-hidden"> to </span><time>12:00</time></p><div><p class="sc-ev mb-0">Q4 pricing review</p><p class="sc-meta mb-0">Review · Ana, Leo +3 · Room Fjord</p></div></li>
      <li style="--cat:#0f766e"><p class="sc-time mb-0"><time>14:00</time><span class="visually-hidden"> to </span><time>14:30</time></p><div><p class="sc-ev mb-0">1:1 with Ana Petrova</p><p class="sc-meta mb-0">1:1 · Room Birch</p></div></li>
      <li style="--cat:#c2410c"><p class="sc-time mb-0"><time>16:00</time><span class="visually-hidden"> to </span><time>16:45</time></p><div><p class="sc-ev mb-0">Customer call: Larkspur Studio</p><p class="sc-meta mb-0">External · Failed payment follow-up</p></div></li>
  </ul>
</section></div>

<div class="col"><span class="lbl">To-do list with checkboxes</span>
<section class="card tw td" aria-labelledby="td-title" data-todo>
  <div class="tw-head"><h3 class="tw-title mb-0" id="td-title">My tasks</h3><p class="tw-sub mb-0">Ops board · this week</p></div>
  <div class="td-progress d-flex align-items-center gap-2"><div class="progress flex-grow-1" aria-hidden="true"><div class="progress-bar" style="width:42.86%" data-todo-bar></div></div><span aria-live="polite" data-todo-count>3 of 7 done</span></div>
  <ul class="td-list list-unstyled mb-0">
      <li class="form-check"><input class="form-check-input" type="checkbox" id="td-1" aria-describedby="td-1-m" checked><label class="form-check-label" for="td-1">Send Q3 invoice reminders</label><p class="td-meta mb-0" id="td-1-m"><span class="badge td-pri is-high">High</span>Billing · Today</p></li>
      <li class="form-check"><input class="form-check-input" type="checkbox" id="td-2" aria-describedby="td-2-m" checked><label class="form-check-label" for="td-2">Review onboarding email copy</label><p class="td-meta mb-0" id="td-2-m"><span class="badge td-pri is-med">Medium</span>Marketing · Today</p></li>
      <li class="form-check"><input class="form-check-input" type="checkbox" id="td-3" aria-describedby="td-3-m"><label class="form-check-label" for="td-3">Approve October payroll</label><p class="td-meta mb-0" id="td-3-m"><span class="badge td-pri is-high">High</span>Finance · Today</p></li>
      <li class="form-check"><input class="form-check-input" type="checkbox" id="td-4" aria-describedby="td-4-m"><label class="form-check-label" for="td-4">Reply to Larkspur Studio</label><p class="td-meta mb-0" id="td-4-m"><span class="badge td-pri is-high">High</span>Support · Today</p></li>
      <li class="form-check"><input class="form-check-input" type="checkbox" id="td-5" aria-describedby="td-5-m" checked><label class="form-check-label" for="td-5">Update churn dashboard filters</label><p class="td-meta mb-0" id="td-5-m"><span class="badge td-pri is-low">Low</span>Analytics · Yesterday</p></li>
      <li class="form-check"><input class="form-check-input" type="checkbox" id="td-6" aria-describedby="td-6-m"><label class="form-check-label" for="td-6">Slides for Q4 pricing review</label><p class="td-meta mb-0" id="td-6-m"><span class="badge td-pri is-med">Medium</span>Product · Mon, Oct 19</p></li>
      <li class="form-check"><input class="form-check-input" type="checkbox" id="td-7" aria-describedby="td-7-m"><label class="form-check-label" for="td-7">Book venue for team offsite</label><p class="td-meta mb-0" id="td-7-m"><span class="badge td-pri is-low">Low</span>Ops · Fri, Oct 23</p></li>
  </ul>
</section></div>

<div class="col"><span class="lbl">Upcoming deadlines</span>
<section class="card tw" aria-labelledby="dl-title">
  <div class="tw-head"><h3 class="tw-title mb-0" id="dl-title">Deadlines</h3><p class="tw-sub mb-0">Next 7 days · 6 open</p></div>
  <div class="dl">
    <h4 class="dl-group mb-0">Overdue</h4>
    <ul class="list-unstyled mb-0">
      <li class="d-flex align-items-start gap-2"><span class="dl-av" style="background:#0f766e" aria-hidden="true">JB</span><div><p class="dl-task mb-0">Renew SSL certificate for the shop</p><p class="dl-meta mb-0">Infrastructure · <span class="dl-over"><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 7v5M12 16h.01"/></svg>2 days overdue</span></p></div></li>
      <li class="d-flex align-items-start gap-2"><span class="dl-av" style="background:#1f5fae" aria-hidden="true">MO</span><div><p class="dl-task mb-0">Submit VAT return</p><p class="dl-meta mb-0">Finance · <span class="dl-over"><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 7v5M12 16h.01"/></svg>1 day overdue</span></p></div></li>
    </ul>
    <h4 class="dl-group mb-0">Today · Fri, Oct 16</h4>
    <ul class="list-unstyled mb-0">
      <li class="d-flex align-items-start gap-2"><span class="dl-av" style="background:#9333ea" aria-hidden="true">PN</span><div><p class="dl-task mb-0">Ship v4.19 release notes</p><p class="dl-meta mb-0">Product · <span class="dl-due"><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>Due 17:00</span></p></div></li>
      <li class="d-flex align-items-start gap-2"><span class="dl-av" style="background:#c2410c" aria-hidden="true">LM</span><div><p class="dl-task mb-0">Publish October newsletter</p><p class="dl-meta mb-0">Marketing · <span class="dl-due"><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>Due 18:00</span></p></div></li>
    </ul>
    <h4 class="dl-group mb-0">Mon, Oct 19</h4>
    <ul class="list-unstyled mb-0">
      <li class="d-flex align-items-start gap-2"><span class="dl-av" style="background:#1f5fae" aria-hidden="true">MO</span><div><p class="dl-task mb-0">Close Q3 books</p><p class="dl-meta mb-0">Finance · <span class="dl-due"><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>Due 12:00</span></p></div></li>
      <li class="d-flex align-items-start gap-2"><span class="dl-av" style="background:#0f766e" aria-hidden="true">JB</span><div><p class="dl-task mb-0">Security review: SSO rollout</p><p class="dl-meta mb-0">Infrastructure · <span class="dl-due"><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>Due 15:00</span></p></div></li>
    </ul>
  </div>
</section></div>
</div>
CSS 
/* Bootstrap .card, .form-check, .progress and .badge, plus a few rules for the week strip and agenda. */
.tw{--tw-ink:#0f172a;--tw-muted:#4b5768;--tw-line:#e2e8f0;--tw-accent:#1f5fae;
  --bs-card-border-color:var(--tw-line);--bs-card-border-radius:16px;color:var(--tw-ink);box-shadow:0 1px 2px rgba(15,23,42,.04),0 8px 24px rgba(15,23,42,.05);min-width:0}
.tw-head{padding:16px 18px 12px}
.tw-title{font-size:1rem;font-weight:700}
.tw-sub{font-size:.78rem;color:var(--tw-muted)}
.sc-week{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;padding:0 14px 14px;border-bottom:1px solid var(--tw-line)}
.sc-week li{gap:1px;padding:6px 0 4px;border-radius:10px;font-size:.7rem;color:var(--tw-muted)}
.sc-week b{font-size:.95rem;color:var(--tw-ink)}
.sc-week i{font-style:normal;height:10px;line-height:10px;letter-spacing:1px;color:var(--tw-accent)}
.sc-week li[aria-current]{background:var(--tw-accent);color:#fff}
.sc-week li[aria-current] b,.sc-week li[aria-current] i{color:#fff}
.sc-list{padding:6px 18px 14px}
.sc-list li{display:grid;grid-template-columns:52px 1fr;gap:10px;padding:10px 0 10px 12px;border-left:3px solid var(--cat);margin:8px 0;background:#f8fafc;border-radius:0 10px 10px 0}
.sc-time{display:flex;flex-direction:column;font-size:.8rem;font-weight:600;font-variant-numeric:tabular-nums}
.sc-time time+span+time{font-weight:400;color:var(--tw-muted)}
.sc-ev{font-size:.88rem;font-weight:600}
.sc-meta{font-size:.76rem;color:var(--tw-muted)}
.sc-now{margin-left:6px;padding:2px 7px;background:#dcfce7;color:#166534;font-size:.7rem;vertical-align:1px}
.td .progress{--bs-progress-height:6px;--bs-progress-bg:var(--tw-line);--bs-progress-bar-bg:#2a78d6;--bs-progress-border-radius:999px}
.td-progress{padding:0 18px 12px;font-size:.78rem;color:var(--tw-muted);font-variant-numeric:tabular-nums}
.td-list{padding:0 18px 10px}
.td-list .form-check{padding:11px 0 11px 32px;margin:0;border-top:1px solid var(--tw-line)}
.td-list .form-check-input{width:20px;height:20px;margin:1px 0 0 -32px;border:2px solid #64748b;border-radius:6px;cursor:pointer}
.td-list .form-check-input:checked{background-color:var(--tw-accent);border-color:var(--tw-accent)}
.td-list .form-check-input:focus{box-shadow:none;border-color:#64748b}
.td-list .form-check-input:checked:focus{border-color:var(--tw-accent)}
.td-list .form-check-input:focus-visible{outline:2px solid var(--tw-accent);outline-offset:2px}
.td-list .form-check-label{font-size:.88rem;font-weight:600;cursor:pointer;opacity:1}
.td-list .form-check-input:checked+.form-check-label{text-decoration:line-through;color:var(--tw-muted);font-weight:500}
.td-meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:.76rem;color:var(--tw-muted);margin-top:2px}
.td-pri{padding:2px 7px;border-radius:5px;font-size:.7rem}
.td-pri.is-high{color:#991b1b;background:#fee2e2}
.td-pri.is-med{color:#92400e;background:#fef3c7}
.td-pri.is-low{color:#334155;background:#e2e8f0}
.dl{padding:0 18px 12px}
.dl-group{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--tw-muted);padding:10px 0 4px}
.dl li{padding:9px 0;border-top:1px solid var(--tw-line)}
.dl-av{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;color:#fff;font-size:.68rem;font-weight:700}
.dl-task{font-size:.86rem;font-weight:600}
.dl-meta{font-size:.76rem;color:var(--tw-muted)}
.dl-over,.dl-due{display:inline-flex;align-items:center;gap:4px;font-weight:600}
.dl-over{color:#b91c1c}
.dl-over svg,.dl-due svg{width:13px;height:13px}
@media (prefers-reduced-motion:reduce){.td-list .form-check-input{transition:none}}
JavaScript 
// Keeps the "n of N done" line and the bar in step with the checkboxes.
document.querySelectorAll('[data-todo]').forEach(box => {
  const items = box.querySelectorAll('input[type="checkbox"]'), out = box.querySelector('[data-todo-count]'), bar = box.querySelector('[data-todo-bar]');
  const update = () => {
    const done = [...items].filter(i => i.checked).length;
    if (out) out.textContent = `${done} of ${items.length} done`;
    if (bar) bar.style.width = `${done / items.length * 100}%`;
  };
  items.forEach(i => i.addEventListener('change', update));
  update();
});

Tailwind 4 code

Requires: Tailwind CSS 4

HTML 
<div><span class="mb-4 block text-[.72rem] tracking-[.12em] text-[#4b5768] uppercase">Week strip with agenda</span>
<section class="min-w-0 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="sc-title">
  <div class="px-[18px] pt-4 pb-3"><h3 class="text-base font-bold" id="sc-title">Today’s schedule</h3><p class="text-[.78rem] text-[#4b5768]">Friday, October 16, 2026</p></div>
  <ol class="grid grid-cols-7 gap-1 border-b border-[#e2e8f0] px-3.5 pb-3.5" aria-label="Week of October 12">
      <li class="flex flex-col items-center gap-px rounded-[10px] pt-1.5 pb-1 text-[.7rem] text-[#4b5768] aria-[current]:bg-[#1f5fae] aria-[current]:text-white group"><span>Mon</span><b class="text-[.95rem] text-[#0f172a] tabular-nums group-aria-[current]:text-white">12</b><i class="h-2.5 leading-[10px] tracking-[1px] text-[#1f5fae] not-italic group-aria-[current]:text-white" aria-hidden="true">••</i><span class="sr-only">, 2 events</span></li>
      <li class="flex flex-col items-center gap-px rounded-[10px] pt-1.5 pb-1 text-[.7rem] text-[#4b5768] aria-[current]:bg-[#1f5fae] aria-[current]:text-white group"><span>Tue</span><b class="text-[.95rem] text-[#0f172a] tabular-nums group-aria-[current]:text-white">13</b><i class="h-2.5 leading-[10px] tracking-[1px] text-[#1f5fae] not-italic group-aria-[current]:text-white" aria-hidden="true">•</i><span class="sr-only">, 1 event</span></li>
      <li class="flex flex-col items-center gap-px rounded-[10px] pt-1.5 pb-1 text-[.7rem] text-[#4b5768] aria-[current]:bg-[#1f5fae] aria-[current]:text-white group"><span>Wed</span><b class="text-[.95rem] text-[#0f172a] tabular-nums group-aria-[current]:text-white">14</b><i class="h-2.5 leading-[10px] tracking-[1px] text-[#1f5fae] not-italic group-aria-[current]:text-white" aria-hidden="true">•••</i><span class="sr-only">, 3 events</span></li>
      <li class="flex flex-col items-center gap-px rounded-[10px] pt-1.5 pb-1 text-[.7rem] text-[#4b5768] aria-[current]:bg-[#1f5fae] aria-[current]:text-white group"><span>Thu</span><b class="text-[.95rem] text-[#0f172a] tabular-nums group-aria-[current]:text-white">15</b><i class="h-2.5 leading-[10px] tracking-[1px] text-[#1f5fae] not-italic group-aria-[current]:text-white" aria-hidden="true"></i></li>
      <li class="flex flex-col items-center gap-px rounded-[10px] pt-1.5 pb-1 text-[.7rem] text-[#4b5768] aria-[current]:bg-[#1f5fae] aria-[current]:text-white group" aria-current="date"><span>Fri</span><b class="text-[.95rem] text-[#0f172a] tabular-nums group-aria-[current]:text-white">16</b><i class="h-2.5 leading-[10px] tracking-[1px] text-[#1f5fae] not-italic group-aria-[current]:text-white" aria-hidden="true">•••</i><span class="sr-only">, 4 events</span></li>
      <li class="flex flex-col items-center gap-px rounded-[10px] pt-1.5 pb-1 text-[.7rem] text-[#4b5768] aria-[current]:bg-[#1f5fae] aria-[current]:text-white group"><span>Sat</span><b class="text-[.95rem] text-[#0f172a] tabular-nums group-aria-[current]:text-white">17</b><i class="h-2.5 leading-[10px] tracking-[1px] text-[#1f5fae] not-italic group-aria-[current]:text-white" aria-hidden="true"></i></li>
      <li class="flex flex-col items-center gap-px rounded-[10px] pt-1.5 pb-1 text-[.7rem] text-[#4b5768] aria-[current]:bg-[#1f5fae] aria-[current]:text-white group"><span>Sun</span><b class="text-[.95rem] text-[#0f172a] tabular-nums group-aria-[current]:text-white">18</b><i class="h-2.5 leading-[10px] tracking-[1px] text-[#1f5fae] not-italic group-aria-[current]:text-white" aria-hidden="true">•</i><span class="sr-only">, 1 event</span></li>
  </ol>
  <ul class="px-[18px] pt-1.5 pb-3.5">
      <li class="my-2 grid grid-cols-[52px_1fr] gap-2.5 rounded-r-[10px] border-l-3 border-[#2a78d6] bg-[#f8fafc] py-2.5 pl-3"><p class="flex flex-col text-[.8rem] font-semibold tabular-nums"><time>09:30</time><span class="sr-only"> to </span><time class="font-normal text-[#4b5768]">10:00</time></p><div><p class="text-[.88rem] font-semibold">Product standup <span class="ml-1.5 inline-block rounded-full bg-[#dcfce7] px-[7px] align-[1px] text-[.7rem] font-bold text-[#166534]">Now</span></p><p class="text-[.76rem] text-[#4b5768]">Meeting · Product team · Video call</p></div></li>
      <li class="my-2 grid grid-cols-[52px_1fr] gap-2.5 rounded-r-[10px] border-l-3 border-[#9333ea] bg-[#f8fafc] py-2.5 pl-3"><p class="flex flex-col text-[.8rem] font-semibold tabular-nums"><time>11:00</time><span class="sr-only"> to </span><time class="font-normal text-[#4b5768]">12:00</time></p><div><p class="text-[.88rem] font-semibold">Q4 pricing review</p><p class="text-[.76rem] text-[#4b5768]">Review · Ana, Leo +3 · Room Fjord</p></div></li>
      <li class="my-2 grid grid-cols-[52px_1fr] gap-2.5 rounded-r-[10px] border-l-3 border-[#0f766e] bg-[#f8fafc] py-2.5 pl-3"><p class="flex flex-col text-[.8rem] font-semibold tabular-nums"><time>14:00</time><span class="sr-only"> to </span><time class="font-normal text-[#4b5768]">14:30</time></p><div><p class="text-[.88rem] font-semibold">1:1 with Ana Petrova</p><p class="text-[.76rem] text-[#4b5768]">1:1 · Room Birch</p></div></li>
      <li class="my-2 grid grid-cols-[52px_1fr] gap-2.5 rounded-r-[10px] border-l-3 border-[#c2410c] bg-[#f8fafc] py-2.5 pl-3"><p class="flex flex-col text-[.8rem] font-semibold tabular-nums"><time>16:00</time><span class="sr-only"> to </span><time class="font-normal text-[#4b5768]">16:45</time></p><div><p class="text-[.88rem] font-semibold">Customer call: Larkspur Studio</p><p class="text-[.76rem] text-[#4b5768]">External · Failed payment follow-up</p></div></li>
  </ul>
</section></div>

<div><span class="mb-4 block text-[.72rem] tracking-[.12em] text-[#4b5768] uppercase">To-do list with checkboxes</span>
<section class="min-w-0 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="td-title" data-todo>
  <div class="px-[18px] pt-4 pb-3"><h3 class="text-base font-bold" id="td-title">My tasks</h3><p class="text-[.78rem] text-[#4b5768]">Ops board · this week</p></div>
  <div class="flex items-center gap-2.5 px-[18px] pb-3 text-[.78rem] text-[#4b5768] tabular-nums"><progress class="h-1.5 flex-1 appearance-none overflow-hidden rounded-full border-0 bg-[#e2e8f0] [&::-moz-progress-bar]:rounded-full [&::-moz-progress-bar]:bg-[#2a78d6] [&::-webkit-progress-bar]:bg-[#e2e8f0] [&::-webkit-progress-value]:rounded-full [&::-webkit-progress-value]:bg-[#2a78d6]" max="7" value="3" aria-hidden="true" data-todo-bar></progress><span aria-live="polite" data-todo-count>3 of 7 done</span></div>
  <ul class="px-[18px] pb-2.5">
      <li class="flex items-start gap-3 border-t border-[#e2e8f0] py-[11px]"><input class="peer mt-px grid size-5 flex-none cursor-pointer appearance-none place-items-center rounded-md border-2 border-[#64748b] bg-white transition-colors after:h-[5px] after:w-[9px] after:-translate-y-px after:-rotate-45 after:scale-0 after:border-b-2 after:border-l-2 after:border-white after:transition-transform checked:border-[#1f5fae] checked:bg-[#1f5fae] checked:after:scale-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#1f5fae] motion-reduce:transition-none motion-reduce:after:transition-none" type="checkbox" id="td-1" aria-describedby="td-1-m" checked><div class="peer-checked:[&_label]:font-medium peer-checked:[&_label]:text-[#4b5768] peer-checked:[&_label]:line-through"><label class="cursor-pointer text-[.88rem] font-semibold" for="td-1">Send Q3 invoice reminders</label><p class="mt-0.5 flex flex-wrap items-center gap-1.5 text-[.76rem] text-[#4b5768]" id="td-1-m"><span class="rounded-[5px] px-[7px] text-[.7rem] font-bold text-[#991b1b] bg-[#fee2e2]">High</span>Billing · Today</p></div></li>
      <li class="flex items-start gap-3 border-t border-[#e2e8f0] py-[11px]"><input class="peer mt-px grid size-5 flex-none cursor-pointer appearance-none place-items-center rounded-md border-2 border-[#64748b] bg-white transition-colors after:h-[5px] after:w-[9px] after:-translate-y-px after:-rotate-45 after:scale-0 after:border-b-2 after:border-l-2 after:border-white after:transition-transform checked:border-[#1f5fae] checked:bg-[#1f5fae] checked:after:scale-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#1f5fae] motion-reduce:transition-none motion-reduce:after:transition-none" type="checkbox" id="td-2" aria-describedby="td-2-m" checked><div class="peer-checked:[&_label]:font-medium peer-checked:[&_label]:text-[#4b5768] peer-checked:[&_label]:line-through"><label class="cursor-pointer text-[.88rem] font-semibold" for="td-2">Review onboarding email copy</label><p class="mt-0.5 flex flex-wrap items-center gap-1.5 text-[.76rem] text-[#4b5768]" id="td-2-m"><span class="rounded-[5px] px-[7px] text-[.7rem] font-bold text-[#92400e] bg-[#fef3c7]">Medium</span>Marketing · Today</p></div></li>
      <li class="flex items-start gap-3 border-t border-[#e2e8f0] py-[11px]"><input class="peer mt-px grid size-5 flex-none cursor-pointer appearance-none place-items-center rounded-md border-2 border-[#64748b] bg-white transition-colors after:h-[5px] after:w-[9px] after:-translate-y-px after:-rotate-45 after:scale-0 after:border-b-2 after:border-l-2 after:border-white after:transition-transform checked:border-[#1f5fae] checked:bg-[#1f5fae] checked:after:scale-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#1f5fae] motion-reduce:transition-none motion-reduce:after:transition-none" type="checkbox" id="td-3" aria-describedby="td-3-m"><div class="peer-checked:[&_label]:font-medium peer-checked:[&_label]:text-[#4b5768] peer-checked:[&_label]:line-through"><label class="cursor-pointer text-[.88rem] font-semibold" for="td-3">Approve October payroll</label><p class="mt-0.5 flex flex-wrap items-center gap-1.5 text-[.76rem] text-[#4b5768]" id="td-3-m"><span class="rounded-[5px] px-[7px] text-[.7rem] font-bold text-[#991b1b] bg-[#fee2e2]">High</span>Finance · Today</p></div></li>
      <li class="flex items-start gap-3 border-t border-[#e2e8f0] py-[11px]"><input class="peer mt-px grid size-5 flex-none cursor-pointer appearance-none place-items-center rounded-md border-2 border-[#64748b] bg-white transition-colors after:h-[5px] after:w-[9px] after:-translate-y-px after:-rotate-45 after:scale-0 after:border-b-2 after:border-l-2 after:border-white after:transition-transform checked:border-[#1f5fae] checked:bg-[#1f5fae] checked:after:scale-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#1f5fae] motion-reduce:transition-none motion-reduce:after:transition-none" type="checkbox" id="td-4" aria-describedby="td-4-m"><div class="peer-checked:[&_label]:font-medium peer-checked:[&_label]:text-[#4b5768] peer-checked:[&_label]:line-through"><label class="cursor-pointer text-[.88rem] font-semibold" for="td-4">Reply to Larkspur Studio</label><p class="mt-0.5 flex flex-wrap items-center gap-1.5 text-[.76rem] text-[#4b5768]" id="td-4-m"><span class="rounded-[5px] px-[7px] text-[.7rem] font-bold text-[#991b1b] bg-[#fee2e2]">High</span>Support · Today</p></div></li>
      <li class="flex items-start gap-3 border-t border-[#e2e8f0] py-[11px]"><input class="peer mt-px grid size-5 flex-none cursor-pointer appearance-none place-items-center rounded-md border-2 border-[#64748b] bg-white transition-colors after:h-[5px] after:w-[9px] after:-translate-y-px after:-rotate-45 after:scale-0 after:border-b-2 after:border-l-2 after:border-white after:transition-transform checked:border-[#1f5fae] checked:bg-[#1f5fae] checked:after:scale-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#1f5fae] motion-reduce:transition-none motion-reduce:after:transition-none" type="checkbox" id="td-5" aria-describedby="td-5-m" checked><div class="peer-checked:[&_label]:font-medium peer-checked:[&_label]:text-[#4b5768] peer-checked:[&_label]:line-through"><label class="cursor-pointer text-[.88rem] font-semibold" for="td-5">Update churn dashboard filters</label><p class="mt-0.5 flex flex-wrap items-center gap-1.5 text-[.76rem] text-[#4b5768]" id="td-5-m"><span class="rounded-[5px] px-[7px] text-[.7rem] font-bold text-[#334155] bg-[#e2e8f0]">Low</span>Analytics · Yesterday</p></div></li>
      <li class="flex items-start gap-3 border-t border-[#e2e8f0] py-[11px]"><input class="peer mt-px grid size-5 flex-none cursor-pointer appearance-none place-items-center rounded-md border-2 border-[#64748b] bg-white transition-colors after:h-[5px] after:w-[9px] after:-translate-y-px after:-rotate-45 after:scale-0 after:border-b-2 after:border-l-2 after:border-white after:transition-transform checked:border-[#1f5fae] checked:bg-[#1f5fae] checked:after:scale-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#1f5fae] motion-reduce:transition-none motion-reduce:after:transition-none" type="checkbox" id="td-6" aria-describedby="td-6-m"><div class="peer-checked:[&_label]:font-medium peer-checked:[&_label]:text-[#4b5768] peer-checked:[&_label]:line-through"><label class="cursor-pointer text-[.88rem] font-semibold" for="td-6">Slides for Q4 pricing review</label><p class="mt-0.5 flex flex-wrap items-center gap-1.5 text-[.76rem] text-[#4b5768]" id="td-6-m"><span class="rounded-[5px] px-[7px] text-[.7rem] font-bold text-[#92400e] bg-[#fef3c7]">Medium</span>Product · Mon, Oct 19</p></div></li>
      <li class="flex items-start gap-3 border-t border-[#e2e8f0] py-[11px]"><input class="peer mt-px grid size-5 flex-none cursor-pointer appearance-none place-items-center rounded-md border-2 border-[#64748b] bg-white transition-colors after:h-[5px] after:w-[9px] after:-translate-y-px after:-rotate-45 after:scale-0 after:border-b-2 after:border-l-2 after:border-white after:transition-transform checked:border-[#1f5fae] checked:bg-[#1f5fae] checked:after:scale-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#1f5fae] motion-reduce:transition-none motion-reduce:after:transition-none" type="checkbox" id="td-7" aria-describedby="td-7-m"><div class="peer-checked:[&_label]:font-medium peer-checked:[&_label]:text-[#4b5768] peer-checked:[&_label]:line-through"><label class="cursor-pointer text-[.88rem] font-semibold" for="td-7">Book venue for team offsite</label><p class="mt-0.5 flex flex-wrap items-center gap-1.5 text-[.76rem] text-[#4b5768]" id="td-7-m"><span class="rounded-[5px] px-[7px] text-[.7rem] font-bold text-[#334155] bg-[#e2e8f0]">Low</span>Ops · Fri, Oct 23</p></div></li>
  </ul>
</section></div>

<div><span class="mb-4 block text-[.72rem] tracking-[.12em] text-[#4b5768] uppercase">Upcoming deadlines</span>
<section class="min-w-0 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="dl-title">
  <div class="px-[18px] pt-4 pb-3"><h3 class="text-base font-bold" id="dl-title">Deadlines</h3><p class="text-[.78rem] text-[#4b5768]">Next 7 days · 6 open</p></div>
  <div class="px-[18px] pb-3">
    <h4 class="pt-2.5 pb-1 text-[.7rem] font-bold tracking-[.08em] text-[#4b5768] uppercase">Overdue</h4>
    <ul>
      <li class="flex items-start gap-2.5 border-t border-[#e2e8f0] py-[9px]"><span class="grid size-7 flex-none place-items-center rounded-full bg-[#0f766e] text-[.68rem] font-bold text-white" aria-hidden="true">JB</span><div><p class="text-[.86rem] font-semibold">Renew SSL certificate for the shop</p><p class="text-[.76rem] text-[#4b5768]">Infrastructure · <span class="inline-flex items-center gap-1 font-semibold text-[#b91c1c]"><svg class="size-[13px]" 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 7v5M12 16h.01"/></svg>2 days overdue</span></p></div></li>
      <li class="flex items-start gap-2.5 border-t border-[#e2e8f0] py-[9px]"><span class="grid size-7 flex-none place-items-center rounded-full bg-[#1f5fae] text-[.68rem] font-bold text-white" aria-hidden="true">MO</span><div><p class="text-[.86rem] font-semibold">Submit VAT return</p><p class="text-[.76rem] text-[#4b5768]">Finance · <span class="inline-flex items-center gap-1 font-semibold text-[#b91c1c]"><svg class="size-[13px]" 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 7v5M12 16h.01"/></svg>1 day overdue</span></p></div></li>
    </ul>
    <h4 class="pt-2.5 pb-1 text-[.7rem] font-bold tracking-[.08em] text-[#4b5768] uppercase">Today · Fri, Oct 16</h4>
    <ul>
      <li class="flex items-start gap-2.5 border-t border-[#e2e8f0] py-[9px]"><span class="grid size-7 flex-none place-items-center rounded-full bg-[#9333ea] text-[.68rem] font-bold text-white" aria-hidden="true">PN</span><div><p class="text-[.86rem] font-semibold">Ship v4.19 release notes</p><p class="text-[.76rem] text-[#4b5768]">Product · <span class="inline-flex items-center gap-1 font-semibold"><svg class="size-[13px]" 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>Due 17:00</span></p></div></li>
      <li class="flex items-start gap-2.5 border-t border-[#e2e8f0] py-[9px]"><span class="grid size-7 flex-none place-items-center rounded-full bg-[#c2410c] text-[.68rem] font-bold text-white" aria-hidden="true">LM</span><div><p class="text-[.86rem] font-semibold">Publish October newsletter</p><p class="text-[.76rem] text-[#4b5768]">Marketing · <span class="inline-flex items-center gap-1 font-semibold"><svg class="size-[13px]" 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>Due 18:00</span></p></div></li>
    </ul>
    <h4 class="pt-2.5 pb-1 text-[.7rem] font-bold tracking-[.08em] text-[#4b5768] uppercase">Mon, Oct 19</h4>
    <ul>
      <li class="flex items-start gap-2.5 border-t border-[#e2e8f0] py-[9px]"><span class="grid size-7 flex-none place-items-center rounded-full bg-[#1f5fae] text-[.68rem] font-bold text-white" aria-hidden="true">MO</span><div><p class="text-[.86rem] font-semibold">Close Q3 books</p><p class="text-[.76rem] text-[#4b5768]">Finance · <span class="inline-flex items-center gap-1 font-semibold"><svg class="size-[13px]" 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>Due 12:00</span></p></div></li>
      <li class="flex items-start gap-2.5 border-t border-[#e2e8f0] py-[9px]"><span class="grid size-7 flex-none place-items-center rounded-full bg-[#0f766e] text-[.68rem] font-bold text-white" aria-hidden="true">JB</span><div><p class="text-[.86rem] font-semibold">Security review: SSO rollout</p><p class="text-[.76rem] text-[#4b5768]">Infrastructure · <span class="inline-flex items-center gap-1 font-semibold"><svg class="size-[13px]" 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>Due 15:00</span></p></div></li>
    </ul>
  </div>
</section></div>
JavaScript 
// Keeps the "n of N done" line and the bar in step with the checkboxes.
document.querySelectorAll('[data-todo]').forEach(box => {
  const items = box.querySelectorAll('input[type="checkbox"]'), out = box.querySelector('[data-todo-count]'), bar = box.querySelector('[data-todo-bar]');
  const update = () => {
    const done = [...items].filter(i => i.checked).length;
    if (out) out.textContent = `${done} of ${items.length} done`;
    if (bar) { bar.max = items.length; bar.value = done; }
  };
  items.forEach(i => i.addEventListener('change', update));
  update();
});

About this set

Three widgets for planning a working day. The week strip with agenda shows Monday to Sunday with today highlighted and dots for how busy each day is, followed by today’s four meetings, each with a start and end time, a coloured bar, a category word and a Now badge on the one in progress. The to-do list has seven tasks as real checkboxes with labels, priority tags written as High, Medium and Low, a project and a due date; finished tasks are struck through, and a short script keeps the 3 of 7 done count and its bar in step. Upcoming deadlines groups six tasks under Overdue, Today and Monday, with assignee initials and an icon-and-word due line that turns red when a task is late. Use the agenda on a home dashboard, the to-do list in a side column and the deadlines list for team leads. Today is marked with aria-current=”date”, and the day dots have hidden text such as 4 events, so nothing depends on colour or dots alone.

What’s included

  • Week strip with today marked and per-day event dots
  • Agenda with times, category bars and a Now badge
  • To-do list built on real checkboxes and labels
  • Live done count and progress bar
  • Deadlines grouped by day with overdue warnings
  • Bootstrap version uses .form-check, .progress and .badge

Accessibility

Checkboxes have labels and are described by their priority, project and due date; their border meets 3:1 contrast and they show a focus outline. The done count is a polite live region. Today carries aria-current="date", day dots have hidden event counts, event times read as "09:30 to 10:00", and overdue items say so in words. Check transitions stop under prefers-reduced-motion.

Customise it

Set --tw-accent for today, checked boxes and dots, --tw-box for the checkbox border, and --cat on each agenda item for its category bar. In Bootstrap restyle .form-check-input inside .td-list; in Tailwind change the checked: and aria-[current]: classes.