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: 50%;
    height: 50%;
}