JSFiddle - React, Tailwind, and code Playground

by Galina Georgieva

HTML

<div class="counter container">
 	<ul class='flip first'>
		<li>
            <a href="#">
                <div class="up">
                    <div class="shadow"></div>
                    <div class="inn">2</div>
                </div>
                <div class="down">
                    <div class="shadow"></div>
                    <div class="inn">2</div>
               </div>
            </a>
		</li>
	  	<li>
            <a href="#">
                <div class="up">
                    <div class="shadow"></div>
                    <div class="inn">3</div>
                </div>
                <div class="down">
                    <div class="shadow"></div>
                    <div class="inn">3</div>
               </div>
            </a>
		</li>
	</ul>
  	<ul class='flip second'>
		<li>
            <a href="#">
                <div class="up">
                    <div class="shadow"></div>
                    <div class="inn">2</div>
                </div>
                <div class="down">
                    <div class="shadow"></div>
                    <div class="inn">2</div>
               </div>
            </a>
		</li>
	  <li>
            <a href="#">
                <div class="up">
                    <div class="shadow"></div>
                    <div class="inn">4</div>
                </div>
                <div class="down">
                    <div class="shadow"></div>
                    <div class="inn">4</div>
               </div>
            </a>
		</li>
	</ul>
</div>

CSS

/*
 Theme Name:   GymBase Child
 Description:  GymBase customizations for powerhousegymegypt
 Template:     gymbase
 Version:      1.0.0
 License:      GNU General Public License version 3.0
 License URI:  http://www.gnu.org/licenses/gpl-3.0.html
 Text Domain:  gymbase-child
*/

.counter-text{
	 font-family: "Droid Serif";
	 font-style: italic;
	  font-size: 16px;
	  
}


/* Reset */
.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

/* Main */
ul.flip{
  list-style: none;
  float: left;
  box-sizing: border-box;
}


.counter.container {
    text-align: center;
    position: relative;
    left: 50%;
    top: 70%;
    width: 140px;
    height: 90px;
    margin: -10px 0 0 -70px;
}

#social {
    text-align: center;
    position: absolute;
    bottom: 14%;
    width: 100%;
}
#social p{
  margin-bottom: 10px;
}

#social .flip,
#social .li {
 
    display: inline-block;
}

/* Skeleton */

.digits{
  	position: absolute;
	top: 5%;
	right: 0%;
 }

.flip {
    position: relative;
    float: left;
    margin: 5px;
    width: 60px;
    height: 90px;
    font-size: 80px;
    font-weight: bold;
    line-height: 87px;
    border-radius: 6px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, .7);
}

.flip li {
    z-index: 1;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;

}

.flip li:first-child {
    z-index: 2;
}

.flip li a {
    display: block;
    height: 100%;
    perspective: 200px;
}

.flip li a div {
    z-index: 1;
    position: absolute;
    left: 0;
    width: 100%;
    height: 50%;
    overflow: hidden;
}

.flip li a div .shadow {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 2;
}

.flip li a div.up {
    transform-origin: 50% 100%;
    top: 0;
}

.flip li a div.up:after {
  content: "";
  position:absolute;
  top:44px;
  left:0;
  z-index: 5;
    width: 100%;
  height: 3px;
  background-color: rgba(0,0,0,.4);
}

.flip...

JavaScript

setInterval(function () {
    
	  play(3, 4);
  }, 5000);

  
  
function play(a, b) {
  console.log(a, b);
  var i = '';
  if(b.toString().length < 2) var i = "0";	  
  
  var subNum = b.toString().split('').reverse();
  
  if(i == '0') subNum.push(i);
  
  subNum.reverse();
 
  $(".counter .flip.first li:last-child .inn").html(subNum[0]);
  $(".counter .flip.second li:last-child .inn").html(subNum[1]);
  
  var current = $(".flip li.active");  
     
  if (current.html() == undefined) {
	current = $(".ul:last-child li:last-child");
	current.addClass("before")
	  .removeClass("active")
	  .prev("li")
	  .addClass("active")
		.one('webkitAnimationEnd oanimationend msAnimationEnd animationend',
        function (e) {
            $(this).removeClass('before');
        });
	//.removeClass("before");
    }
    else {
        current.addClass("before")
		  .removeClass("active")
		  .prev("li")
		  .addClass("active")	  
	  	  .one('webkitAnimationEnd oanimationend msAnimationEnd animationend',
        function (e) {
            $(this).removeClass('before');
        });
    }
  
}