JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <div class="row">
        <div class="full-row">
            
        </div>
    </div>
    
    <div class="row">
        <div class="half-row"></div>
        <div class="half-row"></div>
    </div>
    
    <div class="row">
        <div class="third-row"></div>
        <div class="third-row"></div>
        <div class="third-row"></div>
    </div>
</div>

CSS

#container{
    padding:5px;
    width:100%;
    height:500px;
    display:block;
    background-color:black;
}

.row{
    font-size: 0px; /*Remove extra margins!*/
    min-height:50px;
    margin-top:25px;
    width:90%;
    background-color:white;
    margin-left:auto;
    margin-right:auto;
    padding:2%;
}

.full-row{
    display:block;
    width:100%;
    height:25px;
    background-color:blue;
}
.half-row{
    word-spacing: -1;
    display:inline-block;
    width:48%;
    margin:1%;
    height:25px;
    background-color:blue;
}

.third-row{
    display:inline-block;
    width:31%;
    margin:1%;
    height:25px;
    background-color:blue;
}