JSFiddle - React, Tailwind, and code Playground

by calder12

HTML

<div class="middlecolumn">
                <div class="left1">
                    <div id="linear1"  >linear 1</div>
                </div>
                <div class="left2">
                    <div id="linear2" >linear 2</div>
                </div>
                <div class="left3">
                    <div id="linear3" >linear 3</div>
                </div>
                <div class="right1">
                    <div id="linear4" ></div>
                </div>
                <div class="right2">
                    <div id="linear5" ></div>
                    <!-- <div class="point"></div> -->
                </div>
                <div class="right3">
                    <div id="linear6" ></div>
                </div>
                </div>

CSS

.line1{
background-color: yellow;
}
.line2{
background-color: red;

}
.line3{
background-color: green;
}

JavaScript

$(document).ready(function(){
	setTimeout(function(){
  	$("#linear1").addClass("line1");
    setTimeout(function(){
  		$("#linear1").removeClass("line1");
  		$("#linear2").addClass("line2");	
      setTimeout(function(){
  			$("#linear2").removeClass("line2");
  			$("#linear3").addClass("line3");	
      },1000);
    },1000);
  },1000);
 });