JSFiddle - React, Tailwind, and code Playground

HTML

<div class="MyClass Group" id="page"><!-- column -->
   <div class="MyClass" id="unkown100"><!-- simple frame --></div>
   <div class="MyClass" id="unkown101"><!-- simple frame --></div>
   <div class="MyClass" id="unkown102"><!-- simple frame --></div>
   <div class="MyClass" id="unkown103"><!-- simple frame --></div>
   <div class="MyClass" id="unkown104"><!-- simple frame --></div>
   <div class="MyClass" id="unkown105"><!-- simple frame --></div>
  </div>

CSS

#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;
  $elem.width(percent + '%');
}

$(document).ready(function() {
  $('div.MyClass > div').each(function(idx, elem) {
  	calc_size($(elem));
  });
});