MongoDB Atlas

<div class="atlas"><header><b>MONGODB ATLAS · FLEX</b><strong id="cost">$8/mo</strong></header><div class="ops"><span>Peak operations / second</span><b id="peak">100 ops/s</b></div><div class="stairs"><i></i><i></i><i></i><i></i><i></i></div><input id="ops" type="range" min="100" max="500" step="100" value="100" aria-label="Peak operations per second"><footer>Free M0: 512 MB · Flex: 5 GB, $8–$30/mo</footer></div>

.atlas{width:min(94vw,720px);height:min(88vh,330px);padding:clamp(9px,2.5vmin,18px);background:var(--surface);border:1px solid var(--line);border-radius:14px;display:flex;flex-direction:column;gap:clamp(7px,1.8vmin,13px);font:600 clamp(11px,2.4vmin,15px)/1.25 system-ui,sans-serif}.atlas header,.ops{display:flex;justify-content:space-between;gap:8px}.atlas header strong{color:var(--accent);font-size:clamp(15px,3.7vmin,24px)}.atlas .ops span,.atlas footer{color:var(--muted)}.atlas .stairs{flex:1;min-height:45px;display:flex;align-items:end;gap:clamp(5px,1.5vmin,11px)}.atlas .stairs i{flex:1;height:20%;background:var(--line);border-radius:5px 5px 0 0;transition:height .35s,background .35s}.atlas .stairs i:nth-child(2){height:35%}.atlas .stairs i:nth-child(3){height:50%}.atlas .stairs i:nth-child(4){height:65%}.atlas .stairs i:nth-child(5){height:80%}.atlas .stairs i.on{background:var(--accent)}.atlas input{width:100%;accent-color:var(--accent)}.atlas footer{font-size:clamp(10px,2.2vmin,13px)}

const prices=[8,15,21,26,30],input=document.getElementById('ops');let timer;function draw(n){let index=Math.max(0,Math.min(4,Math.ceil(n/100)-1));input.value=String(n);document.getElementById('peak').textContent=n+' ops/s';document.getElementById('cost').textContent='$'+prices[index]+'/mo';document.querySelectorAll('.stairs i').forEach((bar,i)=>bar.classList.toggle('on',i<=index))}draw(100);let step=0;timer=setInterval(()=>{step=(step+1)%5;draw((step+1)*100)},1200);input.addEventListener('input',()=>{clearInterval(timer);draw(Number(input.value))})