JSFiddle - React, Tailwind, and code Playground

by calder12

HTML

<head>
    <script src="http://www.calderonline.com/jquery.flip.min.js"></script>
</head>
<body>
<div class="box" id="1"></div>
<div class="box" id="2"></div>
<div class="box" id="3"></div>
<div class="box" id="4"></div>
<div class="box" id="5"></div>
<div class="box" id="6"></div>
    </body>

CSS

.box{height:50px; width:50px; background-color:red;display:inline-block;}
.black{background-color:black;}

JavaScript

$(document).ready(function(){
   setInterval(function(){
   var id= Math.floor(Math.random() * (6-1+1)) + 1;
   var elem = $("#"+id);
   if(elem.data('flipped')) {
      elem.revertFlip();
      elem.data('flipped',false)
   } else {
      elem.flip({
      direction:'lr',
      speed: 350,
      onBefore: function(){
      elem.html(elem.siblings('.sponsorData').html());
    }
  });
      elem.data('flipped',true);
    }

  },1000);
});