JSFiddle - React, Tailwind, and code Playground

HTML

<div id="header">            
            </div><!-- header -->

                <div id="mainView">
                </div><!-- mainView -->

          
                    <div class="square"></div><!-- dummy -->
                    <div class="square"></div><!-- dummy -->
                    <div class="square"></div><!-- dummy -->
                    <div class="square"></div><!-- dummy -->

CSS

* {
        -webkit-tap-highlight-color: rgba(0,0,0,0); /* make transparent link selection, adjust last value opacity 0 to 1.0 */
        margin: 0;
        padding: 0;
    }

    html {
        height: 100%;
        margin: 0;
        padding: 0;
    }

    body {
        -webkit-touch-callout: none;                /* prevent callout to copy image, etc when tap to hold */
        -webkit-text-size-adjust: none;             /* prevent webkit from resizing text to fit */
        -webkit-user-select: none;                  /* prevent copy paste, to allow, change 'none' to 'text' */
        font-family:'HelveticaNeue-Light', 'HelveticaNeue', Helvetica, Arial, sans-serif;
        font-size: 12px;
        text-transform: uppercase;
        height: 100%;
        width: 100%;
        margin: 0px;
        padding: 0px;
    }

  

    #header {
        height: 20%;
        width: 100%;
        background: #ffb8c4;
    }

    #mainView {
        flex: 1;
        width: 69%;
        height: 100%;
        float: left;
        background: green;
    
    }

    .square {        
        flex: 1;
        -webkit-flex: 1;
        width: 30%;
        border: 1px solid white;
        background: green;
        height: 25%;
        float:right;
    }