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