Elements

<div class='tb'><div class='th'><h4>Transactions</h4><p>This month</p></div><table><thead><tr><th>Description</th><th>Date</th><th class='r'>Amount</th></tr></thead><tbody id='ttb'></tbody></table><div class='pg'><button id='tp' aria-label='Previous'>‹</button><span id='tl'>Page 1 of 2</span><button id='tn' aria-label='Next'>›</button></div></div>

<style>
.tb{width:min(540px,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 14px}.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:12px 18px;font-size:12.5px;font-weight:500;color:#737373;text-align:left;border-top:1px solid #f0f0f0}.tb td{padding:14px 18px;font-size:14.5px;border-top:1px solid #f4f4f4}.tb td:nth-child(2){color:#737373}.r{text-align:right!important}.pg{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;border-top:1px solid #f0f0f0;font-size:13px;color:#525252}.pg button{width:30px;height:30px;border:0;border-radius:8px;background:none;font-size:20px;color:#111;cursor:pointer}.pg button:hover:not(:disabled){background:#f4f4f4}.pg button:disabled{color:#d0d0d0;cursor:default}
</style>

<script>
const P1=[['Payment from Northwind','Mar 8','+$420.00'],['AWS infrastructure','Mar 8','−$31.20'],['Stripe payout','Mar 7','+$890.00'],['Refund — Order #3207','Mar 6','−$64.00'],['Client retainer','Mar 5','+$250.00']],P2=[['Domain renewal','Mar 4','−$18.00'],['Payment from Harbor Labs','Mar 3','+$640.00'],['Design software','Mar 2','−$24.00'],['Consulting invoice','Mar 1','+$1,200.00'],['Office supplies','Feb 28','−$46.50']];let p=0;const tb=document.getElementById('ttb'),a=document.getElementById('tp'),b=document.getElementById('tn'),l=document.getElementById('tl');const draw=()=>{tb.innerHTML=(p?P2:P1).map(x=>'<tr><td>'+x[0]+'</td><td>'+x[1]+'</td><td class=r>'+x[2]+'</td></tr>').join('');a.disabled=!p;b.disabled=!!p;l.textContent='Page '+(p+1)+' of 2'};a.onclick=()=>{p=0;draw()};b.onclick=()=>{p=1;draw()};draw();
</script>

<div class='tb'><div class='th'><h4>Recent orders</h4><p>Last 7 days</p></div><table><thead><tr><th>Order</th><th>Customer</th><th><button data-k='1'>Date <i></i></button></th><th class='r'><button data-k='2'>Total <i></i></button></th><th>Status</th></tr></thead><tbody id='otb'></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}.tb table{width:100%;border-collapse:collapse}.tb th{padding:12px 18px;font-size:12.5px;font-weight:500;color:#737373;text-align:left;border-bottom:1px solid #f0f0f0}.tb td{padding:13px 18px;font-size:14px;border-top:1px solid #f4f4f4}.tb tbody tr:first-child td{border-top:0}.r{text-align:right!important}.th{padding:16px 18px 14px}.th h4{margin:0;font-size:15px;font-weight:600}.th p{margin:3px 0 0;font-size:13px;color:#737373}.tb th button{all:unset;cursor:pointer;display:inline-flex;gap:4px;align-items:center}.tb th button i{font-style:normal;opacity:.35;font-size:11px}.tb th button.on i{opacity:1}.tb td:first-child{font-weight:600}.tb td:nth-child(3){color:#737373}.tb td:last-child{font-size:13px}
</style>

<script>
const D=[['#3210','Northwind Studio','Mar 8',248,'Fulfilled'],['#3209','Harbor Labs','Mar 8',92,'Processing'],['#3208','Elm & Co.','Mar 7',156,'Fulfilled'],['#3207','Papertrail','Mar 6',64,'Cancelled'],['#3206','Studio Nine','Mar 5',312,'Fulfilled']];let k=1,d=-1;const tb=document.getElementById('otb'),bs=document.querySelectorAll('.tb th button');const draw=()=>{const r=[...D].sort((a,b)=>k===2?(a[3]-b[3])*d:(a[0]<b[0]?-1:1)*d*-1*(k===1?-1:1));tb.innerHTML=r.map(x=>'<tr><td>'+x[0]+'</td><td>'+x[1]+'</td><td>'+x[2]+'</td><td class=r>$'+x[3].toFixed(2)+'</td><td>'+x[4]+'</td></tr>').join('');bs.forEach(b=>{const on=+b.dataset.k===k;b.classList.toggle('on',on);b.lastElementChild.textContent=on?(d<0?'↓':'↑'):'⇅'})};bs.forEach(b=>b.addEventListener('click',()=>{const n=+b.dataset.k;if(k===n)d=-d;else{k=n;d=-1}draw()}));draw();
</script>

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

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

<form class='su' id='suf'><label for='su1'>Full name</label><input id='su1' placeholder='Jane Cooper' required><label for='su2'>Email</label><input id='su2' type='email' placeholder='you@company.com' required><label for='su3'>Password</label><input id='su3' type='password' placeholder='Min. 8 characters' minlength='8' required><label for='su4'>Confirm password</label><input id='su4' type='password' placeholder='Re-enter password' required><label class='su-c'><input type='checkbox' id='suk'><span></span>I agree to the <a href='#'>Terms</a> and <a href='#'>Privacy Policy</a></label><button type='submit' id='sub' disabled>Create account</button></form>

<style>
.su{width:min(340px,92%);margin:auto;font-family:Inter,Arial,sans-serif;color:#111}.su label{display:block;margin-bottom:7px;font-size:13.5px;font-weight:500}.su input:not([type=checkbox]){width:100%;box-sizing:border-box;height:40px;padding:0 14px;margin-bottom:14px;font:inherit;font-size:13.5px;background:#fff;border:1px solid #ececec;border-radius:10px;outline:0;transition:border-color .15s,box-shadow .15s}.su input:not([type=checkbox]):focus{border-color:#111;box-shadow:0 0 0 3px rgba(17,17,17,.08)}.su input.bad{border-color:#ef4444!important;box-shadow:0 0 0 3px rgba(239,68,68,.12)!important}.su input::placeholder{color:#a3a3a3}.su-c{display:flex!important;align-items:center;gap:10px;margin:4px 0 16px!important;font-weight:400!important;font-size:13px!important;cursor:pointer}.su-c input{position:absolute;opacity:0}.su-c span{flex:none;width:16px;height:16px;border:1.5px solid #bdbdbd;border-radius:4px;display:grid;place-items:center;transition:all .15s}.su-c input:checked+span{background:#111;border-color:#111}.su-c input:checked+span:after{content:'';width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg) translate(-1px,-1px)}.su-c a{color:#111;text-decoration:underline;text-underline-offset:3px;font-weight:500}.su button{width:100%;height:42px;border:0;border-radius:10px;background:#0a0a0a;color:#fff;font:600 14px Inter,Arial,sans-serif;cursor:pointer;transition:opacity .15s}.su button:disabled{opacity:.35;cursor:not-allowed}
</style>

<script>
const p=document.getElementById('su3'),q=document.getElementById('su4'),k=document.getElementById('suk'),b=document.getElementById('sub');const chk=()=>{q.classList.toggle('bad',q.value.length>0&&q.value!==p.value);b.disabled=!k.checked||p.value!==q.value||!p.value};[p,q,k].forEach(x=>x.addEventListener('input',chk));k.addEventListener('change',chk);document.getElementById('suf').addEventListener('submit',e=>{e.preventDefault();b.textContent='Account created ✓'});document.querySelectorAll('.su a').forEach(a=>a.addEventListener('click',e=>e.preventDefault()));
</script>

<form class='nl' id='nlf'><h3>Stay in the loop</h3><p>Weekly updates on new components and releases. No spam.</p><div class='nl-r'><input type='email' placeholder='Enter your email' required aria-label='Email'><button type='submit'><span>Subscribe</span><svg width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M9 6l6 6-6 6'/></svg></button></div><small>Unsubscribe anytime. We never share your email.</small></form>

<style>
.nl{width:min(380px,92%);margin:auto;padding:26px;background:#fff;border-radius:18px;box-shadow:0 1px 3px rgba(0,0,0,.06);font-family:Inter,Arial,sans-serif;color:#111}.nl h3{margin:0 0 10px;font-size:24px;font-weight:700;letter-spacing:-.015em}.nl p{margin:0 0 22px;font-size:14px;line-height:1.7;color:#737373}.nl-r{display:flex;gap:8px}.nl input{flex:1;min-width:0;height:42px;padding:0 14px;font:inherit;font-size:13.5px;background:#fff;border:1px solid #efefef;border-radius:10px;outline:0;transition:border-color .15s,box-shadow .15s}.nl input:focus{border-color:#111;box-shadow:0 0 0 3px rgba(17,17,17,.08)}.nl input::placeholder{color:#a3a3a3}.nl button{display:flex;align-items:center;gap:7px;padding:0 18px;height:42px;border:0;border-radius:10px;background:#0a0a0a;color:#fff;font:600 14px Inter,Arial,sans-serif;cursor:pointer;white-space:nowrap}.nl small{display:block;margin-top:12px;font-size:12px;color:#8a8a8a}
</style>

<script>
const f=document.getElementById('nlf'),b=f.querySelector('button span');f.addEventListener('submit',e=>{e.preventDefault();b.textContent='Subscribed ✓';setTimeout(()=>{b.textContent='Subscribe';f.reset()},2200)});
</script>

<form class='lg' id='lgf'><h3>Welcome back</h3><p class='lg-s'>Sign in to continue to your account.</p><label for='lg1'>Email</label><input id='lg1' type='email' placeholder='you@company.com' required><div class='lg-h'><label for='lg2'>Password</label><a href='#'>Forgot password?</a></div><div class='lg-w'><input id='lg2' type='password' placeholder='Enter your password' required><button type='button' id='lge' aria-label='Show password'><svg width='17' height='17' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12z'/><circle cx='12' cy='12' r='3'/></svg></button></div><label class='lg-c'><input type='checkbox'><span></span>Remember me for 30 days</label><button type='submit' class='lg-go'>Sign in <svg width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M9 6l6 6-6 6'/></svg></button><p class='lg-f'>Don't have an account? <a href='#'>Create one</a></p></form>

<style>
.lg{width:min(340px,92%);margin:auto;font-family:Inter,Arial,sans-serif;color:#111}.lg h3{margin:0 0 8px;font-size:24px;font-weight:700;letter-spacing:-.01em}.lg-s{margin:0 0 20px;font-size:13.5px;color:#737373}.lg label{display:block;margin-bottom:8px;font-size:13.5px;font-weight:500}.lg input:not([type=checkbox]){width:100%;box-sizing:border-box;height:40px;padding:0 14px;font:inherit;font-size:13.5px;background:#fff;border:1px solid #ececec;border-radius:10px;outline:0;margin-bottom:16px;transition:border-color .15s,box-shadow .15s}.lg input:not([type=checkbox]):focus{border-color:#111;box-shadow:0 0 0 3px rgba(17,17,17,.08)}.lg input::placeholder{color:#a3a3a3}.lg-h{display:flex;justify-content:space-between;align-items:baseline}.lg-h a{font-size:12.5px;color:#111;text-decoration:underline;text-underline-offset:3px}.lg-w{position:relative}.lg-w input{padding-right:42px!important}.lg-w button{position:absolute;right:6px;top:5px;width:30px;height:30px;display:grid;place-items:center;border:0;background:none;color:#8a8a8a;cursor:pointer;border-radius:8px}.lg-c{display:flex!important;align-items:center;gap:10px;margin:2px 0 18px!important;font-weight:400!important;cursor:pointer}.lg-c input{position:absolute;opacity:0}.lg-c span{width:16px;height:16px;border:1.5px solid #bdbdbd;border-radius:4px;display:grid;place-items:center;transition:all .15s}.lg-c input:checked+span{background:#111;border-color:#111}.lg-c input:checked+span:after{content:'';width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg) translate(-1px,-1px)}.lg-go{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:42px;border:0;border-radius:10px;background:#0a0a0a;color:#fff;font:600 14px Inter,Arial,sans-serif;cursor:pointer}.lg-f{margin:16px 0 0;text-align:center;font-size:13px;color:#737373}.lg-f a{color:#111;font-weight:600;text-decoration:underline;text-underline-offset:3px}
</style>

<script>
const i=document.getElementById('lg2'),b=document.getElementById('lge');b.addEventListener('click',()=>{const s=i.type==='password';i.type=s?'text':'password';b.setAttribute('aria-label',s?'Hide password':'Show password')});document.getElementById('lgf').addEventListener('submit',e=>e.preventDefault());document.querySelectorAll('.lg a').forEach(a=>a.addEventListener('click',e=>e.preventDefault()));
</script>

<form class='rp' id='rpf'><a href='#' class='rp-b'><svg width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M15 6l-6 6 6 6'/></svg>Back to sign in</a><h3>Reset your password</h3><p>Enter the email linked to your account and we'll send a reset link.</p><label for='rp1'>Email address</label><input id='rp1' type='email' placeholder='you@company.com' required><button type='submit' id='rpb'><span>Send reset link</span><svg width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M9 6l6 6-6 6'/></svg></button></form>

<style>
.rp{width:min(330px,90%);margin:auto;padding:6px 0;font-family:Inter,Arial,sans-serif;color:#111}.rp-b{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;color:#525252;text-decoration:underline;text-underline-offset:3px}.rp h3{margin:18px 0 10px;font-size:22px;font-weight:700;letter-spacing:-.01em}.rp p{margin:0 0 20px;font-size:13.5px;line-height:1.7;color:#737373}.rp label{display:block;margin-bottom:8px;font-size:13.5px;font-weight:500}.rp input{width:100%;box-sizing:border-box;height:40px;padding:0 14px;font:inherit;font-size:13.5px;background:#fff;border:1px solid #ececec;border-radius:10px;outline:0;transition:border-color .15s,box-shadow .15s}.rp input:focus{border-color:#111;box-shadow:0 0 0 3px rgba(17,17,17,.08)}.rp input::placeholder{color:#a3a3a3}.rp button{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:42px;margin-top:16px;border:0;border-radius:10px;background:#0a0a0a;color:#fff;font:600 14px Inter,Arial,sans-serif;cursor:pointer}
</style>

<script>
const f=document.getElementById('rpf'),b=document.getElementById('rpb');f.addEventListener('submit',e=>{e.preventDefault();b.firstChild.textContent='Sending...';setTimeout(()=>{b.firstChild.textContent='Check your inbox';},900);setTimeout(()=>{b.firstChild.textContent='Send reset link';f.reset()},2800)});f.querySelector('.rp-b').addEventListener('click',e=>e.preventDefault());
</script>

<form class='cf' id='cff'><p class='cf-s'>We usually reply within one business day.</p><div class='cf-r'><div><label for='cf1'>Name</label><input id='cf1' placeholder='Your name' required></div><div><label for='cf2'>Email</label><input id='cf2' type='email' placeholder='you@email.com' required></div></div><label for='cf3'>Subject</label><input id='cf3' placeholder='How can we help?'><div class='cf-h'><label for='cf4'>Message</label><span id='cfc'>0/1000</span></div><textarea id='cf4' maxlength='1000' placeholder='Tell us more about your project...' required></textarea><button type='submit' id='cfb'>Send message</button></form>

<style>
.cf{width:min(360px,92%);margin:auto;font-family:Inter,Arial,sans-serif;color:#111;}.cf-s{margin:0 0 16px;font-size:13.5px;color:#737373}.cf-r{display:grid;grid-template-columns:1fr 1fr;gap:12px}.cf label{display:block;margin:12px 0 6px;font-size:13.5px;font-weight:500}.cf-r label{margin-top:0}.cf input,.cf textarea{width:100%;box-sizing:border-box;padding:0 12px;height:38px;font:inherit;font-size:13.5px;background:#fff;border:1px solid #e5e5e5;border-radius:9px;outline:0;transition:border-color .15s,box-shadow .15s}.cf textarea{height:90px;padding:10px 12px;resize:vertical}.cf input::placeholder,.cf textarea::placeholder{color:#a3a3a3}.cf input:focus,.cf textarea:focus{border-color:#111;box-shadow:0 0 0 3px rgba(17,17,17,.08)}.cf-h{display:flex;justify-content:space-between;align-items:baseline}.cf-h span{font-size:12px;color:#a3a3a3}.cf button{width:100%;height:42px;margin-top:16px;border:0;border-radius:10px;background:#0a0a0a;color:#fff;font:600 14px Inter,Arial,sans-serif;cursor:pointer;transition:transform .12s}.cf button:active{transform:scale(.985)}
</style>

<script>
const f=document.getElementById('cff'),t=document.getElementById('cf4'),c=document.getElementById('cfc'),b=document.getElementById('cfb');t.addEventListener('input',()=>c.textContent=t.value.length+'/1000');f.addEventListener('submit',e=>{e.preventDefault();b.textContent='Message sent ✓';setTimeout(()=>{b.textContent='Send message';f.reset();c.textContent='0/1000'},1800)});
</script>

<div class='ws'><button type='button' id='wsb'><span class='ws-i' id='wsi'>A</span><span class='ws-n'><b id='wsn'>App UI</b><small id='wsp'>Pro plan</small></span><svg width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M8 9l4-4 4 4M8 15l4 4 4-4'/></svg></button><ul id='wsl' role='listbox'></ul></div>

<style>
.ws{position:relative;width:240px;margin:auto;font-family:Inter,Arial,sans-serif;color:#111}.ws>button{display:flex;align-items:center;gap:12px;width:100%;padding:10px 14px 10px 10px;text-align:left;font:inherit;background:#fff;border:1px solid #ececec;border-radius:12px;cursor:pointer;box-shadow:0 1px 2px rgba(0,0,0,.04)}.ws-i{display:grid;place-items:center;width:34px;height:34px;border-radius:9px;background:#f4f4f4;font:700 13px Inter,Arial,sans-serif}.ws-n{flex:1}.ws-n b{display:block;font-size:14.5px;font-weight:500}.ws-n small{display:block;font-size:12.5px;color:#8a8a8a}.ws>button svg{color:#8a8a8a}.ws ul{display:none;position:absolute;left:0;right:0;top:100%;z-index:5;margin:6px 0 0;padding:5px;list-style:none;background:#fff;border:1px solid #e5e5e5;border-radius:12px;box-shadow:0 12px 30px rgba(0,0,0,.14)}.ws.open ul{display:block;animation:ws-in .15s ease}.ws li{display:flex;align-items:center;gap:10px;padding:8px;font-size:14px;border-radius:9px;cursor:pointer}.ws li:hover{background:#f4f4f4}.ws li span{display:grid;place-items:center;width:24px;height:24px;border-radius:7px;background:#f4f4f4;font:700 11px Inter,Arial,sans-serif}.ws li.on{font-weight:600}@keyframes ws-in{from{opacity:0;transform:translateY(-4px)}}
</style>

<script>
const r=document.querySelector('.ws'),l=document.getElementById('wsl');const W=[['App UI','Pro plan'],['Marketing Site','Team plan'],['Side Project','Free plan']];let c=0;const d=()=>{l.innerHTML=W.map((w,i)=>'<li role=option class="'+(i===c?'on':'')+'"><span>'+w[0][0]+'</span>'+w[0]+'</li>').join('')};d();document.getElementById('wsb').addEventListener('click',()=>r.classList.toggle('open'));l.addEventListener('click',e=>{const i=[...l.children].indexOf(e.target.closest('li'));if(i>-1){c=i;document.getElementById('wsi').textContent=W[i][0][0];document.getElementById('wsn').textContent=W[i][0];document.getElementById('wsp').textContent=W[i][1];d();r.classList.remove('open')}});document.addEventListener('mousedown',e=>{if(!r.contains(e.target))r.classList.remove('open')});
</script>

<div class='pm'><button type='button' id='pmb'><span class='pm-a'>JD</span><span class='pm-n'><b>Jordan Dale</b><small>jordan@example.com</small></span><svg width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg></button><ul id='pmm' role='menu'><li>Profile</li><li>Settings</li><li class='d'>Sign out</li></ul></div>

<style>
.pm{position:relative;display:inline-block;margin:auto;font-family:Inter,Arial,sans-serif;color:#111}.pm>button{display:flex;align-items:center;gap:12px;padding:6px 16px 6px 6px;border:1px solid #f0f0f0;border-radius:99px;background:#fff;cursor:pointer;font:inherit;text-align:left;box-shadow:0 2px 8px rgba(0,0,0,.05)}.pm-a{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,#fca5a5,#f97316);color:#fff;font:600 13px Inter,Arial,sans-serif}.pm-n b{display:block;font-size:15px;font-weight:500}.pm-n small{display:block;font-size:12.5px;color:#8a8a8a}.pm>button svg{color:#8a8a8a;margin-left:14px;transition:transform .2s}.pm.open>button svg{transform:rotate(180deg)}.pm ul{display:none;position:absolute;left:0;right:0;top:100%;z-index:5;margin:8px 0 0;padding:5px;list-style:none;background:#fff;border:1px solid #e5e5e5;border-radius:14px;box-shadow:0 12px 30px rgba(0,0,0,.14)}.pm.open ul{display:block;animation:pm-in .15s ease}.pm li{padding:9px 12px;font-size:14px;border-radius:9px;cursor:pointer}.pm li:hover{background:#f4f4f4}.pm li.d{color:#dc2626}.pm li.d:hover{background:#fef2f2}@keyframes pm-in{from{opacity:0;transform:translateY(-4px)}}
</style>

<script>
const r=document.querySelector('.pm');document.getElementById('pmb').addEventListener('click',()=>r.classList.toggle('open'));document.getElementById('pmm').addEventListener('click',()=>r.classList.remove('open'));document.addEventListener('mousedown',e=>{if(!r.contains(e.target))r.classList.remove('open')});
</script>

<div class='sm'><button type='button' id='smb' aria-label='Share'><svg width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><circle cx='18' cy='5' r='2.6'/><circle cx='6' cy='12' r='2.6'/><circle cx='18' cy='19' r='2.6'/><path d='M8.3 10.8l7.4-4.2M8.3 13.2l7.4 4.2'/></svg></button><ul id='smm' role='menu'><li id='smc'>Copy link</li><li>Email</li><li>Message</li></ul></div>

<style>
.sm{position:relative;display:inline-block;margin:auto;font-family:Inter,Arial,sans-serif;color:#111}.sm>button{display:grid;place-items:center;width:38px;height:38px;border:1px solid #efefef;border-radius:11px;background:#fff;color:#444;cursor:pointer;box-shadow:0 1px 2px rgba(0,0,0,.05)}.sm>button:hover{color:#111}.sm ul{display:none;position:absolute;left:50%;top:100%;z-index:5;min-width:150px;margin:8px 0 0 -75px;padding:5px;list-style:none;background:#fff;border:1px solid #e5e5e5;border-radius:12px;box-shadow:0 12px 30px rgba(0,0,0,.14)}.sm ul.on{display:block;animation:sm-in .15s ease}.sm li{padding:8px 11px;font-size:13.5px;border-radius:8px;cursor:pointer}.sm li:hover{background:#f4f4f4}@keyframes sm-in{from{opacity:0;transform:translateY(-4px)}}
</style>

<script>
const b=document.getElementById('smb'),m=document.getElementById('smm'),c=document.getElementById('smc');b.addEventListener('click',()=>m.classList.toggle('on'));c.addEventListener('click',e=>{e.stopPropagation();try{navigator.clipboard&&navigator.clipboard.writeText(location.href)}catch(x){}c.textContent='Copied!';setTimeout(()=>{c.textContent='Copy link';m.classList.remove('on')},900)});m.addEventListener('click',e=>{if(e.target!==c)m.classList.remove('on')});document.addEventListener('mousedown',e=>{if(!b.parentNode.contains(e.target))m.classList.remove('on')});
</script>

<div class='bn'><button type='button' id='bnb' aria-label='Notifications'><svg width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9a6 6 0 1 1 12 0c0 6 2.5 7.5 2.5 7.5h-17S6 15 6 9z'/><path d='M10 20a2 2 0 0 0 4 0'/></svg><i id='bni'>2</i></button><div class='bn-p' id='bnp'><h6>Notifications</h6><p><b>New comment</b><span>Maya replied to your post</span></p><p><b>Build finished</b><span>Version 2.4 is ready</span></p><p class='m'>You are all caught up</p></div></div>

<style>
.bn{position:relative;display:inline-block;margin:auto;font-family:Inter,Arial,sans-serif;color:#111}.bn>button{position:relative;display:grid;place-items:center;width:38px;height:38px;border:1px solid #efefef;border-radius:11px;background:#fff;color:#444;cursor:pointer;box-shadow:0 1px 2px rgba(0,0,0,.05)}.bn>button:hover{color:#111}.bn i{position:absolute;right:-7px;top:-8px;min-width:18px;height:18px;padding:0 4px;box-sizing:border-box;border-radius:99px;background:#222;color:#fff;font:700 10.5px/18px Inter,Arial,sans-serif;text-align:center;font-style:normal;transition:transform .2s}.bn i.h{transform:scale(0)}.bn-p{display:none;position:absolute;left:50%;top:100%;z-index:5;width:220px;margin:8px 0 0 -110px;padding:6px;background:#fff;border:1px solid #e5e5e5;border-radius:14px;box-shadow:0 12px 30px rgba(0,0,0,.14);animation:bn-in .15s ease}.bn-p.on{display:block}.bn-p h6{margin:6px 8px;font-size:12px;font-weight:600;color:#8a8a8a;letter-spacing:.04em;text-transform:uppercase}.bn-p p{margin:0;padding:8px;border-radius:9px;font-size:13.5px}.bn-p p:not(.m):hover{background:#f4f4f4}.bn-p b,.bn-p span{display:block}.bn-p span{font-size:12.5px;color:#737373}.bn-p .m{text-align:center;font-size:12px;color:#a3a3a3}@keyframes bn-in{from{opacity:0;transform:translateY(-4px)}}
</style>

<script>
const b=document.getElementById('bnb'),p=document.getElementById('bnp'),n=document.getElementById('bni');b.addEventListener('click',()=>{p.classList.toggle('on');if(p.classList.contains('on'))n.classList.add('h')});document.addEventListener('mousedown',e=>{if(!b.parentNode.contains(e.target))p.classList.remove('on')});
</script>

<div class='kb'><span>Quarterly report</span><button type='button' id='kbb' aria-label='More actions'><svg width='16' height='16' viewBox='0 0 24 24' fill='currentColor'><circle cx='12' cy='5' r='1.8'/><circle cx='12' cy='12' r='1.8'/><circle cx='12' cy='19' r='1.8'/></svg></button><ul id='kbm' role='menu'><li>Share</li><li>Rename</li><li class='d'>Delete</li></ul></div>

<style>
.kb{position:relative;display:flex;align-items:center;justify-content:space-between;gap:34px;width:230px;margin:auto;padding:8px 8px 8px 14px;background:#fff;border:1px solid #efefef;border-radius:12px;font-family:Inter,Arial,sans-serif;font-size:15px;color:#111;box-shadow:0 1px 2px rgba(0,0,0,.04)}.kb button{display:grid;place-items:center;width:30px;height:30px;border:0;border-radius:8px;background:none;color:#737373;cursor:pointer}.kb button:hover,.kb.open button{background:#f4f4f4;color:#111}.kb ul{display:none;position:absolute;right:6px;top:100%;z-index:5;min-width:140px;margin:6px 0 0;padding:5px;list-style:none;background:#fff;border:1px solid #e5e5e5;border-radius:12px;box-shadow:0 12px 30px rgba(0,0,0,.14)}.kb.open ul{display:block;animation:kb-in .15s ease}.kb li{padding:8px 10px;font-size:13.5px;border-radius:8px;cursor:pointer}.kb li:hover{background:#f4f4f4}.kb li.d{color:#dc2626}.kb li.d:hover{background:#fef2f2}@keyframes kb-in{from{opacity:0;transform:translateY(-4px)}}
</style>

<script>
const r=document.querySelector('.kb');document.getElementById('kbb').addEventListener('click',()=>r.classList.toggle('open'));document.getElementById('kbm').addEventListener('click',()=>r.classList.remove('open'));document.addEventListener('mousedown',e=>{if(!r.contains(e.target))r.classList.remove('open')});
</script>

<div class='sd'><button type='button' class='sd-b' id='sdb' aria-haspopup='listbox'><span><small>Sort</small><b id='sdv'>Newest first</b></span><svg width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg></button><ul class='sd-l' id='sdl' role='listbox'></ul></div>

<style>
.sd{position:relative;width:190px;margin:auto;font-family:Inter,Arial,sans-serif;color:#111}.sd-b{display:flex;justify-content:space-between;align-items:center;width:100%;padding:10px 14px;text-align:left;font:inherit;background:#fff;border:1px solid #e5e5e5;border-radius:12px;cursor:pointer;box-shadow:0 1px 2px rgba(0,0,0,.04);transition:border-color .15s}.sd-b:hover{border-color:#cfcfcf}.sd-b small{display:block;font-size:12px;color:#8a8a8a}.sd-b b{display:block;margin-top:2px;font-size:14.5px;font-weight:400}.sd-b svg{color:#737373;transition:transform .2s}.sd.open .sd-b svg{transform:rotate(180deg)}.sd-l{display:none;position:absolute;left:0;right:0;top:100%;z-index:5;margin:6px 0 0;padding:5px;list-style:none;background:#fff;border:1px solid #e5e5e5;border-radius:12px;box-shadow:0 12px 30px rgba(0,0,0,.12)}.sd.open .sd-l{display:block;animation:sd-in .15s ease}.sd-l li{display:flex;justify-content:space-between;padding:8px 10px;font-size:14px;border-radius:8px;cursor:pointer}.sd-l li:hover{background:#f4f4f4}.sd-l li.on:after{content:'✓';color:#111}@keyframes sd-in{from{opacity:0;transform:translateY(-4px)}}
</style>

<script>
const r=document.querySelector('.sd'),b=document.getElementById('sdb'),l=document.getElementById('sdl'),v=document.getElementById('sdv');const O=['Newest first','Oldest first','Name A–Z','Most popular'];let c=0;const d=()=>{l.innerHTML=O.map((x,i)=>'<li role=option class="'+(i===c?'on':'')+'">'+x+'</li>').join('')};d();b.addEventListener('click',()=>r.classList.toggle('open'));l.addEventListener('click',e=>{const i=[...l.children].indexOf(e.target.closest('li'));if(i>-1){c=i;v.textContent=O[i];d();r.classList.remove('open')}});document.addEventListener('mousedown',e=>{if(!r.contains(e.target))r.classList.remove('open')});
</script>

<div class='fm'><div class='fm-t' id='fmt' tabindex='0'><span class='fm-i'><svg width='34' height='34' viewBox='0 0 24 24' fill='#fff'><path d='M3 7.5A2.5 2.5 0 0 1 5.5 5h3.6c.5 0 1 .2 1.3.6L11.6 7H18.5A2.5 2.5 0 0 1 21 9.5v8a2.5 2.5 0 0 1-2.5 2.5h-13A2.5 2.5 0 0 1 3 17.5z'/></svg></span><b>Card Component</b><small>Right-click or tap</small></div><ul class='fm-m' id='fmm' role='menu'><li role='menuitem'>Open</li><li role='menuitem'>Rename</li><li role='menuitem'>Duplicate</li><li class='d' role='menuitem'>Delete</li></ul></div>

<style>
.fm{position:relative;display:inline-block;margin:auto;font-family:Inter,Arial,sans-serif;color:#111;user-select:none}.fm-t{display:flex;flex-direction:column;align-items:center;gap:8px;cursor:pointer;outline:0}.fm-i{display:grid;place-items:center;width:88px;height:88px;border-radius:26px;background:#a5f3fc;box-shadow:0 6px 18px rgba(34,211,238,.25);transition:transform .2s}.fm-t:active .fm-i{transform:scale(.94)}.fm-t b{font-size:13px;font-weight:500}.fm-t small{font-size:12px;color:#c4c4c4}.fm-m{display:none;position:absolute;left:50%;top:100%;z-index:5;min-width:150px;margin:6px 0 0 -75px;padding:5px;list-style:none;background:#fff;border:1px solid #e5e5e5;border-radius:12px;box-shadow:0 12px 30px rgba(0,0,0,.14);transform-origin:top;animation:fm-in .15s ease}.fm-m.on{display:block}.fm-m li{padding:8px 11px;font-size:13.5px;border-radius:8px;cursor:pointer}.fm-m li:hover{background:#f4f4f4}.fm-m li.d{color:#dc2626}.fm-m li.d:hover{background:#fef2f2}@keyframes fm-in{from{opacity:0;transform:scale(.96)}}
</style>

<script>
const t=document.getElementById('fmt'),m=document.getElementById('fmm');const T=v=>m.classList.toggle('on',v);t.addEventListener('contextmenu',e=>{e.preventDefault();T(true)});t.addEventListener('click',()=>T(!m.classList.contains('on')));m.addEventListener('click',()=>T(false));document.addEventListener('mousedown',e=>{if(!t.parentNode.contains(e.target))T(false)});document.addEventListener('keydown',e=>{if(e.key==='Escape')T(false)});
</script>

<label class='sw'><span class='sw-t'><b>Email notifications</b><small>Receive product updates and release notes.</small></span><input type='checkbox' role='switch' checked><span class='sw-k'></span></label>

<style>
.sw{display:flex;justify-content:space-between;align-items:center;gap:16px;width:min(330px,88%);margin:auto;font-family:Inter,Arial,sans-serif;color:#111;cursor:pointer}.sw-t b{display:block;font-size:14px;font-weight:500}.sw-t small{display:block;margin-top:3px;font-size:12.5px;color:#737373}.sw input{position:absolute;opacity:0;pointer-events:none}.sw-k{flex:none;position:relative;width:40px;height:24px;border-radius:99px;background:#d4d4d4;transition:background .2s}.sw-k:after{content:'';position:absolute;left:3px;top:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .22s cubic-bezier(.3,1.3,.5,1)}.sw input:checked~.sw-k{background:#171717}.sw input:checked~.sw-k:after{transform:translateX(16px)}.sw input:focus-visible~.sw-k{box-shadow:0 0 0 3px rgba(17,17,17,.2)}
</style>

<div class='sl'><label for='sl1'>Country</label><div class='sl-w'><select id='sl1'><option value='' selected disabled>Select an option</option><option>United States</option><option>Canada</option><option>United Kingdom</option><option>India</option><option>Australia</option></select><svg width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg></div><p>Shipping rates vary by region.</p></div>

<style>
.sl{width:min(330px,88%);margin:auto;font-family:Inter,Arial,sans-serif;color:#111}.sl label{display:block;font-size:14px;font-weight:500;margin-bottom:8px}.sl-w{position:relative}.sl select{width:100%;box-sizing:border-box;height:40px;padding:0 38px 0 14px;font:inherit;font-size:14px;color:#111;background:#fff;border:1px solid #e5e5e5;border-radius:10px;outline:0;cursor:pointer;-webkit-appearance:none;appearance:none;box-shadow:0 1px 2px rgba(0,0,0,.04);transition:border-color .15s,box-shadow .15s}.sl select:invalid,.sl select:has(option[disabled]:checked){color:#a3a3a3}.sl select:focus{border-color:#111;box-shadow:0 0 0 3px rgba(17,17,17,.08)}.sl-w svg{position:absolute;right:12px;top:12px;color:#737373;pointer-events:none}.sl p{margin:8px 0 0;font-size:12.5px;color:#737373}
</style>

<div class='sf'><svg width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><path d='M20 20l-3.6-3.6'/></svg><input type='search' placeholder='Search components...' aria-label='Search'></div>

<style>
.sf{position:relative;width:min(330px,88%);margin:auto;font-family:Inter,Arial,sans-serif}.sf svg{position:absolute;left:14px;top:12px;color:#8a8a8a;transition:color .15s}.sf input{width:100%;box-sizing:border-box;height:40px;padding:0 14px 0 40px;font:inherit;font-size:14px;color:#111;background:#fff;border:1px solid #e5e5e5;border-radius:10px;outline:0;box-shadow:0 1px 2px rgba(0,0,0,.04);transition:border-color .15s,box-shadow .15s;-webkit-appearance:none}.sf input::placeholder{color:#a3a3a3}.sf input:focus{border-color:#111;box-shadow:0 0 0 3px rgba(17,17,17,.08)}.sf:focus-within svg{color:#111}
</style>