JSFiddle - React, Tailwind, and code Playground

HTML

<div class="MyClass222 Group" id="page">
<div class="My">
   <div class="MyClass" id="unkown100"></div>
   </div>
   <div class="My">
   <div class="MyClass" id="unkown101"></div>
      </div>
   <div class="My">
   <div class="MyClass" id="unkown102"></div>
      </div>
   <div class="My">
   <div class="MyClass" id="unkown103"></div>
      </div>
   <div class="My">
   <div class="MyClass" id="unkown104"></div>
      </div>
   <div class="My">
   <div class="MyClass" id="unkown105"></div>
  </div>
    </div>

CSS

.My {
  position: relative;
  width: 0px;
  height: 0px;
}

#unkown100 {
    z-index: 4;
    width: 70px;
    height: 70px;
    left: 10px;
    background-color: #0071BC;
    position: absolute;
    }
    
#unkown101 {
    z-index: 3;
    width: 90px;
    height: 70px;
    left: 105px;
    background-color: #29ABE2;
    position: absolute;
}

#unkown102 {
    z-index: 2;
    width: 110px;
    height: 70px;
    left: 225px;
    background-color: #22B573;
    position: absolute;
    }
    
    #unkown103 {
    z-index: 4;
    width: 130px;
    height: 70px;
    left: 10px;
    top:100px;
    background-color: #0071BC;
    position: absolute;
    }
    
#unkown104 {
    z-index: 3;
    width: 110px;
    height: 70px;
    left: 170px;
    top:100px;
    background-color: #29ABE2;
    position: absolute;
}

#unkown105 {
    z-index: 2;
    width: 110px;
    height: 70px;
    left: 315px;
    top:100px;
    background-color: #22B573;
    position: absolute;
    }

JavaScript

function calc_size($elem) {
	var percent = $elem.width() / $(document).width() * 100;
   var MyLeft = $elem.offset().left / $(document).width() * 100;
  $elem.width(percent + '%').css({"left" : MyLeft + '%'});
}


$(document).ready(function() {
  $('div.MyClass222 > div > div').each(function(idx, elem) {$(elem).parent().removeClass("My")
  	calc_size($(elem));
  });
});