JSFiddle - React, Tailwind, and code Playground

HTML

<span class="display">0</span>
<span class="run">Start!</span>

CSS

body {
  background-color: #000000;
  padding: 10px;
}

span.run, span.display {
  padding: 10px;
  color: #00ff00;
  font-family: monospace;
  border: 1px #00ff00 solid;
  margin: 10px;
}

span.run {
  cursor: pointer;
  font-weight: bold;
}

span.run:hover {
  background-color: #00ff00;
  color: #000000;
}

JavaScript

var display = document.querySelector('span.display'),
    starter = document.querySelector('span.run');

function displayCount(duration){
    var end = new Date().getTime() + duration,
        cycles = 0,
        frame = 1000/30; //30ps

    (function loop(){
        var now = new Date().getTime(),
            countend = now + frame;

        while(new Date().getTime() < countend) {
           cycles++;
        }

        display.innerHTML = cycles;

        if(now < end) {
            window.requestAnimationFrame(loop);
        }

    })();
}

starter.addEventListener('click', function(){
   displayCount(3000);
});