JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div id="f1_container">
<div id="f1_card" class="shadow">
  <div class="front face">
    <img src="http://upload.wikimedia.org/wikipedia/commons/1/19/Wikipedia_logo_red.png"/>
  </div>
  <div class="back face">
    <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTi0ZoIKXIslu2c--rwyLTRy7-GU9yrL2Nlt_HwROm1VgzOcxC2v_3i4Q"/>
  </div>
</div>
</div>
    
    <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
   
    </body>

CSS

#f1_container {
      position: relative;
      margin: 10px auto;
      width: 69px;
      height: 69px;
      z-index: 1;
}
#f1_container {
      perspective: 1000;
    
}
#f1_card {
    width: 100%;
    height: 100%;
}

.face {
      position: absolute;
      width: 100%;
      height: 100%;
      backface-visibility: hidden; 
}
.face.back {
      display: block;
      transform: rotateY(180deg);
      /*box-sizing: border-box;*/
      color: white;
      text-align: center;
      background-color: #aaa;
}

.face.back {
    animation:
        BackRotate 2000ms linear 0ms infinite;
}

.face.front {
    animation:
        Rotate 2000ms linear 0ms infinite;
}

img {
    width: 69px;
    height:69px;
}

@keyframes Rotate {
  from {transform:rotateY(0deg);}
  to {transform:rotateY(360deg);}
}
 
@keyframes BackRotate {
  from {transform:rotateY(180deg);}
  to {transform:rotateY(540deg);}
}