Open demo

CSS code

HTML 
<div class="avail">
  <h2>When are you free?</h2>
  <p class="sub">Tick the hours you can take a call. Everyone sees the overlap.</p>
  <table class="g">
    <caption class="sr-only">Weekly availability, one-hour slots from 09:00 to 15:00</caption>
    <thead><tr><td></td><th scope="col"><span aria-hidden="true">Mon</span><span class="sr-only">Monday</span></th><th scope="col"><span aria-hidden="true">Tue</span><span class="sr-only">Tuesday</span></th><th scope="col"><span aria-hidden="true">Wed</span><span class="sr-only">Wednesday</span></th><th scope="col"><span aria-hidden="true">Thu</span><span class="sr-only">Thursday</span></th><th scope="col"><span aria-hidden="true">Fri</span><span class="sr-only">Friday</span></th><th scope="col"><span aria-hidden="true">Sat</span><span class="sr-only">Saturday</span></th><th scope="col"><span aria-hidden="true">Sun</span><span class="sr-only">Sunday</span></th></tr></thead>
    <tbody>
      <tr><th scope="row">09:00</th><td><label><input type="checkbox" name="available" value="mon 09:00" aria-label="Monday, 09:00"><span class="box"></span></label></td><td><label><input type="checkbox" name="available" value="tue 09:00" aria-label="Tuesday, 09:00"><span class="box"></span></label></td><td><label><input type="checkbox" name="available" value="wed 09:00" aria-label="Wednesday, 09:00"><span class="box"></span></label></td><td><label><input type="checkbox" name="available" value="thu 09:00" aria-label="Thursday, 09:00"><span class="box"></span></label></td><td><label><input type="checkbox" name="available" value="fri 09:00" aria-label="Friday, 09:00"><span class="box"></span></label></td><td><label><input type="checkbox" name="available" value="sat 09:00" aria-label="Saturday, 09:00"><span class="box"></span></label></td><td><label><input type="checkbox" name="available" value="sun 09:00" aria-label="Sunday, 09:00"><span class="box"></span></label></td></tr>
      <tr><th scope="row">10:00</th><td><label><input type="checkbox" name="available" value="mon 10:00" aria-label="Monday, 10:00" checked><span class="box"></span></label></td><td><label><input type="checkbox" name="available" value="tue 10:00" aria-label="Tuesday, 10:00" checked><span class="box"></span></label></td><td><label><input type="checkbox" name="available" value="wed 10:00" aria-label="Wednesday, 10:00" checked><span class="box"></span></label></td><td><label><input type="checkbox" name="available" value="thu 10:00" aria-label="Thursday, 10:00" checked><span class="box"></span></label></td><td><label><input type="checkbox" name="available" value="fri 10:00" aria-label="Friday, 10:00" checked><span class="box"></span></label></td><td><label><input type="checkbox" name="available" value="sat 10:00" aria-label="Saturday, 10:00" checked><span class="box"></span></label></td><td><label><input type="checkbox" name="available" value="sun 10:00" aria-label="Sunday, 10:00"><span class="box"></span></label></td></tr>
      <tr><th scope="row">11:00</th><td><label><input type="checkbox" name="available" value="mon 11:00" aria-label="Monday, 11:00" checked><span class="box"></span></label></td><td><label><input type="checkbox" name="available" value="tue 11:00" aria-label="Tuesday, 11:00" checked><span class="box"></span></label></td><td><label><input type="checkbox" name="available" value="wed 11:00" aria-label="Wednesday, 11:00" checked><span class="box"></span></label></td><td><label><input type="checkbox" name="available" value="thu 11:00" aria-label="Thursday, 11:00" checked><span class="box"></span></label></td><td><label><input type="checkbox" name="available" value="fri 11:00" aria-label="Friday, 11:00" checked><span class="box"></span></label></td><td><label><input type="checkbox" name="available" value="sat 11:00" aria-label="Saturday, 11:00"><span class="box"></span></label></td><td><label><input type="checkbox" name="available" value="sun 11:00" aria-label="Sunday, 11:00"><span class="box"></span></label></td></tr>
      <tr><th scope="row">12:00</th><td><label><input type="checkbox" name="available" value="mon 12:00" aria-label="Monday, 12:00" checked><span class="box"></span></label></td><td><label><input type="checkbox" name="available" value="tue 12:00" aria-label="Tuesday, 12:00" checked><span class="box"></span></label></td><td><label><input type="checkbox" name="available" value="wed 12:00" aria-label="Wednesday, 12:00" checked><span class="box"></span></label></td><td><label><input type="checkbox" name="available" value="thu 12:00" aria-label="Thursday, 12:00" checked><span class="box"></span></label></td><td><label><input type="checkbox" name="available" value="fri 12:00" aria-label="Friday, 12:00" checked><span class="box"></span></label></td><td><label><input type="checkbox" name="available" value="sat 12:00" aria-label="Saturday, 12:00"><span class="box"></span></label></td><td><label><input type="checkbox" name="available" value="sun 12:00" aria-label="Sunday, 12:00"><span class="box"></span></label></td></tr>
      <tr><th scope="row">13:00</th><td><label><input type="checkbox" name="available" value="mon 13:00" aria-label="Monday, 13:00"><span class="box"></span></label></td><td><label><input type="checkbox" name="available" value="tue 13:00" aria-label="Tuesday, 13:00"><span class="box"></span></label></td><td><label><input type="checkbox" name="available" value="wed 13:00" aria-label="Wednesday, 13:00"><span class="box"></span></label></td><td><label><input type="checkbox" name="available" value="thu 13:00" aria-label="Thursday, 13:00"><span class="box"></span></label></td><td><label><input type="checkbox" name="available" value="fri 13:00" aria-label="Friday, 13:00"><span class="box"></span></label></td><td><label><input type="checkbox" name="available" value="sat 13:00" aria-label="Saturday, 13:00"><span class="box"></span></label></td><td><label><input type="checkbox" name="available" value="sun 13:00" aria-label="Sunday, 13:00"><span class="box"></span></label></td></tr>
      <tr><th scope="row">14:00</th><td><label><input type="checkbox" name="available" value="mon 14:00" aria-label="Monday, 14:00"><span class="box"></span></label></td><td><label><input type="checkbox" name="available" value="tue 14:00" aria-label="Tuesday, 14:00"><span class="box"></span></label></td><td><label><input type="checkbox" name="available" value="wed 14:00" aria-label="Wednesday, 14:00"><span class="box"></span></label></td><td><label><input type="checkbox" name="available" value="thu 14:00" aria-label="Thursday, 14:00"><span class="box"></span></label></td><td><label><input type="checkbox" name="available" value="fri 14:00" aria-label="Friday, 14:00"><span class="box"></span></label></td><td><label><input type="checkbox" name="available" value="sat 14:00" aria-label="Saturday, 14:00"><span class="box"></span></label></td><td><label><input type="checkbox" name="available" value="sun 14:00" aria-label="Sunday, 14:00"><span class="box"></span></label></td></tr>
    </tbody>
  </table>
  <div class="foot">
    <ul class="key"><li><span class="box on" aria-hidden="true"></span> Available</li><li><span class="box" aria-hidden="true"></span> Busy</li></ul>
    <button type="button">Save availability</button>
  </div>
</div>
CSS 
/* Availability picker: a table of real checkboxes, days across and hours down.
   Each checkbox is visually hidden; the box after it shows the state with colour and a tick. */
.avail{--av-accent:#6d28d9;--av-muted:#5f6b7c;--av-off:#f2f4f8;--av-ring:#8692a5;
  box-sizing:border-box;width:100%;max-width:620px;padding:22px 24px 24px;background:#fff;border-radius:16px;
  box-shadow:0 14px 34px -18px rgba(18,24,40,.25)}
.avail h2{font-size:.98rem;margin:0 0 2px}
.avail .sub{font-size:.79rem;color:var(--av-muted);margin:0 0 18px}
.avail table{width:100%;border-collapse:separate;border-spacing:3px;table-layout:fixed}
.avail thead th{font-size:.66rem;font-weight:800;color:var(--av-muted);text-transform:uppercase;text-align:center;padding:0 0 5px}
.avail thead td:first-child{width:56px}
.avail tbody th{font-size:.7rem;font-weight:400;color:var(--av-muted);text-align:right;padding:0 8px 0 0}
.avail td{padding:0}
.avail label{display:block;position:relative;cursor:pointer}
.avail input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.avail .box{height:26px;border-radius:5px;background:var(--av-off);box-shadow:inset 0 0 0 1px var(--av-ring);display:grid;place-items:center;
  transition:background .12s}
.avail .box::after{content:"";width:9px;height:4px;border:solid #fff;border-width:0 0 2px 2px;transform:translateY(-1px) rotate(-45deg);opacity:0}
.avail label:hover .box{background:#e3e8f0}
.avail input:checked + .box{background:var(--av-accent);box-shadow:none}
.avail input:checked + .box::after{opacity:1}
.avail input:focus-visible + .box{outline:2px solid var(--av-accent);outline-offset:1px}
.avail .foot{display:flex;justify-content:space-between;align-items:center;margin-top:18px;flex-wrap:wrap;gap:10px}
.avail .key{display:flex;gap:14px;margin:0;padding:0;list-style:none;font-size:.75rem;color:var(--av-muted)}
.avail .key li{display:flex;align-items:center;gap:6px}
.avail .key .box{width:14px;height:14px;border-radius:3px}
.avail .key .box::after{width:6px;height:3px;border-width:0 0 1.5px 1.5px}
.avail .key .on{background:var(--av-accent);box-shadow:none}
.avail .key .on::after{opacity:1}
.avail button{border:0;background:var(--av-accent);color:#fff;font:inherit;font-size:.82rem;font-weight:700;padding:9px 18px;border-radius:9px;cursor:pointer}
.avail button:hover{background:#5b21b6}
.avail button:focus-visible{outline:2px solid var(--av-accent);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.avail .box{transition:none}}
.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="avail card w-100">
  <h2 class="fw-bold mb-1" style="font-size:.98rem">When are you free?</h2>
  <p class="mb-3" style="font-size:.79rem;color:var(--av-muted)">Tick the hours you can take a call. Everyone sees the overlap.</p>
  <table class="table mb-0">
    <caption class="visually-hidden">Weekly availability, one-hour slots from 09:00 to 15:00</caption>
    <thead><tr><td></td><th scope="col"><span aria-hidden="true">Mon</span><span class="visually-hidden">Monday</span></th><th scope="col"><span aria-hidden="true">Tue</span><span class="visually-hidden">Tuesday</span></th><th scope="col"><span aria-hidden="true">Wed</span><span class="visually-hidden">Wednesday</span></th><th scope="col"><span aria-hidden="true">Thu</span><span class="visually-hidden">Thursday</span></th><th scope="col"><span aria-hidden="true">Fri</span><span class="visually-hidden">Friday</span></th><th scope="col"><span aria-hidden="true">Sat</span><span class="visually-hidden">Saturday</span></th><th scope="col"><span aria-hidden="true">Sun</span><span class="visually-hidden">Sunday</span></th></tr></thead>
    <tbody>
      <tr><th scope="row">09:00</th><td><input type="checkbox" class="btn-check" id="av-mon-09" name="available" value="mon 09:00" aria-label="Monday, 09:00"><label class="btn btn-slot" for="av-mon-09"></label></td><td><input type="checkbox" class="btn-check" id="av-tue-09" name="available" value="tue 09:00" aria-label="Tuesday, 09:00"><label class="btn btn-slot" for="av-tue-09"></label></td><td><input type="checkbox" class="btn-check" id="av-wed-09" name="available" value="wed 09:00" aria-label="Wednesday, 09:00"><label class="btn btn-slot" for="av-wed-09"></label></td><td><input type="checkbox" class="btn-check" id="av-thu-09" name="available" value="thu 09:00" aria-label="Thursday, 09:00"><label class="btn btn-slot" for="av-thu-09"></label></td><td><input type="checkbox" class="btn-check" id="av-fri-09" name="available" value="fri 09:00" aria-label="Friday, 09:00"><label class="btn btn-slot" for="av-fri-09"></label></td><td><input type="checkbox" class="btn-check" id="av-sat-09" name="available" value="sat 09:00" aria-label="Saturday, 09:00"><label class="btn btn-slot" for="av-sat-09"></label></td><td><input type="checkbox" class="btn-check" id="av-sun-09" name="available" value="sun 09:00" aria-label="Sunday, 09:00"><label class="btn btn-slot" for="av-sun-09"></label></td></tr>
      <tr><th scope="row">10:00</th><td><input type="checkbox" class="btn-check" id="av-mon-10" name="available" value="mon 10:00" aria-label="Monday, 10:00" checked><label class="btn btn-slot" for="av-mon-10"></label></td><td><input type="checkbox" class="btn-check" id="av-tue-10" name="available" value="tue 10:00" aria-label="Tuesday, 10:00" checked><label class="btn btn-slot" for="av-tue-10"></label></td><td><input type="checkbox" class="btn-check" id="av-wed-10" name="available" value="wed 10:00" aria-label="Wednesday, 10:00" checked><label class="btn btn-slot" for="av-wed-10"></label></td><td><input type="checkbox" class="btn-check" id="av-thu-10" name="available" value="thu 10:00" aria-label="Thursday, 10:00" checked><label class="btn btn-slot" for="av-thu-10"></label></td><td><input type="checkbox" class="btn-check" id="av-fri-10" name="available" value="fri 10:00" aria-label="Friday, 10:00" checked><label class="btn btn-slot" for="av-fri-10"></label></td><td><input type="checkbox" class="btn-check" id="av-sat-10" name="available" value="sat 10:00" aria-label="Saturday, 10:00" checked><label class="btn btn-slot" for="av-sat-10"></label></td><td><input type="checkbox" class="btn-check" id="av-sun-10" name="available" value="sun 10:00" aria-label="Sunday, 10:00"><label class="btn btn-slot" for="av-sun-10"></label></td></tr>
      <tr><th scope="row">11:00</th><td><input type="checkbox" class="btn-check" id="av-mon-11" name="available" value="mon 11:00" aria-label="Monday, 11:00" checked><label class="btn btn-slot" for="av-mon-11"></label></td><td><input type="checkbox" class="btn-check" id="av-tue-11" name="available" value="tue 11:00" aria-label="Tuesday, 11:00" checked><label class="btn btn-slot" for="av-tue-11"></label></td><td><input type="checkbox" class="btn-check" id="av-wed-11" name="available" value="wed 11:00" aria-label="Wednesday, 11:00" checked><label class="btn btn-slot" for="av-wed-11"></label></td><td><input type="checkbox" class="btn-check" id="av-thu-11" name="available" value="thu 11:00" aria-label="Thursday, 11:00" checked><label class="btn btn-slot" for="av-thu-11"></label></td><td><input type="checkbox" class="btn-check" id="av-fri-11" name="available" value="fri 11:00" aria-label="Friday, 11:00" checked><label class="btn btn-slot" for="av-fri-11"></label></td><td><input type="checkbox" class="btn-check" id="av-sat-11" name="available" value="sat 11:00" aria-label="Saturday, 11:00"><label class="btn btn-slot" for="av-sat-11"></label></td><td><input type="checkbox" class="btn-check" id="av-sun-11" name="available" value="sun 11:00" aria-label="Sunday, 11:00"><label class="btn btn-slot" for="av-sun-11"></label></td></tr>
      <tr><th scope="row">12:00</th><td><input type="checkbox" class="btn-check" id="av-mon-12" name="available" value="mon 12:00" aria-label="Monday, 12:00" checked><label class="btn btn-slot" for="av-mon-12"></label></td><td><input type="checkbox" class="btn-check" id="av-tue-12" name="available" value="tue 12:00" aria-label="Tuesday, 12:00" checked><label class="btn btn-slot" for="av-tue-12"></label></td><td><input type="checkbox" class="btn-check" id="av-wed-12" name="available" value="wed 12:00" aria-label="Wednesday, 12:00" checked><label class="btn btn-slot" for="av-wed-12"></label></td><td><input type="checkbox" class="btn-check" id="av-thu-12" name="available" value="thu 12:00" aria-label="Thursday, 12:00" checked><label class="btn btn-slot" for="av-thu-12"></label></td><td><input type="checkbox" class="btn-check" id="av-fri-12" name="available" value="fri 12:00" aria-label="Friday, 12:00" checked><label class="btn btn-slot" for="av-fri-12"></label></td><td><input type="checkbox" class="btn-check" id="av-sat-12" name="available" value="sat 12:00" aria-label="Saturday, 12:00"><label class="btn btn-slot" for="av-sat-12"></label></td><td><input type="checkbox" class="btn-check" id="av-sun-12" name="available" value="sun 12:00" aria-label="Sunday, 12:00"><label class="btn btn-slot" for="av-sun-12"></label></td></tr>
      <tr><th scope="row">13:00</th><td><input type="checkbox" class="btn-check" id="av-mon-13" name="available" value="mon 13:00" aria-label="Monday, 13:00"><label class="btn btn-slot" for="av-mon-13"></label></td><td><input type="checkbox" class="btn-check" id="av-tue-13" name="available" value="tue 13:00" aria-label="Tuesday, 13:00"><label class="btn btn-slot" for="av-tue-13"></label></td><td><input type="checkbox" class="btn-check" id="av-wed-13" name="available" value="wed 13:00" aria-label="Wednesday, 13:00"><label class="btn btn-slot" for="av-wed-13"></label></td><td><input type="checkbox" class="btn-check" id="av-thu-13" name="available" value="thu 13:00" aria-label="Thursday, 13:00"><label class="btn btn-slot" for="av-thu-13"></label></td><td><input type="checkbox" class="btn-check" id="av-fri-13" name="available" value="fri 13:00" aria-label="Friday, 13:00"><label class="btn btn-slot" for="av-fri-13"></label></td><td><input type="checkbox" class="btn-check" id="av-sat-13" name="available" value="sat 13:00" aria-label="Saturday, 13:00"><label class="btn btn-slot" for="av-sat-13"></label></td><td><input type="checkbox" class="btn-check" id="av-sun-13" name="available" value="sun 13:00" aria-label="Sunday, 13:00"><label class="btn btn-slot" for="av-sun-13"></label></td></tr>
      <tr><th scope="row">14:00</th><td><input type="checkbox" class="btn-check" id="av-mon-14" name="available" value="mon 14:00" aria-label="Monday, 14:00"><label class="btn btn-slot" for="av-mon-14"></label></td><td><input type="checkbox" class="btn-check" id="av-tue-14" name="available" value="tue 14:00" aria-label="Tuesday, 14:00"><label class="btn btn-slot" for="av-tue-14"></label></td><td><input type="checkbox" class="btn-check" id="av-wed-14" name="available" value="wed 14:00" aria-label="Wednesday, 14:00"><label class="btn btn-slot" for="av-wed-14"></label></td><td><input type="checkbox" class="btn-check" id="av-thu-14" name="available" value="thu 14:00" aria-label="Thursday, 14:00"><label class="btn btn-slot" for="av-thu-14"></label></td><td><input type="checkbox" class="btn-check" id="av-fri-14" name="available" value="fri 14:00" aria-label="Friday, 14:00"><label class="btn btn-slot" for="av-fri-14"></label></td><td><input type="checkbox" class="btn-check" id="av-sat-14" name="available" value="sat 14:00" aria-label="Saturday, 14:00"><label class="btn btn-slot" for="av-sat-14"></label></td><td><input type="checkbox" class="btn-check" id="av-sun-14" name="available" value="sun 14:00" aria-label="Sunday, 14:00"><label class="btn btn-slot" for="av-sun-14"></label></td></tr>
    </tbody>
  </table>
  <div class="d-flex flex-wrap justify-content-between align-items-center gap-2" style="margin-top:18px">
    <ul class="key list-unstyled d-flex m-0" style="gap:14px;font-size:.75rem;color:var(--av-muted)"><li class="d-flex align-items-center gap-2"><span class="box on" aria-hidden="true"></span> Available</li><li class="d-flex align-items-center gap-2"><span class="box" aria-hidden="true"></span> Busy</li></ul>
    <button type="button" class="btn btn-save">Save availability</button>
  </div>
</div>
CSS 
/* Bootstrap card, .table and .btn-check + .btn for every slot; the tick is drawn with ::after. */
.avail{--av-accent:#6d28d9;--av-muted:#5f6b7c;--av-off:#f2f4f8;--av-ring:#8692a5;
  max-width:620px;padding:22px 24px 24px;border:0;border-radius:16px;box-shadow:0 14px 34px -18px rgba(18,24,40,.25)}
.avail .table{--bs-table-bg:transparent;border-collapse:separate;border-spacing:3px;table-layout:fixed}
.avail .table>:not(caption)>*>*{padding:0;border:0}
.avail .table thead th{font-size:.66rem;font-weight:800;color:var(--av-muted);text-transform:uppercase;text-align:center;padding-bottom:5px}
.avail .table thead td:first-child{width:56px}
.avail .table tbody th{font-size:.7rem;font-weight:400;color:var(--av-muted);text-align:right;padding-right:8px;vertical-align:middle}
.avail .btn-slot{--bs-btn-padding-x:0;--bs-btn-padding-y:0;--bs-btn-border-width:0;--bs-btn-border-radius:5px;--bs-btn-bg:var(--av-off);
  --bs-btn-hover-bg:#e3e8f0;--bs-btn-active-bg:var(--av-accent);
  display:grid;place-items:center;width:100%;height:26px;box-shadow:inset 0 0 0 1px var(--av-ring);transition:background-color .12s}
.avail .btn-slot::after,.avail .key .box::after{content:"";width:9px;height:4px;border:solid #fff;border-width:0 0 2px 2px;transform:translateY(-1px) rotate(-45deg);opacity:0}
.avail .btn-check:checked + .btn-slot{box-shadow:none}
.avail .btn-check:checked + .btn-slot::after{opacity:1}
.avail .btn-check:focus-visible + .btn-slot{box-shadow:none;outline:2px solid var(--av-accent);outline-offset:1px}
.avail .key .box{width:14px;height:14px;border-radius:3px;display:grid;place-items:center;background:var(--av-off);box-shadow:inset 0 0 0 1px var(--av-ring)}
.avail .key .box::after{width:6px;height:3px;border-width:0 0 1.5px 1.5px}
.avail .key .on{background:var(--av-accent);box-shadow:none}
.avail .key .on::after{opacity:1}
.avail .btn-save{--bs-btn-bg:var(--av-accent);--bs-btn-border-color:var(--av-accent);--bs-btn-color:#fff;--bs-btn-hover-bg:#5b21b6;--bs-btn-hover-border-color:#5b21b6;--bs-btn-hover-color:#fff;
  --bs-btn-font-size:.82rem;--bs-btn-font-weight:700;--bs-btn-padding-x:18px;--bs-btn-padding-y:9px;--bs-btn-border-radius:9px;line-height:normal}
.avail .btn-save:focus-visible{box-shadow:none;outline:2px solid var(--av-accent);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.avail .btn{transition:none}}

Tailwind 4 code

Requires: Tailwind CSS 4

HTML 
<div class="avail w-full max-w-[620px] rounded-2xl bg-white px-6 pt-[22px] pb-6 shadow-[0_14px_34px_-18px_rgba(18,24,40,.25)]">
  <h2 class="mb-0.5 text-[.98rem] font-bold">When are you free?</h2>
  <p class="mb-[18px] text-[.79rem] text-av-muted">Tick the hours you can take a call. Everyone sees the overlap.</p>
  <table class="w-full table-fixed border-separate border-spacing-[3px]">
    <caption class="sr-only">Weekly availability, one-hour slots from 09:00 to 15:00</caption>
    <thead><tr><td class="p-0 first:w-14"></td><th scope="col" class="pb-[5px] text-center text-[.66rem] font-extrabold text-av-muted uppercase"><span aria-hidden="true">Mon</span><span class="sr-only">Monday</span></th><th scope="col" class="pb-[5px] text-center text-[.66rem] font-extrabold text-av-muted uppercase"><span aria-hidden="true">Tue</span><span class="sr-only">Tuesday</span></th><th scope="col" class="pb-[5px] text-center text-[.66rem] font-extrabold text-av-muted uppercase"><span aria-hidden="true">Wed</span><span class="sr-only">Wednesday</span></th><th scope="col" class="pb-[5px] text-center text-[.66rem] font-extrabold text-av-muted uppercase"><span aria-hidden="true">Thu</span><span class="sr-only">Thursday</span></th><th scope="col" class="pb-[5px] text-center text-[.66rem] font-extrabold text-av-muted uppercase"><span aria-hidden="true">Fri</span><span class="sr-only">Friday</span></th><th scope="col" class="pb-[5px] text-center text-[.66rem] font-extrabold text-av-muted uppercase"><span aria-hidden="true">Sat</span><span class="sr-only">Saturday</span></th><th scope="col" class="pb-[5px] text-center text-[.66rem] font-extrabold text-av-muted uppercase"><span aria-hidden="true">Sun</span><span class="sr-only">Sunday</span></th></tr></thead>
    <tbody>
      <tr><th scope="row" class="pr-2 text-right text-[.7rem] font-normal text-av-muted">09:00</th><td class="p-0 first:w-14"><label class="group relative block cursor-pointer"><input type="checkbox" class="peer sr-only" name="available" value="mon 09:00" aria-label="Monday, 09:00"><span class="grid h-[26px] place-items-center rounded-[5px] bg-av-off shadow-[inset_0_0_0_1px_var(--color-av-ring)] transition-[background-color] duration-[120ms] group-hover:bg-[#e3e8f0] peer-checked:bg-av-accent peer-checked:shadow-none peer-focus-visible:outline-2 peer-focus-visible:outline-offset-1 peer-focus-visible:outline-av-accent motion-reduce:transition-none after:h-1 after:w-[9px] after:-translate-y-px after:-rotate-45 after:border-0 after:border-b-2 after:border-l-2 after:border-solid after:border-white after:content-[''] after:opacity-0 peer-checked:after:opacity-100"></span></label></td><td class="p-0 first:w-14"><label class="group relative block cursor-pointer"><input type="checkbox" class="peer sr-only" name="available" value="tue 09:00" aria-label="Tuesday, 09:00"><span class="grid h-[26px] place-items-center rounded-[5px] bg-av-off shadow-[inset_0_0_0_1px_var(--color-av-ring)] transition-[background-color] duration-[120ms] group-hover:bg-[#e3e8f0] peer-checked:bg-av-accent peer-checked:shadow-none peer-focus-visible:outline-2 peer-focus-visible:outline-offset-1 peer-focus-visible:outline-av-accent motion-reduce:transition-none after:h-1 after:w-[9px] after:-translate-y-px after:-rotate-45 after:border-0 after:border-b-2 after:border-l-2 after:border-solid after:border-white after:content-[''] after:opacity-0 peer-checked:after:opacity-100"></span></label></td><td class="p-0 first:w-14"><label class="group relative block cursor-pointer"><input type="checkbox" class="peer sr-only" name="available" value="wed 09:00" aria-label="Wednesday, 09:00"><span class="grid h-[26px] place-items-center rounded-[5px] bg-av-off shadow-[inset_0_0_0_1px_var(--color-av-ring)] transition-[background-color] duration-[120ms] group-hover:bg-[#e3e8f0] peer-checked:bg-av-accent peer-checked:shadow-none peer-focus-visible:outline-2 peer-focus-visible:outline-offset-1 peer-focus-visible:outline-av-accent motion-reduce:transition-none after:h-1 after:w-[9px] after:-translate-y-px after:-rotate-45 after:border-0 after:border-b-2 after:border-l-2 after:border-solid after:border-white after:content-[''] after:opacity-0 peer-checked:after:opacity-100"></span></label></td><td class="p-0 first:w-14"><label class="group relative block cursor-pointer"><input type="checkbox" class="peer sr-only" name="available" value="thu 09:00" aria-label="Thursday, 09:00"><span class="grid h-[26px] place-items-center rounded-[5px] bg-av-off shadow-[inset_0_0_0_1px_var(--color-av-ring)] transition-[background-color] duration-[120ms] group-hover:bg-[#e3e8f0] peer-checked:bg-av-accent peer-checked:shadow-none peer-focus-visible:outline-2 peer-focus-visible:outline-offset-1 peer-focus-visible:outline-av-accent motion-reduce:transition-none after:h-1 after:w-[9px] after:-translate-y-px after:-rotate-45 after:border-0 after:border-b-2 after:border-l-2 after:border-solid after:border-white after:content-[''] after:opacity-0 peer-checked:after:opacity-100"></span></label></td><td class="p-0 first:w-14"><label class="group relative block cursor-pointer"><input type="checkbox" class="peer sr-only" name="available" value="fri 09:00" aria-label="Friday, 09:00"><span class="grid h-[26px] place-items-center rounded-[5px] bg-av-off shadow-[inset_0_0_0_1px_var(--color-av-ring)] transition-[background-color] duration-[120ms] group-hover:bg-[#e3e8f0] peer-checked:bg-av-accent peer-checked:shadow-none peer-focus-visible:outline-2 peer-focus-visible:outline-offset-1 peer-focus-visible:outline-av-accent motion-reduce:transition-none after:h-1 after:w-[9px] after:-translate-y-px after:-rotate-45 after:border-0 after:border-b-2 after:border-l-2 after:border-solid after:border-white after:content-[''] after:opacity-0 peer-checked:after:opacity-100"></span></label></td><td class="p-0 first:w-14"><label class="group relative block cursor-pointer"><input type="checkbox" class="peer sr-only" name="available" value="sat 09:00" aria-label="Saturday, 09:00"><span class="grid h-[26px] place-items-center rounded-[5px] bg-av-off shadow-[inset_0_0_0_1px_var(--color-av-ring)] transition-[background-color] duration-[120ms] group-hover:bg-[#e3e8f0] peer-checked:bg-av-accent peer-checked:shadow-none peer-focus-visible:outline-2 peer-focus-visible:outline-offset-1 peer-focus-visible:outline-av-accent motion-reduce:transition-none after:h-1 after:w-[9px] after:-translate-y-px after:-rotate-45 after:border-0 after:border-b-2 after:border-l-2 after:border-solid after:border-white after:content-[''] after:opacity-0 peer-checked:after:opacity-100"></span></label></td><td class="p-0 first:w-14"><label class="group relative block cursor-pointer"><input type="checkbox" class="peer sr-only" name="available" value="sun 09:00" aria-label="Sunday, 09:00"><span class="grid h-[26px] place-items-center rounded-[5px] bg-av-off shadow-[inset_0_0_0_1px_var(--color-av-ring)] transition-[background-color] duration-[120ms] group-hover:bg-[#e3e8f0] peer-checked:bg-av-accent peer-checked:shadow-none peer-focus-visible:outline-2 peer-focus-visible:outline-offset-1 peer-focus-visible:outline-av-accent motion-reduce:transition-none after:h-1 after:w-[9px] after:-translate-y-px after:-rotate-45 after:border-0 after:border-b-2 after:border-l-2 after:border-solid after:border-white after:content-[''] after:opacity-0 peer-checked:after:opacity-100"></span></label></td></tr>
      <tr><th scope="row" class="pr-2 text-right text-[.7rem] font-normal text-av-muted">10:00</th><td class="p-0 first:w-14"><label class="group relative block cursor-pointer"><input type="checkbox" class="peer sr-only" name="available" value="mon 10:00" aria-label="Monday, 10:00" checked><span class="grid h-[26px] place-items-center rounded-[5px] bg-av-off shadow-[inset_0_0_0_1px_var(--color-av-ring)] transition-[background-color] duration-[120ms] group-hover:bg-[#e3e8f0] peer-checked:bg-av-accent peer-checked:shadow-none peer-focus-visible:outline-2 peer-focus-visible:outline-offset-1 peer-focus-visible:outline-av-accent motion-reduce:transition-none after:h-1 after:w-[9px] after:-translate-y-px after:-rotate-45 after:border-0 after:border-b-2 after:border-l-2 after:border-solid after:border-white after:content-[''] after:opacity-0 peer-checked:after:opacity-100"></span></label></td><td class="p-0 first:w-14"><label class="group relative block cursor-pointer"><input type="checkbox" class="peer sr-only" name="available" value="tue 10:00" aria-label="Tuesday, 10:00" checked><span class="grid h-[26px] place-items-center rounded-[5px] bg-av-off shadow-[inset_0_0_0_1px_var(--color-av-ring)] transition-[background-color] duration-[120ms] group-hover:bg-[#e3e8f0] peer-checked:bg-av-accent peer-checked:shadow-none peer-focus-visible:outline-2 peer-focus-visible:outline-offset-1 peer-focus-visible:outline-av-accent motion-reduce:transition-none after:h-1 after:w-[9px] after:-translate-y-px after:-rotate-45 after:border-0 after:border-b-2 after:border-l-2 after:border-solid after:border-white after:content-[''] after:opacity-0 peer-checked:after:opacity-100"></span></label></td><td class="p-0 first:w-14"><label class="group relative block cursor-pointer"><input type="checkbox" class="peer sr-only" name="available" value="wed 10:00" aria-label="Wednesday, 10:00" checked><span class="grid h-[26px] place-items-center rounded-[5px] bg-av-off shadow-[inset_0_0_0_1px_var(--color-av-ring)] transition-[background-color] duration-[120ms] group-hover:bg-[#e3e8f0] peer-checked:bg-av-accent peer-checked:shadow-none peer-focus-visible:outline-2 peer-focus-visible:outline-offset-1 peer-focus-visible:outline-av-accent motion-reduce:transition-none after:h-1 after:w-[9px] after:-translate-y-px after:-rotate-45 after:border-0 after:border-b-2 after:border-l-2 after:border-solid after:border-white after:content-[''] after:opacity-0 peer-checked:after:opacity-100"></span></label></td><td class="p-0 first:w-14"><label class="group relative block cursor-pointer"><input type="checkbox" class="peer sr-only" name="available" value="thu 10:00" aria-label="Thursday, 10:00" checked><span class="grid h-[26px] place-items-center rounded-[5px] bg-av-off shadow-[inset_0_0_0_1px_var(--color-av-ring)] transition-[background-color] duration-[120ms] group-hover:bg-[#e3e8f0] peer-checked:bg-av-accent peer-checked:shadow-none peer-focus-visible:outline-2 peer-focus-visible:outline-offset-1 peer-focus-visible:outline-av-accent motion-reduce:transition-none after:h-1 after:w-[9px] after:-translate-y-px after:-rotate-45 after:border-0 after:border-b-2 after:border-l-2 after:border-solid after:border-white after:content-[''] after:opacity-0 peer-checked:after:opacity-100"></span></label></td><td class="p-0 first:w-14"><label class="group relative block cursor-pointer"><input type="checkbox" class="peer sr-only" name="available" value="fri 10:00" aria-label="Friday, 10:00" checked><span class="grid h-[26px] place-items-center rounded-[5px] bg-av-off shadow-[inset_0_0_0_1px_var(--color-av-ring)] transition-[background-color] duration-[120ms] group-hover:bg-[#e3e8f0] peer-checked:bg-av-accent peer-checked:shadow-none peer-focus-visible:outline-2 peer-focus-visible:outline-offset-1 peer-focus-visible:outline-av-accent motion-reduce:transition-none after:h-1 after:w-[9px] after:-translate-y-px after:-rotate-45 after:border-0 after:border-b-2 after:border-l-2 after:border-solid after:border-white after:content-[''] after:opacity-0 peer-checked:after:opacity-100"></span></label></td><td class="p-0 first:w-14"><label class="group relative block cursor-pointer"><input type="checkbox" class="peer sr-only" name="available" value="sat 10:00" aria-label="Saturday, 10:00" checked><span class="grid h-[26px] place-items-center rounded-[5px] bg-av-off shadow-[inset_0_0_0_1px_var(--color-av-ring)] transition-[background-color] duration-[120ms] group-hover:bg-[#e3e8f0] peer-checked:bg-av-accent peer-checked:shadow-none peer-focus-visible:outline-2 peer-focus-visible:outline-offset-1 peer-focus-visible:outline-av-accent motion-reduce:transition-none after:h-1 after:w-[9px] after:-translate-y-px after:-rotate-45 after:border-0 after:border-b-2 after:border-l-2 after:border-solid after:border-white after:content-[''] after:opacity-0 peer-checked:after:opacity-100"></span></label></td><td class="p-0 first:w-14"><label class="group relative block cursor-pointer"><input type="checkbox" class="peer sr-only" name="available" value="sun 10:00" aria-label="Sunday, 10:00"><span class="grid h-[26px] place-items-center rounded-[5px] bg-av-off shadow-[inset_0_0_0_1px_var(--color-av-ring)] transition-[background-color] duration-[120ms] group-hover:bg-[#e3e8f0] peer-checked:bg-av-accent peer-checked:shadow-none peer-focus-visible:outline-2 peer-focus-visible:outline-offset-1 peer-focus-visible:outline-av-accent motion-reduce:transition-none after:h-1 after:w-[9px] after:-translate-y-px after:-rotate-45 after:border-0 after:border-b-2 after:border-l-2 after:border-solid after:border-white after:content-[''] after:opacity-0 peer-checked:after:opacity-100"></span></label></td></tr>
      <tr><th scope="row" class="pr-2 text-right text-[.7rem] font-normal text-av-muted">11:00</th><td class="p-0 first:w-14"><label class="group relative block cursor-pointer"><input type="checkbox" class="peer sr-only" name="available" value="mon 11:00" aria-label="Monday, 11:00" checked><span class="grid h-[26px] place-items-center rounded-[5px] bg-av-off shadow-[inset_0_0_0_1px_var(--color-av-ring)] transition-[background-color] duration-[120ms] group-hover:bg-[#e3e8f0] peer-checked:bg-av-accent peer-checked:shadow-none peer-focus-visible:outline-2 peer-focus-visible:outline-offset-1 peer-focus-visible:outline-av-accent motion-reduce:transition-none after:h-1 after:w-[9px] after:-translate-y-px after:-rotate-45 after:border-0 after:border-b-2 after:border-l-2 after:border-solid after:border-white after:content-[''] after:opacity-0 peer-checked:after:opacity-100"></span></label></td><td class="p-0 first:w-14"><label class="group relative block cursor-pointer"><input type="checkbox" class="peer sr-only" name="available" value="tue 11:00" aria-label="Tuesday, 11:00" checked><span class="grid h-[26px] place-items-center rounded-[5px] bg-av-off shadow-[inset_0_0_0_1px_var(--color-av-ring)] transition-[background-color] duration-[120ms] group-hover:bg-[#e3e8f0] peer-checked:bg-av-accent peer-checked:shadow-none peer-focus-visible:outline-2 peer-focus-visible:outline-offset-1 peer-focus-visible:outline-av-accent motion-reduce:transition-none after:h-1 after:w-[9px] after:-translate-y-px after:-rotate-45 after:border-0 after:border-b-2 after:border-l-2 after:border-solid after:border-white after:content-[''] after:opacity-0 peer-checked:after:opacity-100"></span></label></td><td class="p-0 first:w-14"><label class="group relative block cursor-pointer"><input type="checkbox" class="peer sr-only" name="available" value="wed 11:00" aria-label="Wednesday, 11:00" checked><span class="grid h-[26px] place-items-center rounded-[5px] bg-av-off shadow-[inset_0_0_0_1px_var(--color-av-ring)] transition-[background-color] duration-[120ms] group-hover:bg-[#e3e8f0] peer-checked:bg-av-accent peer-checked:shadow-none peer-focus-visible:outline-2 peer-focus-visible:outline-offset-1 peer-focus-visible:outline-av-accent motion-reduce:transition-none after:h-1 after:w-[9px] after:-translate-y-px after:-rotate-45 after:border-0 after:border-b-2 after:border-l-2 after:border-solid after:border-white after:content-[''] after:opacity-0 peer-checked:after:opacity-100"></span></label></td><td class="p-0 first:w-14"><label class="group relative block cursor-pointer"><input type="checkbox" class="peer sr-only" name="available" value="thu 11:00" aria-label="Thursday, 11:00" checked><span class="grid h-[26px] place-items-center rounded-[5px] bg-av-off shadow-[inset_0_0_0_1px_var(--color-av-ring)] transition-[background-color] duration-[120ms] group-hover:bg-[#e3e8f0] peer-checked:bg-av-accent peer-checked:shadow-none peer-focus-visible:outline-2 peer-focus-visible:outline-offset-1 peer-focus-visible:outline-av-accent motion-reduce:transition-none after:h-1 after:w-[9px] after:-translate-y-px after:-rotate-45 after:border-0 after:border-b-2 after:border-l-2 after:border-solid after:border-white after:content-[''] after:opacity-0 peer-checked:after:opacity-100"></span></label></td><td class="p-0 first:w-14"><label class="group relative block cursor-pointer"><input type="checkbox" class="peer sr-only" name="available" value="fri 11:00" aria-label="Friday, 11:00" checked><span class="grid h-[26px] place-items-center rounded-[5px] bg-av-off shadow-[inset_0_0_0_1px_var(--color-av-ring)] transition-[background-color] duration-[120ms] group-hover:bg-[#e3e8f0] peer-checked:bg-av-accent peer-checked:shadow-none peer-focus-visible:outline-2 peer-focus-visible:outline-offset-1 peer-focus-visible:outline-av-accent motion-reduce:transition-none after:h-1 after:w-[9px] after:-translate-y-px after:-rotate-45 after:border-0 after:border-b-2 after:border-l-2 after:border-solid after:border-white after:content-[''] after:opacity-0 peer-checked:after:opacity-100"></span></label></td><td class="p-0 first:w-14"><label class="group relative block cursor-pointer"><input type="checkbox" class="peer sr-only" name="available" value="sat 11:00" aria-label="Saturday, 11:00"><span class="grid h-[26px] place-items-center rounded-[5px] bg-av-off shadow-[inset_0_0_0_1px_var(--color-av-ring)] transition-[background-color] duration-[120ms] group-hover:bg-[#e3e8f0] peer-checked:bg-av-accent peer-checked:shadow-none peer-focus-visible:outline-2 peer-focus-visible:outline-offset-1 peer-focus-visible:outline-av-accent motion-reduce:transition-none after:h-1 after:w-[9px] after:-translate-y-px after:-rotate-45 after:border-0 after:border-b-2 after:border-l-2 after:border-solid after:border-white after:content-[''] after:opacity-0 peer-checked:after:opacity-100"></span></label></td><td class="p-0 first:w-14"><label class="group relative block cursor-pointer"><input type="checkbox" class="peer sr-only" name="available" value="sun 11:00" aria-label="Sunday, 11:00"><span class="grid h-[26px] place-items-center rounded-[5px] bg-av-off shadow-[inset_0_0_0_1px_var(--color-av-ring)] transition-[background-color] duration-[120ms] group-hover:bg-[#e3e8f0] peer-checked:bg-av-accent peer-checked:shadow-none peer-focus-visible:outline-2 peer-focus-visible:outline-offset-1 peer-focus-visible:outline-av-accent motion-reduce:transition-none after:h-1 after:w-[9px] after:-translate-y-px after:-rotate-45 after:border-0 after:border-b-2 after:border-l-2 after:border-solid after:border-white after:content-[''] after:opacity-0 peer-checked:after:opacity-100"></span></label></td></tr>
      <tr><th scope="row" class="pr-2 text-right text-[.7rem] font-normal text-av-muted">12:00</th><td class="p-0 first:w-14"><label class="group relative block cursor-pointer"><input type="checkbox" class="peer sr-only" name="available" value="mon 12:00" aria-label="Monday, 12:00" checked><span class="grid h-[26px] place-items-center rounded-[5px] bg-av-off shadow-[inset_0_0_0_1px_var(--color-av-ring)] transition-[background-color] duration-[120ms] group-hover:bg-[#e3e8f0] peer-checked:bg-av-accent peer-checked:shadow-none peer-focus-visible:outline-2 peer-focus-visible:outline-offset-1 peer-focus-visible:outline-av-accent motion-reduce:transition-none after:h-1 after:w-[9px] after:-translate-y-px after:-rotate-45 after:border-0 after:border-b-2 after:border-l-2 after:border-solid after:border-white after:content-[''] after:opacity-0 peer-checked:after:opacity-100"></span></label></td><td class="p-0 first:w-14"><label class="group relative block cursor-pointer"><input type="checkbox" class="peer sr-only" name="available" value="tue 12:00" aria-label="Tuesday, 12:00" checked><span class="grid h-[26px] place-items-center rounded-[5px] bg-av-off shadow-[inset_0_0_0_1px_var(--color-av-ring)] transition-[background-color] duration-[120ms] group-hover:bg-[#e3e8f0] peer-checked:bg-av-accent peer-checked:shadow-none peer-focus-visible:outline-2 peer-focus-visible:outline-offset-1 peer-focus-visible:outline-av-accent motion-reduce:transition-none after:h-1 after:w-[9px] after:-translate-y-px after:-rotate-45 after:border-0 after:border-b-2 after:border-l-2 after:border-solid after:border-white after:content-[''] after:opacity-0 peer-checked:after:opacity-100"></span></label></td><td class="p-0 first:w-14"><label class="group relative block cursor-pointer"><input type="checkbox" class="peer sr-only" name="available" value="wed 12:00" aria-label="Wednesday, 12:00" checked><span class="grid h-[26px] place-items-center rounded-[5px] bg-av-off shadow-[inset_0_0_0_1px_var(--color-av-ring)] transition-[background-color] duration-[120ms] group-hover:bg-[#e3e8f0] peer-checked:bg-av-accent peer-checked:shadow-none peer-focus-visible:outline-2 peer-focus-visible:outline-offset-1 peer-focus-visible:outline-av-accent motion-reduce:transition-none after:h-1 after:w-[9px] after:-translate-y-px after:-rotate-45 after:border-0 after:border-b-2 after:border-l-2 after:border-solid after:border-white after:content-[''] after:opacity-0 peer-checked:after:opacity-100"></span></label></td><td class="p-0 first:w-14"><label class="group relative block cursor-pointer"><input type="checkbox" class="peer sr-only" name="available" value="thu 12:00" aria-label="Thursday, 12:00" checked><span class="grid h-[26px] place-items-center rounded-[5px] bg-av-off shadow-[inset_0_0_0_1px_var(--color-av-ring)] transition-[background-color] duration-[120ms] group-hover:bg-[#e3e8f0] peer-checked:bg-av-accent peer-checked:shadow-none peer-focus-visible:outline-2 peer-focus-visible:outline-offset-1 peer-focus-visible:outline-av-accent motion-reduce:transition-none after:h-1 after:w-[9px] after:-translate-y-px after:-rotate-45 after:border-0 after:border-b-2 after:border-l-2 after:border-solid after:border-white after:content-[''] after:opacity-0 peer-checked:after:opacity-100"></span></label></td><td class="p-0 first:w-14"><label class="group relative block cursor-pointer"><input type="checkbox" class="peer sr-only" name="available" value="fri 12:00" aria-label="Friday, 12:00" checked><span class="grid h-[26px] place-items-center rounded-[5px] bg-av-off shadow-[inset_0_0_0_1px_var(--color-av-ring)] transition-[background-color] duration-[120ms] group-hover:bg-[#e3e8f0] peer-checked:bg-av-accent peer-checked:shadow-none peer-focus-visible:outline-2 peer-focus-visible:outline-offset-1 peer-focus-visible:outline-av-accent motion-reduce:transition-none after:h-1 after:w-[9px] after:-translate-y-px after:-rotate-45 after:border-0 after:border-b-2 after:border-l-2 after:border-solid after:border-white after:content-[''] after:opacity-0 peer-checked:after:opacity-100"></span></label></td><td class="p-0 first:w-14"><label class="group relative block cursor-pointer"><input type="checkbox" class="peer sr-only" name="available" value="sat 12:00" aria-label="Saturday, 12:00"><span class="grid h-[26px] place-items-center rounded-[5px] bg-av-off shadow-[inset_0_0_0_1px_var(--color-av-ring)] transition-[background-color] duration-[120ms] group-hover:bg-[#e3e8f0] peer-checked:bg-av-accent peer-checked:shadow-none peer-focus-visible:outline-2 peer-focus-visible:outline-offset-1 peer-focus-visible:outline-av-accent motion-reduce:transition-none after:h-1 after:w-[9px] after:-translate-y-px after:-rotate-45 after:border-0 after:border-b-2 after:border-l-2 after:border-solid after:border-white after:content-[''] after:opacity-0 peer-checked:after:opacity-100"></span></label></td><td class="p-0 first:w-14"><label class="group relative block cursor-pointer"><input type="checkbox" class="peer sr-only" name="available" value="sun 12:00" aria-label="Sunday, 12:00"><span class="grid h-[26px] place-items-center rounded-[5px] bg-av-off shadow-[inset_0_0_0_1px_var(--color-av-ring)] transition-[background-color] duration-[120ms] group-hover:bg-[#e3e8f0] peer-checked:bg-av-accent peer-checked:shadow-none peer-focus-visible:outline-2 peer-focus-visible:outline-offset-1 peer-focus-visible:outline-av-accent motion-reduce:transition-none after:h-1 after:w-[9px] after:-translate-y-px after:-rotate-45 after:border-0 after:border-b-2 after:border-l-2 after:border-solid after:border-white after:content-[''] after:opacity-0 peer-checked:after:opacity-100"></span></label></td></tr>
      <tr><th scope="row" class="pr-2 text-right text-[.7rem] font-normal text-av-muted">13:00</th><td class="p-0 first:w-14"><label class="group relative block cursor-pointer"><input type="checkbox" class="peer sr-only" name="available" value="mon 13:00" aria-label="Monday, 13:00"><span class="grid h-[26px] place-items-center rounded-[5px] bg-av-off shadow-[inset_0_0_0_1px_var(--color-av-ring)] transition-[background-color] duration-[120ms] group-hover:bg-[#e3e8f0] peer-checked:bg-av-accent peer-checked:shadow-none peer-focus-visible:outline-2 peer-focus-visible:outline-offset-1 peer-focus-visible:outline-av-accent motion-reduce:transition-none after:h-1 after:w-[9px] after:-translate-y-px after:-rotate-45 after:border-0 after:border-b-2 after:border-l-2 after:border-solid after:border-white after:content-[''] after:opacity-0 peer-checked:after:opacity-100"></span></label></td><td class="p-0 first:w-14"><label class="group relative block cursor-pointer"><input type="checkbox" class="peer sr-only" name="available" value="tue 13:00" aria-label="Tuesday, 13:00"><span class="grid h-[26px] place-items-center rounded-[5px] bg-av-off shadow-[inset_0_0_0_1px_var(--color-av-ring)] transition-[background-color] duration-[120ms] group-hover:bg-[#e3e8f0] peer-checked:bg-av-accent peer-checked:shadow-none peer-focus-visible:outline-2 peer-focus-visible:outline-offset-1 peer-focus-visible:outline-av-accent motion-reduce:transition-none after:h-1 after:w-[9px] after:-translate-y-px after:-rotate-45 after:border-0 after:border-b-2 after:border-l-2 after:border-solid after:border-white after:content-[''] after:opacity-0 peer-checked:after:opacity-100"></span></label></td><td class="p-0 first:w-14"><label class="group relative block cursor-pointer"><input type="checkbox" class="peer sr-only" name="available" value="wed 13:00" aria-label="Wednesday, 13:00"><span class="grid h-[26px] place-items-center rounded-[5px] bg-av-off shadow-[inset_0_0_0_1px_var(--color-av-ring)] transition-[background-color] duration-[120ms] group-hover:bg-[#e3e8f0] peer-checked:bg-av-accent peer-checked:shadow-none peer-focus-visible:outline-2 peer-focus-visible:outline-offset-1 peer-focus-visible:outline-av-accent motion-reduce:transition-none after:h-1 after:w-[9px] after:-translate-y-px after:-rotate-45 after:border-0 after:border-b-2 after:border-l-2 after:border-solid after:border-white after:content-[''] after:opacity-0 peer-checked:after:opacity-100"></span></label></td><td class="p-0 first:w-14"><label class="group relative block cursor-pointer"><input type="checkbox" class="peer sr-only" name="available" value="thu 13:00" aria-label="Thursday, 13:00"><span class="grid h-[26px] place-items-center rounded-[5px] bg-av-off shadow-[inset_0_0_0_1px_var(--color-av-ring)] transition-[background-color] duration-[120ms] group-hover:bg-[#e3e8f0] peer-checked:bg-av-accent peer-checked:shadow-none peer-focus-visible:outline-2 peer-focus-visible:outline-offset-1 peer-focus-visible:outline-av-accent motion-reduce:transition-none after:h-1 after:w-[9px] after:-translate-y-px after:-rotate-45 after:border-0 after:border-b-2 after:border-l-2 after:border-solid after:border-white after:content-[''] after:opacity-0 peer-checked:after:opacity-100"></span></label></td><td class="p-0 first:w-14"><label class="group relative block cursor-pointer"><input type="checkbox" class="peer sr-only" name="available" value="fri 13:00" aria-label="Friday, 13:00"><span class="grid h-[26px] place-items-center rounded-[5px] bg-av-off shadow-[inset_0_0_0_1px_var(--color-av-ring)] transition-[background-color] duration-[120ms] group-hover:bg-[#e3e8f0] peer-checked:bg-av-accent peer-checked:shadow-none peer-focus-visible:outline-2 peer-focus-visible:outline-offset-1 peer-focus-visible:outline-av-accent motion-reduce:transition-none after:h-1 after:w-[9px] after:-translate-y-px after:-rotate-45 after:border-0 after:border-b-2 after:border-l-2 after:border-solid after:border-white after:content-[''] after:opacity-0 peer-checked:after:opacity-100"></span></label></td><td class="p-0 first:w-14"><label class="group relative block cursor-pointer"><input type="checkbox" class="peer sr-only" name="available" value="sat 13:00" aria-label="Saturday, 13:00"><span class="grid h-[26px] place-items-center rounded-[5px] bg-av-off shadow-[inset_0_0_0_1px_var(--color-av-ring)] transition-[background-color] duration-[120ms] group-hover:bg-[#e3e8f0] peer-checked:bg-av-accent peer-checked:shadow-none peer-focus-visible:outline-2 peer-focus-visible:outline-offset-1 peer-focus-visible:outline-av-accent motion-reduce:transition-none after:h-1 after:w-[9px] after:-translate-y-px after:-rotate-45 after:border-0 after:border-b-2 after:border-l-2 after:border-solid after:border-white after:content-[''] after:opacity-0 peer-checked:after:opacity-100"></span></label></td><td class="p-0 first:w-14"><label class="group relative block cursor-pointer"><input type="checkbox" class="peer sr-only" name="available" value="sun 13:00" aria-label="Sunday, 13:00"><span class="grid h-[26px] place-items-center rounded-[5px] bg-av-off shadow-[inset_0_0_0_1px_var(--color-av-ring)] transition-[background-color] duration-[120ms] group-hover:bg-[#e3e8f0] peer-checked:bg-av-accent peer-checked:shadow-none peer-focus-visible:outline-2 peer-focus-visible:outline-offset-1 peer-focus-visible:outline-av-accent motion-reduce:transition-none after:h-1 after:w-[9px] after:-translate-y-px after:-rotate-45 after:border-0 after:border-b-2 after:border-l-2 after:border-solid after:border-white after:content-[''] after:opacity-0 peer-checked:after:opacity-100"></span></label></td></tr>
      <tr><th scope="row" class="pr-2 text-right text-[.7rem] font-normal text-av-muted">14:00</th><td class="p-0 first:w-14"><label class="group relative block cursor-pointer"><input type="checkbox" class="peer sr-only" name="available" value="mon 14:00" aria-label="Monday, 14:00"><span class="grid h-[26px] place-items-center rounded-[5px] bg-av-off shadow-[inset_0_0_0_1px_var(--color-av-ring)] transition-[background-color] duration-[120ms] group-hover:bg-[#e3e8f0] peer-checked:bg-av-accent peer-checked:shadow-none peer-focus-visible:outline-2 peer-focus-visible:outline-offset-1 peer-focus-visible:outline-av-accent motion-reduce:transition-none after:h-1 after:w-[9px] after:-translate-y-px after:-rotate-45 after:border-0 after:border-b-2 after:border-l-2 after:border-solid after:border-white after:content-[''] after:opacity-0 peer-checked:after:opacity-100"></span></label></td><td class="p-0 first:w-14"><label class="group relative block cursor-pointer"><input type="checkbox" class="peer sr-only" name="available" value="tue 14:00" aria-label="Tuesday, 14:00"><span class="grid h-[26px] place-items-center rounded-[5px] bg-av-off shadow-[inset_0_0_0_1px_var(--color-av-ring)] transition-[background-color] duration-[120ms] group-hover:bg-[#e3e8f0] peer-checked:bg-av-accent peer-checked:shadow-none peer-focus-visible:outline-2 peer-focus-visible:outline-offset-1 peer-focus-visible:outline-av-accent motion-reduce:transition-none after:h-1 after:w-[9px] after:-translate-y-px after:-rotate-45 after:border-0 after:border-b-2 after:border-l-2 after:border-solid after:border-white after:content-[''] after:opacity-0 peer-checked:after:opacity-100"></span></label></td><td class="p-0 first:w-14"><label class="group relative block cursor-pointer"><input type="checkbox" class="peer sr-only" name="available" value="wed 14:00" aria-label="Wednesday, 14:00"><span class="grid h-[26px] place-items-center rounded-[5px] bg-av-off shadow-[inset_0_0_0_1px_var(--color-av-ring)] transition-[background-color] duration-[120ms] group-hover:bg-[#e3e8f0] peer-checked:bg-av-accent peer-checked:shadow-none peer-focus-visible:outline-2 peer-focus-visible:outline-offset-1 peer-focus-visible:outline-av-accent motion-reduce:transition-none after:h-1 after:w-[9px] after:-translate-y-px after:-rotate-45 after:border-0 after:border-b-2 after:border-l-2 after:border-solid after:border-white after:content-[''] after:opacity-0 peer-checked:after:opacity-100"></span></label></td><td class="p-0 first:w-14"><label class="group relative block cursor-pointer"><input type="checkbox" class="peer sr-only" name="available" value="thu 14:00" aria-label="Thursday, 14:00"><span class="grid h-[26px] place-items-center rounded-[5px] bg-av-off shadow-[inset_0_0_0_1px_var(--color-av-ring)] transition-[background-color] duration-[120ms] group-hover:bg-[#e3e8f0] peer-checked:bg-av-accent peer-checked:shadow-none peer-focus-visible:outline-2 peer-focus-visible:outline-offset-1 peer-focus-visible:outline-av-accent motion-reduce:transition-none after:h-1 after:w-[9px] after:-translate-y-px after:-rotate-45 after:border-0 after:border-b-2 after:border-l-2 after:border-solid after:border-white after:content-[''] after:opacity-0 peer-checked:after:opacity-100"></span></label></td><td class="p-0 first:w-14"><label class="group relative block cursor-pointer"><input type="checkbox" class="peer sr-only" name="available" value="fri 14:00" aria-label="Friday, 14:00"><span class="grid h-[26px] place-items-center rounded-[5px] bg-av-off shadow-[inset_0_0_0_1px_var(--color-av-ring)] transition-[background-color] duration-[120ms] group-hover:bg-[#e3e8f0] peer-checked:bg-av-accent peer-checked:shadow-none peer-focus-visible:outline-2 peer-focus-visible:outline-offset-1 peer-focus-visible:outline-av-accent motion-reduce:transition-none after:h-1 after:w-[9px] after:-translate-y-px after:-rotate-45 after:border-0 after:border-b-2 after:border-l-2 after:border-solid after:border-white after:content-[''] after:opacity-0 peer-checked:after:opacity-100"></span></label></td><td class="p-0 first:w-14"><label class="group relative block cursor-pointer"><input type="checkbox" class="peer sr-only" name="available" value="sat 14:00" aria-label="Saturday, 14:00"><span class="grid h-[26px] place-items-center rounded-[5px] bg-av-off shadow-[inset_0_0_0_1px_var(--color-av-ring)] transition-[background-color] duration-[120ms] group-hover:bg-[#e3e8f0] peer-checked:bg-av-accent peer-checked:shadow-none peer-focus-visible:outline-2 peer-focus-visible:outline-offset-1 peer-focus-visible:outline-av-accent motion-reduce:transition-none after:h-1 after:w-[9px] after:-translate-y-px after:-rotate-45 after:border-0 after:border-b-2 after:border-l-2 after:border-solid after:border-white after:content-[''] after:opacity-0 peer-checked:after:opacity-100"></span></label></td><td class="p-0 first:w-14"><label class="group relative block cursor-pointer"><input type="checkbox" class="peer sr-only" name="available" value="sun 14:00" aria-label="Sunday, 14:00"><span class="grid h-[26px] place-items-center rounded-[5px] bg-av-off shadow-[inset_0_0_0_1px_var(--color-av-ring)] transition-[background-color] duration-[120ms] group-hover:bg-[#e3e8f0] peer-checked:bg-av-accent peer-checked:shadow-none peer-focus-visible:outline-2 peer-focus-visible:outline-offset-1 peer-focus-visible:outline-av-accent motion-reduce:transition-none after:h-1 after:w-[9px] after:-translate-y-px after:-rotate-45 after:border-0 after:border-b-2 after:border-l-2 after:border-solid after:border-white after:content-[''] after:opacity-0 peer-checked:after:opacity-100"></span></label></td></tr>
    </tbody>
  </table>
  <div class="mt-[18px] flex flex-wrap items-center justify-between gap-2.5">
    <ul class="flex gap-3.5 text-[.75rem] text-av-muted"><li class="flex items-center gap-1.5"><span class="grid size-3.5 place-items-center rounded-[3px] bg-av-accent after:h-[3px] after:w-1.5 after:-translate-y-px after:-rotate-45 after:border-0 after:border-b-[1.5px] after:border-l-[1.5px] after:border-solid after:border-white after:content-['']" aria-hidden="true"></span> Available</li><li class="flex items-center gap-1.5"><span class="size-3.5 rounded-[3px] bg-av-off shadow-[inset_0_0_0_1px_var(--color-av-ring)]" aria-hidden="true"></span> Busy</li></ul>
    <button type="button" class="cursor-pointer rounded-[9px] bg-av-accent px-[18px] py-[9px] text-[.82rem] font-bold text-white hover:bg-[#5b21b6] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-av-accent">Save availability</button>
  </div>
</div>
CSS 
@theme {
  --color-av-accent: #6d28d9;
  --color-av-muted: #5f6b7c;
  --color-av-off: #f2f4f8;
  --color-av-ring: #8692a5;
}

About this set

A weekly availability grid where people tick the hours they are free: seven days across, six one-hour slots down from 09:00, a key for available and busy, and a Save availability button. Use it for interview scheduling, team meeting polls, tutor or clinic availability and any form that collects a weekly pattern. The grid is a table with weekday column headers and time row headers, and every cell holds a real checkbox, so the whole thing submits with a form as name and value pairs. Each checkbox has a full name such as Monday, 09:00. The checkbox itself is visually hidden and the box after it shows the state: a violet fill with a white tick when available, a grey box with an outline when busy, so the state is clear without colour. The outline on the empty boxes reaches 3:1 against the card. At 375 pixels the seven columns still fit without scrolling. The Bootstrap version uses .btn-check with a .btn label for every slot, and the Tailwind version uses peer-checked utilities and draws the tick with after: utilities. The Save button has no handler; connect it to your form.

What’s included

  • Table of real checkboxes that submits with a form
  • Names such as "Monday, 09:00" on every slot
  • Tick mark as well as colour for the available state
  • Empty slot outline at 3:1 contrast
  • Fits 375px screens without horizontal scrolling

Accessibility

The grid is a table with a caption, weekday column headers and time row headers, and every checkbox has an aria-label with the day and hour. Tab moves through the slots and Space toggles them. Focus draws a 2px violet outline around the visible box, and the background transition is removed under prefers-reduced-motion.

Customise it

Change --av-accent, --av-off, --av-ring and --av-muted on .avail in plain CSS and Bootstrap, or the --color-av-* theme colours in Tailwind. Slot height is the 26px on the box.