JSFiddle - React, Tailwind, and code Playground

by mihaibirsan

HTML

<b>
  <i><height>HH</height></i>
  <u>
    <x><width>WW</width></x>
    <y>
      <z></z>
      <w>
        <c></c>
        <c></c>
      </w>
      <z></z>
    </y>
    <x></x>
  </u>
  <i></i>
</b>

CSS

width, height {
  display: flex; align-items: center; justify-content: center;
  position: absolute;
  top: 0; left: 0;
  font: 10px sans-serif;
  color: white;
}

height {
  bottom: 0; right: 80%;
}

width {
  bottom: 80%; right: 0;
}

b,i,u,x,y,z,w,c { display: flex; position: relative; }

b { flex-direction: column;
    /* width: 440px; height: 280px; */ background: limegreen; }
i { /* height: 50px; */ background: green; }
i:after {
  content: ""; display: block; width: 0; margin: 0 auto;
  border-left: 1px solid white;
}
u { flex: 1; }

x { flex-direction: column;
    /* width: 70px; */ background: blue; }
x:after {
  content: ""; display: block; height: 0; margin: auto 0;
  border-top: 1px solid white;
}
y { flex: 1; align-items: center; }

z { /* width: 70px; height: 100px; */
    background: pink; }
w { flex: 1; flex-direction: column;
    align-items: center; justify-content: space-between;
    align-self: stretch; }

c { /* width: 140px; height: 50px; */ background: salmon; }

z:after {
  content: ""; display: block; width: 100%; height: 0; margin: auto 0;
  border-top: 1px dashed rgba(255, 255, 255, .5);
}
c:after {
  content: ""; display: block; width: 0; height: 100%; margin: 0 auto;
  border-left: 1px dashed rgba(255, 255, 255, .5);
}

JavaScript

var initialWidth = 58;
var initialHeight = 38;
var targetZoom = 2;

var targetArea = initialWidth * initialHeight * targetZoom;
var zoomedWidth = Math.sqrt( initialWidth / initialHeight * targetArea );
var zoomedHeight = Math.sqrt( initialHeight / initialWidth * targetArea );

console.log(zoomedWidth, zoomedHeight);

// var padLR = Math.floor( (zoomedWidth - initialWidth) / 2 );
// var padTB = Math.floor( (zoomedHeight - initialHeight) / 2 );
var padLR = Math.floor( initialWidth / 6 );
var padTB = Math.floor( initialWidth / 4 );

while (6*padLR > initialWidth) padLR--;
while (4*padTB > initialHeight) padTB--;

$('width').text(padLR);
$('height').text(padTB);

$('b').width(initialWidth*10).height(initialHeight*10);
$('i').height(padTB*10);
$('x').width(padLR*10);
$('z').width(padLR*10).height(padTB*10*2);
$('c').width(padLR*10*2).height(padTB*10);