JSFiddle - React, Tailwind, and code Playground

HTML

<body onload="myFunction();">

<div class="circle">
<span id="num">999</span>
</div>

</body>

CSS

.circle{
  width:100px;
  height:100px;
  background-color:red;
  border-radius:50%;
  text-align:center;
}
div > span{
  display:inline-block;
  font-size:60px;
}

JavaScript

function myFunction(){

var size = document.getElementById('num').innerHTML;

switch(size.length) {
  case 3:
    // code block
        // code block
    document.getElementById('num').style.fontSize = "60px";
    document.getElementById('num').style.marginTop = "15px";
    break;
  case 2:
    // code block
    document.getElementById('num').style.fontSize = "85px";
    document.getElementById('num').style.marginTop = "0px";
    break;
  case 1:
    // code block
    document.getElementById('num').style.fontSize = "85px";
    document.getElementById('num').style.marginTop = "0px";
    break;
  default:
    // code block
}

}