JSFiddle - React, Tailwind, and code Playground

by Ayyappan Sakthivadivel

HTML

<div class="backgo">
test
</div>

<div class="background1">
  <img src="https://cdn.wheesearch.com/choir/img/brush-color.svg" height="75" />
</div>

<div class="background2">
  Background2sdfdsds dsfds fdsfdsf
</div>

<div class="background3">
  Background3
</div>

<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

.backgo{
  height: 500px;
  width: 500px;
  background: url("https://banner2.kisspng.com/20180413/iqe/kisspng-jack-o-lantern-emoji-halloween-5ad17705b68c81.6921891415236769337477.jpg") no-repeat; 
}


.background1{
  width: 100%;
  height: 75px;
  background: url("https://cdn.wheesearch.com/choir/img/brush-color.svg") no-repeat; /*filled image*/  
background-size: contain;
  border: #f00 solid 2px;
  position: absolute;
      -webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */
    transition: width 2s;  
}

.background2{
  width: 80%;
  height: 75px;
  background-color: #fff; 
  border: #0f0 solid 2px;
/*position: absolute;
right:0;*/
    -webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */
    transition: width 2s;  
}

.background3{
  width: 100%;
  height: 75px;
  background-image: url("https://cdn.wheesearch.com/choir/img/brushoutline.svg "); /*stroked image*/
  background-size: contain;
  border: #00f solid 2px;
/*position: absolute;*/
    -webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */
    transition: width 2s;  
}

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

.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: 0%;
  height: 75px;
  background-color: #f00;
  float: left;
    -webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */
    transition: width 2s;   
}
.div2{
  width: 0%;
  height: 75px;  
  background-color: #0f0;
  float: left;
    -webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */
    transition: width 2s;   
}
.div3{
  width: 0%;
  height: 75px;  
  background-color: #00f;
  float: left;
    -webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */
    transition: width 2s;   
}
.div4{
  width: 0%;
  height: 75px;  
  background-color: #0ff;
  float: left;
    -webkit-transition: width 2s; /* For Safari 3.1 to...

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");
});