JSFiddle - React, Tailwind, and code Playground

by Ayyappan Sakthivadivel

HTML

<div class="main-hldr">

  <div class="div-hldr1">
    <div class="div1">test1</div>
  </div>

  <div class="div-hldr2">
    <div class="div2">test2</div>
  </div>

  <div class="div-hldr3">
    <div class="div3">test3</div>
  </div>

  <div class="div-hldr4">
    <div class="div4">test4</div>
  </div>

</div>

<button class="btn-div1">progress1</button>
<button class="btn-div2">progress2</button>
<button class="btn-div3">progress3</button>
<button class="btn-div4">progress4</button>

CSS

.main-hldr{
  width: 100%;
  height: 75px;
  float: left;
  border: #f00 solid 1px;
}

.div-hldr1, .div-hldr2, .div-hldr3, .div-hldr4{
  float:left;
}

.div-hldr1{
  width: 25%;
}

.div-hldr2{
  width: 15%;
}

.div-hldr3{
  width: 25%;
}

.div-hldr4{
  width: 35%;
}

.div1{
  width: 100%;
  height: 75px;
  background-color: #f00;
  float: left;
    -webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */
    transition: width 2s;   
}
.div2{
  width: 100%;
  height: 75px;  
  background-color: #0f0;
  float: left;
    -webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */
    transition: width 2s;   
}
.div3{
  width: 100%;
  height: 75px;  
  background-color: #00f;
  float: left;
    -webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */
    transition: width 2s;   
}
.div4{
  width: 100%;
  height: 75px;  
  background-color: #0ff;
  float: left;
    -webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */
    transition: width 2s;  
}
.div-color1, .div-color2, .div-color3, .div-color4{
  width: 0%;
  display:block;
}

button{
  margin: 20px;
  float:left;
}

JavaScript

$(".btn-div1").click(function(){
    $(".div1").toggleClass("div-color1");
});
$(".btn-div2").click(function(){
    $(".div2").toggleClass("div-color2");
});
$(".btn-div3").click(function(){
    $(".div3").toggleClass("div-color3");
});
$(".btn-div4").click(function(){
    $(".div4").toggleClass("div-color4");
});