JSFiddle - React, Tailwind, and code Playground

by Nor Sakinah

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 */
height: 100%;
width: 100%;
    margin:0;
    padding:0;
} 


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

.row {
    width: 100%;
    height: 30%;
    margin-left:5%; /*(100%-(30%*3))/2*/ /*since your divs (red,green,blue) have equal width=30%, therefore,margin-left and right should be 5%;.That's why I use margin-left:5% (10%/2)*/
}

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


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

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

}