JSFiddle - React, Tailwind, and code Playground

HTML

<div class="box">
Area 1
</div>

<div class="box">
    Area 2
</div>

<div class="box">
Area 3
</div>

<div class="box">
Area 4
</div>

CSS

html, body {
    width: 100%;
    height: 100%;
}

.box {
    float: left;
    width:49%;
    height: 49%;
    border-style: solid;
    border-width:1%;
}