JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
    <div class="row">
        <div id="red">
        </div>
        
        <div id="green">
        </div>
        
        <div id="blue">
        </div>
        
    </div>
</div>

CSS

html,body  {
background: #FFFFFF;
font-family: "Helvetica", "Arial", "Tahoma"; /* need font default set */
margin: 0 auto;
height: 100%;
width: 100%;
} 


.wrapper {
max-width: 96%;
height: 100%;
width: 90%;
    margin:0 auto;
}

.row {
float:left;
width: 100%;
height: 30%;
}

#red {
    background-color:red;
    height:30%;
width: 33.3%;
    float:left;
}

#green {
    background-color:green;
    height:30%;
width: 33.3%;
        float:left;
}

#blue {
    background-color:blue;
    height:30%;
width: 33.3%;
        float:left;
}