JSFiddle - React, Tailwind, and code Playground

by secretgspot

HTML

<div><p><p><p><p><p><p><p></div>
<div><p><p><p><p><p><p><p></div>
<div><p><p><p><p><p><p><p></div>
<div><p><p><p><p><p><p><p></div>

CSS

/*----- body -----*/
body{
  margin: 0;
  padding: 15px 55px 0 0;
  background-color: #fff;
  overflow: hidden;
}

/*----- digits[sec] -----*/
div{
  position: relative;
  float: right;
  width: 100px; height: 100px;
  margin: 0; padding: 0;
  -webkit-transform: skew(-10deg) scale(.5, .45);
  -moz-transform:    skew(-10deg) scale(.5, .45);
  transform:         skew(-10deg) scale(.5, .45);
}

/*----- digits[ms] -----*/
div:nth-child(1){
  width: 55px; height: 60px;
  margin-top: 56px;
  margin-left: 15px;
  -webkit-transform: skew(-10deg) scale(.30, .27);
  -moz-transform:    skew(-10deg) scale(.30, .27);
  transform:         skew(-10deg) scale(.30, .27);
}

/*----- decimal point -----*/
div:nth-child(1):before{
  display: block;
  top: 260px;
  left: -55px;
  width: 34px; height: 31px;
  -webkit-border-radius: 10px;
  -moz-border-radius:    10px;
  border-radius:         10px;
  content: "";
}

/*----- segments & dp -----*/
p, p:before, p:after,
div:nth-child(1):before{
  position: absolute;
  margin: 0; padding: 0;
  background-color: #09f;
}

/*----- rectangles -----*/
p{
  width: 29px; height: 100px;
  -webkit-animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
}

/*----- rectangles for center segments -----*/
p:nth-child(4){ height: 110px; }/* HEIGHT + 10 */

/*----- triangles -----*/
p:before, p:after{
  display: block;
  width: 29px; height: 29px;
  -webkit-transform: rotate(45deg);
  -moz-transform:    rotate(45deg);
  transform:         rotate(45deg);
  content: "";
}
p:before{ top:    -15px; }/* -WIDTH / 2 */
p:after { bottom: -15px; }/* -WIDTH / 2 */

/*----- triangles for center segments -----*/
p:nth-child(4):before, p:nth-child(4):after{
  left: 4px;
  width: 20px; height: 20px;
}
p:nth-child(4):before{ top:    -10px; }
p:nth-child(4):after { bottom: -10px; }

/*----- keyframes -----
                      
          p2          
                      
      p1      p3      
                      
          p4          
 ...