JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <input type="number" id='myNumber' value="40000" step='100'>
</div>

CSS

div[comma-value]{
    position:relative;
}
div[comma-value]:before{
    content: attr(comma-value);
    position:absolute;
    left:0;
}
div[comma-value] input{
    color:#fff;
}

JavaScript

myNumber.value = commify(myNumber.value)
myNumber.addEventListener("change", function(){
  commify(event.target.value)
})

function commify(value){
  var chars = value.split("").reverse()
  var withCommas = []
  for(var i = 1; i <= chars.length; i++ ){
    withCommas.push(chars[i-1])
    if(i%3==0 && i != chars.length ){  
      withCommas.push(",")
    }
  }
  var val = withCommas.reverse().join("")
  myNumber.parentNode.setAttribute("comma-value",val)
}