JSFiddle - React, Tailwind, and code Playground
HTML
<div class="box" id="a"><p class="p1">test
</p></div>
<div class="box" id="b"><p class="p1">test</p></div>
<div class="box" id="c"><p class="p1">test</p></div>
<div class="box" id="d"><p class="p1">test</p></div>
CSS
*{margin:0px;}
.box{
width:50%;
height:50vh;
float:left;
}
.p1{margin-left:45%;
margin-top:25%;
}
#a{background:#82FFFB;}
#b{background:#FFE382;}
#c{background:#E1FF83;}
#d{background:#FEBD87;}
JavaScript
// Equal sized boxes covering entire window