JSFiddle - React, Tailwind, and code Playground

by Felis Catus

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<h1 id="the_numbers">0</h1>

<script>
var output = $('h1');
var isPaused = false;
var time = 0;
var t = window.setInterval(function() {
if(!isPaused) {
time++;
output.toggleClass('fade');
setTimeout(function(){
	output.text(time);
  }, 200);
}
}, 1000);


$('.pause').on('click', function(e) {
e.preventDefault();
isPaused = true;
});

$('.play').on('click', function(e) {
e.preventDefault();
isPaused = false;
});
</script>

CSS

h1 {
  transition: opacity 400ms cubic-bezier(.5,-20,.5,-20);
  opacity: 1;
}
h1.fade {
  opacity: 0.9;
  transition: opacity 400ms cubic-bezier(.5,20,.5,20);
}