JSFiddle - React, Tailwind, and code Playground

HTML

<div class="time">
  <span class="count top flipTop">2</span>
	<span class="count top">1</span>
	<span class="count bottom flipBottom">1</span>
  <span class="count bottom">2</span>
</div>

CSS

@keyframes flip {
    0% {
      transform: rotateX(0);
      z-index: 50;
    }
    10% {
      transform: rotateX(-180deg);
      z-index: 50;
    }
    90% {
      transform: rotateX(-180deg);
      z-index: 1;
    }
    90.0001% {
      transform: rotateX(0);
    }
    100% {
      transform: rotateX(0);
    }
  }

.flipTop {
    animation-name: flip;
    animation-duration: 10s;
    animation-fill-mode: both;
}
.flipBottosm {
    animation-name: flipBottom;
    animation-duration: 1s;
     animation-delay: 1s;
    animation-fill-mode: both;
    z-index: 2;
}

JavaScript

var x = 1;

setInterval(function() {
	
  var up   = x++,
      down = up--,
			data = "<span class='count curr top flipTop'>" + down + "</span><span class='count next top'>" + up + "</span><span class='count next bottom flipBottom'>" + up + "</span><span class='count curr bottom'>" + up + "</span>";
  document.getElementsByClassName("time")[0].innerHTML = data;

}, 1000);