Font weight

<div class="stage" id="stage"></div>

#stage{display:grid;gap:3px;width:min(92%,380px)}
.step{display:flex;align-items:baseline;gap:10px;padding:3px 8px;border-radius:6px;transition:background .3s}
.step.active{background:color-mix(in srgb, var(--accent) 14%, transparent)}
.num{width:30px;flex:none;font:10px ui-monospace,Menlo,monospace;color:var(--muted);text-align:right}
.sample{font-family:system-ui,-apple-system,sans-serif;color:var(--fg);font-size:18px}
.name{font:10px ui-monospace,Menlo,monospace;color:var(--muted);margin-left:auto}
.step.active .sample{color:var(--accent)}

const weights = [[100,'Thin'],[200,'Extra Light'],[300,'Light'],[400,'Regular'],[500,'Medium'],[600,'SemiBold'],[700,'Bold'],[800,'Extra Bold'],[900,'Black']];
const stage = document.getElementById('stage');
weights.forEach(function(w){
  const row = document.createElement('div');
  row.className = 'step';
  const num = document.createElement('span');
  num.className = 'num';
  num.textContent = w[0];
  const sample = document.createElement('span');
  sample.className = 'sample';
  sample.style.fontWeight = w[0];
  sample.textContent = 'Weight';
  const name = document.createElement('span');
  name.className = 'name';
  name.textContent = w[1];
  row.appendChild(num);
  row.appendChild(sample);
  row.appendChild(name);
  stage.appendChild(row);
});
const rows = [...stage.children];
let idx = 0;
setInterval(function(){
  rows.forEach(function(r){ r.classList.remove('active'); });
  rows[idx].classList.add('active');
  idx = (idx + 1) % rows.length;
}, 500);