JSFiddle - React, Tailwind, and code Playground

HTML

<div id="title" class="fullwidth background">Title</div>

<div id="main" class="fullwidth cf">
    <div id="Panel0" class="onethird background">Title</div>
    <div id="Panel1"class="onethird background">Title</div>
    <div id="Panel2"class="onethird background">Title</div>
</div>

<div id="Panel3" class="fullwidth background">Title</div>

CSS

.fullwidth { height : 2em;}
.cf { height: 200px; width: 100%; display: table; }
.onethird { height: 100%; display: table-cell; }
.background {    /* To make it easier to calculate widths */
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */ 
    
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px; 
    background: #4d85bb;
    border: 2px solid #376089;
    color: white;
}