JSFiddle - React, Tailwind, and code Playground

by Spencer Smith

HTML

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap" rel="stylesheet">

<p><span>1K</span> Followers</p>

CSS

body {
  font-family: "Inter", sans-serif;
  text-align: right;
}
p {
  font-size: 3rem;
  color: #536471;
  margin: 100px;
}
span {
  font-weight: bold;
  color: black;
}

JavaScript

const span = document.querySelector('span');

let k = 1;
const id = setInterval(() => {
  span.innerText = k + 'K';
  k++;
  if (k > 100) {
    k += 3;
  }
  if (k >= 200) {
    clearInterval(id);
    span.innerText = '199K';
    setTimeout(() => {
      span.innerText = '6';
    }, 1000);
  }
}, 20);