JSFiddle - React, Tailwind, and code Playground

HTML

<div class="half_width_container left">
    <div class="half_height_container top">
        <div class="proportionalDiv">
            <p>1</p>
        </div>
    </div>
    <div class="half_height_container bottom">
        <div class="proportionalDiv">
            <p>2</p>
        </div>
    </div>
</div>
<div class="half_width_container right">
    <div class="half_height_container top">
        <div class="proportionalDiv">
            <p>3</p>
        </div>
    </div>
    <div class="half_height_container bottom">
        <div class="proportionalDiv">
            <p>4</p>
        </div>
    </div>
</div>

CSS

html, body{
    padding 0; margin: 0;
}
.half_width_container {
  width: 50%;
  height: 100%;
  position: absolute;
  display: inline-block;
}
.half_width_container.left {
  left: 0;
}
.half_width_container.right {
  right: 0;
}
.half_height_container {
  position: relative;
  height: 50%;
  width: 100%;
}
.half_width_container.left .half_height_container.top {background-color: #9595e3;}
.half_width_container.left .half_height_container.bottom {background-color: #9596CC;}
.half_width_container.right .half_height_container.top {background-color: #954874;}
.half_width_container.right .half_height_container.bottom {background-color: #954066;}

.proportionalDiv p {
  font-size: 40px;
  color: black;
  display: block;
  padding: 0;
  margin: 0;
}
.proportionalDiv {
  background-color: white;
  opacity: 0.5;
  height: 100%;
  width: 0;
  padding-right: 33%;
  
  margin: 0 auto;
}