JSFiddle - React, Tailwind, and code Playground

by YameenYasin

HTML

<div class="team1 size">
    <div class="brown"></div> 
    <div class="purple"></div> 
    <div class="orange"></div>
</div>
<div class="team2 size">
    <div class="brown"></div> 
    <div class="purple"></div> 
    <div class="orange"></div>
</div>
<div class="team3 size">    
    <div class="brown"></div> 
    <div class="purple"></div> 
    <div class="orange"></div>
</div>
<div class="team4 size">      
    <div class="brown"></div> 
    <div class="purple"></div> 
    <div class="orange"></div>
</div>

CSS

.size { float:left; width:100px; height:100px; overflow:hidden; margin:0 4px; }
.brown  { background:brown;    width:100px; height:100px;  }
 .purple { background:purple;  width:100px; height:100px;  }
.orange { background:orange;   width:100px; height:100px;  }

JavaScript

$(document).ready(function(){

    var randomNumber = Math.floor(Math.random() * 3000);

    var interval = setInterval(function(){
        $('.team1 div:first').insertAfter( $('.team1 div:last') );
    }, 100);

    setTimeout(function(){
        //clearInterval(interval);
    }, randomNumber);

});