Animated Stat Cards

<div class="sd"><div class="sd-c"><div class="sd-ic" style="background:#ff477e22;color:#ff477e">↑</div><div><b id="s1">0</b><span>Revenue</span></div></div><div class="sd-c"><div class="sd-ic" style="background:#5b6cff22;color:#5b6cff">◷</div><div><b id="s2">0</b><span>Sessions</span></div></div><div class="sd-c"><div class="sd-ic" style="background:#16a34a22;color:#16a34a">✓</div><div><b id="s3">0</b><span>Conversions</span></div></div></div>

body{background:#f6f7fa}
.sd{display:flex;flex-direction:column;gap:12px;font-family:system-ui,sans-serif}
.sd-c{display:flex;align-items:center;gap:14px;width:240px;background:#fff;border:1px solid #eceef3;border-radius:14px;padding:16px 18px;box-shadow:0 4px 14px rgba(20,25,50,.05)}
.sd-ic{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;font-size:18px;font-weight:700;flex:none}
.sd-c b{display:block;font-size:24px;color:#1a1f36}
.sd-c span{font-size:13px;color:#8a93ad}

function cu(id,to,pre,suf){var el=document.getElementById(id),s=null;function step(t){if(!s)s=t;var p=Math.min((t-s)/1500,1);el.textContent=(pre||'')+Math.floor((1-Math.pow(1-p,3))*to).toLocaleString()+(suf||'');if(p<1)requestAnimationFrame(step)}requestAnimationFrame(step)}
cu('s1',48200,'$');cu('s2',12940);cu('s3',873);