Elements

<div class='bg'><span>Your content</span></div>

<style>
.bg{display:grid;place-items:center;width:100%;min-height:260px;position:relative;overflow:hidden;font:400 20px Georgia,serif;color:#f4f4f4;background:radial-gradient(60% 50% at 40% 0,#12363a 0,transparent 75%),radial-gradient(50% 50% at 10% 100%,#0f3a2e 0,transparent 75%),radial-gradient(50% 50% at 95% 80%,#0a2530 0,transparent 75%),repeating-linear-gradient(0deg,rgba(255,255,255,.025) 0 1px,transparent 1px 4px),#05090b}.bg span{position:relative}
</style>

<div class='bg'><span>Your content</span></div>

<style>
.bg{display:grid;place-items:center;width:100%;min-height:260px;position:relative;overflow:hidden;font:400 20px Georgia,serif;color:#f4f4f4;background:radial-gradient(60% 60% at 50% 50%,#1b1b1b 0,transparent 80%),repeating-linear-gradient(90deg,rgba(255,255,255,.02) 0 1px,transparent 1px 5px),#050505}.bg span{position:relative}
</style>

<div class='bg'><span>Your content</span></div>

<style>
.bg{display:grid;place-items:center;width:100%;min-height:260px;position:relative;overflow:hidden;font:400 20px Georgia,serif;color:#f4f4f4;background:radial-gradient(60% 70% at 50% 50%,#5a3716 0,transparent 75%),radial-gradient(60% 60% at 85% 70%,#4a1f1f 0,transparent 75%),repeating-linear-gradient(0deg,rgba(255,255,255,.025) 0 1px,transparent 1px 4px),#120a07}.bg span{position:relative}
</style>

<div class='bg'><span>Your content</span></div>

<style>
.bg{display:grid;place-items:center;width:100%;min-height:260px;position:relative;overflow:hidden;font:400 20px Georgia,serif;color:#f4f4f4;background:radial-gradient(70% 60% at 50% 0,#2b2b2b 0,transparent 75%),repeating-linear-gradient(0deg,rgba(255,255,255,.025) 0 1px,transparent 1px 4px),#0a0a0a}.bg span{position:relative}
</style>

<div class='bg'><span>Your content</span></div>

<style>
.bg{display:grid;place-items:center;width:100%;min-height:260px;position:relative;overflow:hidden;font:400 20px Georgia,serif;color:#f2f2f2;background:radial-gradient(70% 60% at 50% 30%,#133f3f 0,transparent 75%),radial-gradient(60% 50% at 85% 105%,#1e6b64 0,transparent 70%),radial-gradient(50% 50% at 5% 90%,#050709 0,transparent 80%),#0a1214}.bg span{position:relative}
</style>

<div class='bg'><span>Your content</span></div>

<style>
.bg{display:grid;place-items:center;width:100%;min-height:260px;position:relative;overflow:hidden;font:400 20px Georgia,serif;color:#f5f5f5;background:radial-gradient(120% 50% at 50% 115%,#a8431a 0,transparent 70%),radial-gradient(70% 35% at 25% 105%,#7a1f1f 0,transparent 70%),radial-gradient(70% 35% at 78% 105%,#8a5a12 0,transparent 70%),#0e0e12}.bg span{position:relative}
</style>

<div class='bg'><span>Your content</span></div>

<style>
.bg{display:grid;place-items:center;width:100%;min-height:260px;position:relative;overflow:hidden;font:400 20px Georgia,serif;color:#1f1f1f;background:radial-gradient(60% 70% at 10% 25%,#ffb3bb 0,transparent 70%),radial-gradient(60% 70% at 85% 40%,#ffd08a 0,transparent 70%),radial-gradient(70% 50% at 70% 110%,#ffb59a 0,transparent 70%),#fff3ea}.bg span{position:relative}
</style>

<div class='bg'><i style='--x:8%;--s:34px;--d:9s;--l:0s'></i><i style='--x:24%;--s:26px;--d:11s;--l:-3s'></i><i style='--x:42%;--s:30px;--d:8s;--l:-5s'></i><i style='--x:60%;--s:22px;--d:12s;--l:-2s'></i><i style='--x:76%;--s:36px;--d:10s;--l:-7s'></i><i style='--x:90%;--s:28px;--d:9s;--l:-4s'></i><span>Your content</span></div>

<style>
.bg{display:grid;place-items:center;width:100%;min-height:260px;position:relative;overflow:hidden;font:400 20px Georgia,serif;color:#222;background:radial-gradient(90% 80% at 50% 40%,#ffeef0 0,#ffdfe4 100%)}.bg i{position:absolute;left:var(--x);bottom:-50px;width:var(--s);height:calc(var(--s)*.8);background:#ffb3c1;border-radius:70% 0 70% 0;opacity:.8;animation:bd var(--d) linear infinite;animation-delay:var(--l)}.bg span{position:relative}@keyframes bd{0%{transform:translateY(0) rotate(0)}100%{transform:translateY(-340px) rotate(240deg);opacity:0}}@media(prefers-reduced-motion:reduce){.bg i{animation:none;bottom:20%}}
</style>

<div class='bg'><span>Your content</span></div>

<style>
.bg{display:grid;place-items:center;width:100%;min-height:260px;position:relative;overflow:hidden;font:400 20px Georgia,serif;color:#1a1a1a;background:radial-gradient(70% 60% at 15% 5%,#eaff9c 0,transparent 70%),radial-gradient(70% 60% at 85% 25%,#b7f0cf 0,transparent 70%),radial-gradient(80% 60% at 55% 110%,#4aa3ec 0,transparent 70%),#e9f8ef}.bg span{position:relative}
</style>

<div class='bg'><span>Your content</span></div>

<style>
.bg{display:grid;place-items:center;width:100%;min-height:260px;position:relative;overflow:hidden;font:400 20px Georgia,serif;color:#222;background:linear-gradient(#fffaf3 0 55%,transparent 80%),radial-gradient(120% 60% at 50% 105%,#ffb26b 0,transparent 70%),radial-gradient(90% 45% at 30% 100%,#ff9aa2 0,transparent 70%),radial-gradient(90% 45% at 75% 100%,#ffd08a 0,transparent 70%),#fff6ee}.bg span{position:relative}
</style>

<div class='bk'><div class='bk-t'><span class='bk-i'><svg width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='#fff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><rect x='3.5' y='5' width='17' height='15.5' rx='2.5'/><path d='M3.5 10h17M8 3v4M16 3v4'/></svg></span><div><b>Book a slot</b><small>30 min · Video call</small></div></div><div class='bk-m'><b id='bkm'></b><span><button id='bkp' aria-label='Previous week'>‹</button><button id='bkn' aria-label='Next week'>›</button></span></div><div class='bk-d' id='bkd'></div><p id='bkl'></p><div class='bk-s' id='bks'></div></div>

<style>
.bk{width:min(330px,94%);margin:auto;background:#fff;border-radius:20px;box-shadow:0 4px 24px rgba(0,0,0,.08);font-family:Inter,Arial,sans-serif;color:#111;overflow:hidden}.bk-t{display:flex;gap:12px;align-items:center;padding:16px 20px;border-bottom:1px solid #f0f0f0}.bk-i{display:grid;place-items:center;width:38px;height:38px;border-radius:10px;background:linear-gradient(135deg,#6366f1,#8b5cf6)}.bk-t b{display:block;font-size:15px;font-weight:600}.bk-t small{display:block;font-size:12.5px;color:#737373}.bk-m{display:flex;justify-content:space-between;align-items:center;padding:14px 20px 8px}.bk-m b{font-size:14.5px;font-weight:600}.bk-m button{width:26px;height:26px;border:0;border-radius:8px;background:none;font-size:20px;line-height:1;color:#555;cursor:pointer}.bk-m button:hover{background:#f4f4f4}.bk-d{display:grid;grid-template-columns:repeat(7,1fr);padding:0 14px;text-align:center}.bk-d button{display:flex;flex-direction:column;align-items:center;gap:5px;border:0;background:none;padding:0;cursor:pointer;font-family:inherit}.bk-d small{font-size:10.5px;font-weight:600;color:#9a9a9a}.bk-d span{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;font-size:14px}.bk-d button:hover span{background:#f1f1f1}.bk-d button.on span{background:#111;color:#fff;font-weight:700}.bk p{margin:14px 20px 8px;font-size:12.5px;color:#737373}.bk-s{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:0 20px 20px}.bk-s button{height:38px;border:0;border-radius:10px;background:#f6f6f6;font:inherit;font-size:13.5px;color:#222;cursor:pointer;transition:background .15s,color .15s}.bk-s button:hover:not(:disabled){background:#ececec}.bk-s button.on{background:#111;color:#fff}.bk-s button:disabled{color:#c0c0c0;text-decoration:line-through;cursor:default}
</style>

<script>
const now=new Date();let sel=new Date(now.getFullYear(),now.getMonth(),now.getDate()),st=new Date(sel);st.setDate(st.getDate()-st.getDay());let slot=null;const L='SMTWTFS',T=['9:00 AM','9:30 AM','10:00 AM','10:30 AM','11:00 AM','2:00 PM','2:30 PM','3:00 PM'];const taken=d=>[3,6].map(i=>(i+d.getDate())%8);const dd=document.getElementById('bkd'),ss=document.getElementById('bks');const draw=()=>{let h='';for(let i=0;i<7;i++){const x=new Date(st);x.setDate(st.getDate()+i);h+='<button class="'+(x.getTime()===sel.getTime()?'on':'')+'" data-t='+x.getTime()+'><small>'+L[i]+'</small><span>'+x.getDate()+'</span></button>'}dd.innerHTML=h;document.getElementById('bkm').textContent=sel.toLocaleDateString(undefined,{month:'long',year:'numeric'});document.getElementById('bkl').textContent=sel.toLocaleDateString(undefined,{weekday:'long',month:'short',day:'numeric'});const tk=taken(sel);ss.innerHTML=T.map((t,i)=>'<button '+(tk.includes(i)?'disabled':'')+' class="'+(slot===t?'on':'')+'">'+t+'</button>').join('')};dd.addEventListener('click',e=>{const b=e.target.closest('button');if(b){sel=new Date(+b.dataset.t);slot=null;draw()}});ss.addEventListener('click',e=>{const b=e.target.closest('button');if(b&&!b.disabled){slot=b.textContent;draw()}});document.getElementById('bkp').onclick=()=>{st.setDate(st.getDate()-7);draw()};document.getElementById('bkn').onclick=()=>{st.setDate(st.getDate()+7);draw()};draw();
</script>

<div class='cd'><small>COUNTDOWN</small><h4>Product launch</h4><p id='cdp'></p><div class='cd-n'><div><b id='cdd'>0</b><span>DAYS</span></div><div><b id='cdh'>0</b><span>HRS</span></div><div><b id='cdm'>0</b><span>MIN</span></div></div></div>

<style>
.cd{width:230px;margin:auto;padding:18px 20px 20px;background:#fff;border-radius:18px;box-shadow:0 4px 24px rgba(0,0,0,.08);font-family:Inter,Arial,sans-serif;color:#111}.cd small{font-size:11.5px;letter-spacing:.06em;color:#8a8a8a}.cd h4{margin:6px 0 4px;font-size:17px;font-weight:600}.cd p{margin:0 0 14px;font-size:13px;color:#737373}.cd-n{display:flex;justify-content:space-between;padding-top:14px;border-top:1px solid #f0f0f0}.cd-n div{text-align:center;min-width:48px}.cd-n b{display:block;font-size:30px;font-weight:300;font-variant-numeric:tabular-nums;letter-spacing:-.02em}.cd-n span{font-size:10.5px;color:#9a9a9a;letter-spacing:.04em}
</style>

<script>
const n=new Date();let t=new Date(n.getFullYear(),11,1);if(t<n)t=new Date(n.getFullYear()+1,11,1);document.getElementById('cdp').textContent=t.toLocaleDateString(undefined,{weekday:'long',month:'long',day:'numeric'});const tick=()=>{let s=Math.max(0,Math.floor((t-new Date())/1000));document.getElementById('cdd').textContent=Math.floor(s/86400);document.getElementById('cdh').textContent=Math.floor(s%86400/3600);document.getElementById('cdm').textContent=Math.floor(s%3600/60)};tick();setInterval(tick,1000);
</script>

<div class='ws'><div class='ws-h'><b id='wst'></b><span><button id='wsp' aria-label='Previous week'>‹</button><button id='wsn' aria-label='Next week'>›</button></span></div><p id='wsr'></p><div class='ws-d' id='wsd'></div></div>

<style>
.ws{width:290px;margin:auto;padding:16px 18px 18px;background:#fff;border-radius:20px;box-shadow:0 4px 24px rgba(0,0,0,.08);font-family:Inter,Arial,sans-serif;color:#111}.ws-h{display:flex;justify-content:space-between;align-items:center}.ws-h b{font-size:16px;font-weight:700}.ws-h button{width:28px;height:28px;border:0;border-radius:8px;background:none;font-size:22px;line-height:1;color:#555;cursor:pointer}.ws-h button:hover{background:#f4f4f4}.ws p{margin:6px 0 14px;font-size:13px;color:#737373}.ws-d{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;gap:2px}.ws-d button{display:flex;flex-direction:column;align-items:center;gap:6px;border:0;background:none;padding:0;cursor:pointer;font-family:inherit}.ws-d small{font-size:11px;font-weight:600;color:#9a9a9a}.ws-d span{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;font-size:15px;color:#222;transition:background .15s}.ws-d button:hover span{background:#f1f1f1}.ws-d button.on span{background:#111;color:#fff;font-weight:700}.ws-d button.on small{color:#111}
</style>

<script>
const now=new Date();let sel=new Date(now.getFullYear(),now.getMonth(),now.getDate()),st=new Date(sel);st.setDate(st.getDate()-st.getDay());const d=document.getElementById('wsd');const L='SMTWTFS';const f=x=>x.toLocaleDateString(undefined,{month:'short',day:'numeric'});const draw=()=>{let h='';for(let i=0;i<7;i++){const x=new Date(st);x.setDate(st.getDate()+i);h+='<button class="'+(x.getTime()===sel.getTime()?'on':'')+'" data-t='+x.getTime()+'><small>'+L[i]+'</small><span>'+x.getDate()+'</span></button>'}d.innerHTML=h;const e=new Date(st);e.setDate(st.getDate()+6);document.getElementById('wst').textContent=sel.toLocaleDateString(undefined,{month:'long',year:'numeric'});document.getElementById('wsr').textContent=f(st)+' – '+f(e)};d.addEventListener('click',e=>{const b=e.target.closest('button');if(b){sel=new Date(+b.dataset.t);draw()}});document.getElementById('wsp').onclick=()=>{st.setDate(st.getDate()-7);draw()};document.getElementById('wsn').onclick=()=>{st.setDate(st.getDate()+7);draw()};draw();
</script>

<div class='rp'><div class='rp-h'><button id='rpp' aria-label='Previous month'>‹</button><b id='rpt'></b><button id='rpn' aria-label='Next month'>›</button></div><p id='rps'>Select a date range</p><div class='rp-w'><span>S</span><span>M</span><span>T</span><span>W</span><span>T</span><span>F</span><span>S</span></div><div class='rp-g' id='rpg'></div></div>

<style>
.rp{width:310px;margin:auto;padding:16px 18px 18px;background:#fff;border-radius:20px;box-shadow:0 4px 24px rgba(0,0,0,.08);font-family:Inter,Arial,sans-serif;color:#111}.rp-h{display:flex;justify-content:space-between;align-items:center}.rp-h b{font-size:15px;font-weight:600}.rp-h button{width:28px;height:28px;border:0;border-radius:8px;background:none;font-size:22px;line-height:1;color:#555;cursor:pointer}.rp-h button:hover{background:#f4f4f4}.rp p{margin:12px 0 10px;font-size:13px;color:#737373}.rp-w,.rp-g{display:grid;grid-template-columns:repeat(7,1fr);text-align:center}.rp-w span{font-size:11px;font-weight:600;color:#9a9a9a;padding-bottom:8px}.rp-g button{height:38px;border:0;background:none;font:inherit;font-size:15px;color:#222;cursor:pointer;border-radius:0}.rp-g button.in{background:#f0f0f0}.rp-g button.s{background:#111;color:#fff;border-radius:19px 0 0 19px}.rp-g button.e{background:#111;color:#fff;border-radius:0 19px 19px 0}.rp-g button.s.e{border-radius:19px}.rp-g button:hover:not(.s):not(.e):not(.in){border-radius:19px;background:#f4f4f4}
</style>

<script>
const now=new Date();let y=now.getFullYear(),m=now.getMonth(),a=null,b=null,hv=null;const g=document.getElementById('rpg'),t=document.getElementById('rpt'),s=document.getElementById('rps');const key=d=>new Date(y,m,d).getTime();const fm=x=>new Date(x).toLocaleDateString(undefined,{month:'short',day:'numeric'});const draw=()=>{t.textContent=new Date(y,m,1).toLocaleDateString(undefined,{month:'long',year:'numeric'});const f=new Date(y,m,1).getDay(),n=new Date(y,m+1,0).getDate();let h='';for(let i=0;i<f;i++)h+='<i></i>';for(let d=1;d<=n;d++){const k=key(d);const end=b||(a&&hv&&hv>a?hv:null);let c='';if(a&&k===a)c+=' s';if(end&&k===end)c+=' e';if(a&&end&&k>a&&k<end)c+=' in';if(a&&!end&&k===a)c+=' e';h+='<button class="'+c+'" data-d='+d+'>'+d+'</button>'}g.innerHTML=h;s.textContent=a&&b?fm(a)+' – '+fm(b):a?'Pick an end date':'Select a date range'};g.addEventListener('click',e=>{const x=e.target.closest('button');if(!x)return;const k=key(+x.dataset.d);if(!a||b){a=k;b=null}else if(k<a){a=k}else{b=k}draw()});g.addEventListener('mouseover',e=>{const x=e.target.closest('button');if(x&&a&&!b){hv=key(+x.dataset.d);draw()}});document.getElementById('rpp').onclick=()=>{m--;if(m<0){m=11;y--}draw()};document.getElementById('rpn').onclick=()=>{m++;if(m>11){m=0;y++}draw()};draw();
</script>

<div class='mc'><div class='mc-h'><button id='mcp' aria-label='Previous month'>‹</button><b id='mct'></b><button id='mcn' aria-label='Next month'>›</button></div><div class='mc-w'><span>S</span><span>M</span><span>T</span><span>W</span><span>T</span><span>F</span><span>S</span></div><div class='mc-g' id='mcg'></div></div>

<style>
.mc{width:290px;margin:auto;padding:16px 18px 18px;background:#fff;border-radius:20px;box-shadow:0 4px 24px rgba(0,0,0,.08);font-family:Inter,Arial,sans-serif;color:#111}.mc-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}.mc-h b{font-size:15px;font-weight:600}.mc-h button{width:28px;height:28px;border:0;border-radius:8px;background:none;font-size:22px;line-height:1;color:#555;cursor:pointer}.mc-h button:hover{background:#f4f4f4}.mc-w,.mc-g{display:grid;grid-template-columns:repeat(7,1fr);text-align:center}.mc-w span{font-size:11px;font-weight:600;color:#9a9a9a;padding-bottom:8px}.mc-g button{height:38px;margin:1px auto;width:38px;border:0;border-radius:50%;background:none;font:inherit;font-size:15px;color:#222;cursor:pointer;transition:background .15s}.mc-g button:hover{background:#f1f1f1}.mc-g button.on{background:#111;color:#fff;font-weight:700}
</style>

<script>
const now=new Date();let y=now.getFullYear(),m=now.getMonth(),sel=now.getDate(),sm=m,sy=y;const g=document.getElementById('mcg'),t=document.getElementById('mct');const draw=()=>{t.textContent=new Date(y,m,1).toLocaleDateString(undefined,{month:'long',year:'numeric'});const f=new Date(y,m,1).getDay(),n=new Date(y,m+1,0).getDate();let h='';for(let i=0;i<f;i++)h+='<i></i>';for(let d=1;d<=n;d++)h+='<button class="'+(d===sel&&m===sm&&y===sy?'on':'')+'" data-d='+d+'>'+d+'</button>';g.innerHTML=h};g.addEventListener('click',e=>{const b=e.target.closest('button');if(b){sel=+b.dataset.d;sm=m;sy=y;draw()}});document.getElementById('mcp').onclick=()=>{m--;if(m<0){m=11;y--}draw()};document.getElementById('mcn').onclick=()=>{m++;if(m>11){m=0;y++}draw()};draw();
</script>

<div class='tb'><div class='th'><h4>Users</h4><span id='usc'>1 selected</span></div><table><thead><tr><th><span class='ck' id='usa'></span></th><th>Name</th><th>Email</th><th>Role</th></tr></thead><tbody id='usb'></tbody></table></div>

<style>
.tb{width:min(580px,96%);margin:auto;background:#fff;border:1px solid #e8e8e8;border-radius:16px;overflow:hidden;font-family:Inter,Arial,sans-serif;color:#111}.th{display:flex;justify-content:space-between;align-items:center;padding:16px 18px 12px}.th h4{margin:0;font-size:15px;font-weight:600}.th span{font-size:13px;color:#737373}.tb table{width:100%;border-collapse:collapse}.tb th{padding:11px 14px;font-size:12.5px;font-weight:500;color:#737373;text-align:left;border-top:1px solid #f0f0f0}.tb td{padding:12px 14px;font-size:14px;border-top:1px solid #f4f4f4}.tb tr.sel td{background:#f8f8f8}.tb td:nth-child(3){color:#737373}.tb td:nth-child(2){font-weight:500}.ck{display:grid;place-items:center;width:17px;height:17px;border:1.5px solid #d4d4d4;border-radius:5px;background:#fff;cursor:pointer;transition:all .15s}.ck.on,.ck.mid{background:#111;border-color:#111}.ck.on:after{content:'';width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg) translate(-1px,-1px)}.ck.mid:after{content:'';width:8px;height:2px;background:#fff;border-radius:2px}
</style>

<script>
const U=[['Arun Kapoor','arun@studio.dev','Admin',1],['Rupam Sen','rupam@studio.dev','Editor',0],['Ava Chen','ava@studio.dev','Viewer',0],['Sofia Ortiz','sofia@studio.dev','Editor',0]];const tb=document.getElementById('usb'),all=document.getElementById('usa'),c=document.getElementById('usc');const draw=()=>{tb.innerHTML=U.map((u,i)=>'<tr class="'+(u[3]?'sel':'')+'"><td><span class="ck '+(u[3]?'on':'')+'" data-i='+i+'></span></td><td>'+u[0]+'</td><td>'+u[1]+'</td><td>'+u[2]+'</td></tr>').join('');const n=U.filter(u=>u[3]).length;all.className='ck '+(n===U.length?'on':n?'mid':'');c.textContent=n+' selected'};tb.addEventListener('click',e=>{const k=e.target.closest('.ck');if(k){U[+k.dataset.i][3]^=1;draw()}});all.addEventListener('click',()=>{const v=U.every(u=>u[3])?0:1;U.forEach(u=>u[3]=v);draw()});draw();
</script>

<div class='tb'><div class='th'><div><h4>Team members</h4><p>4 people</p></div><a href='#'>Invite</a></div><table><thead><tr><th>Member</th><th>Role</th><th>Status</th><th></th></tr></thead><tbody><tr><td><div class='who'><i class='av' style='background:linear-gradient(135deg,#fda4af,#fb7185)'>AK</i><div><b>Arun Kapoor</b><small>arun@studio.dev</small></div></div></td><td>Lead Engineer</td><td><span class='st on'>Active</span></td><td class='m'>⋯</td></tr><tr><td><div class='who'><i class='av' style='background:linear-gradient(135deg,#a5b4fc,#6366f1)'>RS</i><div><b>Rupam Sen</b><small>rupam@studio.dev</small></div></div></td><td>Design Lead</td><td><span class='st on'>Active</span></td><td class='m'>⋯</td></tr><tr><td><div class='who'><i class='av' style='background:linear-gradient(135deg,#86efac,#22c55e)'>AC</i><div><b>Ava Chen</b><small>ava@studio.dev</small></div></div></td><td>Product</td><td><span class='st on'>Active</span></td><td class='m'>⋯</td></tr><tr><td><div class='who'><i class='av' style='background:linear-gradient(135deg,#fcd34d,#f59e0b)'>SO</i><div><b>Sofia Ortiz</b><small>sofia@studio.dev</small></div></div></td><td>Research</td><td><span class='st'>Invited</span></td><td class='m'>⋯</td></tr></tbody></table></div>

<style>
.tb{width:min(580px,96%);margin:auto;background:#fff;border:1px solid #e8e8e8;border-radius:16px;overflow:hidden;font-family:Inter,Arial,sans-serif;color:#111}.th{display:flex;justify-content:space-between;align-items:flex-start;padding:16px 18px 12px}.th h4{margin:0;font-size:15px;font-weight:600}.th p{margin:3px 0 0;font-size:13px;color:#737373}.th a{font-size:13.5px;color:#111;text-decoration:none;padding:4px 8px;border-radius:7px}.th a:hover{background:#f4f4f4}.tb table{width:100%;border-collapse:collapse}.tb th{padding:11px 18px;font-size:12.5px;font-weight:500;color:#737373;text-align:left;border-top:1px solid #f0f0f0}.tb td{padding:11px 18px;font-size:14px;border-top:1px solid #f4f4f4}.av{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;margin-right:12px;color:#fff;font:600 11px Inter,Arial,sans-serif;font-style:normal;flex:none}.who{display:flex;align-items:center}.who b{display:block;font-weight:500}.who small{display:block;font-size:12.5px;color:#737373}.tb td:nth-child(2){color:#525252}.st{display:inline-flex;align-items:center;gap:7px;font-size:13px;color:#404040}.st:before{content:'';width:7px;height:7px;border-radius:50%;background:#d4d4d4}.st.on:before{background:#10b981}.m{color:#9a9a9a;font-size:18px;text-align:center}@media(max-width:520px){.tb th:nth-child(2),.tb td:nth-child(2){display:none}}
</style>

<script>
document.querySelector('.th a').addEventListener('click',e=>e.preventDefault());
</script>

<div class='tb'><div class='th'><h4>Tasks</h4><p id='tkc'>1 of 4 done</p></div><table><thead><tr><th></th><th>Task</th><th>Assignee</th><th>Due</th></tr></thead><tbody id='tkb'></tbody></table></div>

<style>
.tb{width:min(560px,96%);margin:auto;background:#fff;border:1px solid #e8e8e8;border-radius:16px;overflow:hidden;font-family:Inter,Arial,sans-serif;color:#111}.th{padding:16px 18px 12px}.th h4{margin:0;font-size:15px;font-weight:600}.th p{margin:3px 0 0;font-size:13px;color:#737373}.tb table{width:100%;border-collapse:collapse}.tb th{padding:11px 14px;font-size:12.5px;font-weight:500;color:#737373;text-align:left;border-top:1px solid #f0f0f0}.tb td{padding:12px 14px;font-size:14px;border-top:1px solid #f4f4f4;vertical-align:middle}.tb td:nth-child(2){font-weight:500}tr.done td:nth-child(2){text-decoration:line-through;color:#8a8a8a}.ck{display:grid;place-items:center;width:17px;height:17px;border:1.5px solid #d4d4d4;border-radius:5px;background:#fff;cursor:pointer;transition:all .15s}tr.done .ck{background:#111;border-color:#111}tr.done .ck:after{content:'';width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg) translate(-1px,-1px)}.a{display:flex;align-items:center;gap:8px}.a i{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;color:#fff;font:600 9.5px Inter,Arial,sans-serif;font-style:normal}
</style>

<script>
const T=[['Ship table components','AK','Arun','#fb7185','Today',1],['Review notification polish','RS','Rupam','#6366f1','Tomorrow',0],['Update showcase copy','AC','Ava','#22c55e','Mar 12',0],['Fix mobile layout','SO','Sofia','#f59e0b','Mar 14',0]];const tb=document.getElementById('tkb'),c=document.getElementById('tkc');const draw=()=>{tb.innerHTML=T.map((t,i)=>'<tr class="'+(t[5]?'done':'')+'"><td><span class=ck data-i='+i+' role=checkbox></span></td><td>'+t[0]+'</td><td><div class=a><i style="background:'+t[3]+'">'+t[1]+'</i>'+t[2]+'</div></td><td>'+t[4]+'</td></tr>').join('');c.textContent=T.filter(t=>t[5]).length+' of '+T.length+' done'};tb.addEventListener('click',e=>{const k=e.target.closest('.ck');if(k){T[+k.dataset.i][5]^=1;draw()}});draw();
</script>