JSFiddle - React, Tailwind, and code Playground

HTML

<body>
            <div class="topnav" id="myTopnav">
                <nav>
                    <div>
                        <a href="index.html">HOME</a>
                        <a href="about.html">ABOUT</a>
                        <a href="expertise.html">EXPERTISE</a>
                        <img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png">
                        <a href="industries.html">INDUSTRIES</a>
                        <a href="friends.html">FRIENDS</a>
                        <a href="contact.html">CONTACT</a>
     
                    </div>
                </nav>
            </div>
            <div class="content">
                <!--first row-->
                <div class="myrow">
                    <div class="colsolid">Johnson </div><!--
                    --><div class="col">Coke</div><!--
                    --><div class="colsolid">Nissan</div><!--
                    --><div class="col">Pepsi</div>
                </div>
                
                <!--second row-->
                <div class="myrow">
                  <div class="colsolid">Johnson </div><!--
                    --><div class="col">Coke</div><!--
                    --><div class="colsolid">Nissan</div><!--
                    --><div class="col">Pepsi</div>
                </div>
                
                <!--third row-->
                <div class="myrow">
                  <div class="colsolid">Johnson </div><!--
                    --><div class="col">Coke</div><!--
                    --><div class="colsolid">Nissan</div><!--
                    --><div class="col">Pepsi</div>
                </div>
                
                <!--forth row-->
                <div class="myrow">
                  <div class="colsolid">Johnson </div><!--
                    --><div class="col">Coke</div><!--
                    --><div class="colsolid">Nissan</div><!--
                    --><div class="col">Pepsi</div>
 ...

CSS

body {
    margin:0;
    font-family: 'Open Sans', sans-serif;
    height: 100%;
    display: flex;
    flex-flow: column;
    background-color:red;
}

.content {
    width: 100%;
    flex: 1 1 auto;
    background-repeat:no-repeat;
    background-size:cover;
    overflow: hidden;
    padding: 0;
    background-color:purple;
}

.myrow{
    height:25%;
    background-color: red;
    align-items: center;
    border-width: 1px;
    border-style: solid;
}

.col{
    background-color: green;
    display:inline-block;
    border-style: solid;
    border-width: 1px;
    width: -webkit-calc(25% - 2px);
    width:    -moz-calc(25% - 2px);
    width:         calc(25% - 2px);
}

.colsolid{
    background-color: black;
    color: white;
    display:inline-block;
    border-style: solid;
    border-width: 1px;
    text-align: center;
    width: -webkit-calc(25% - 2px);
    width:    -moz-calc(25% - 2px);
    width:         calc(25% - 2px);
}


/*header formatting. the height here is flexible*/
.topnav {
    background-color: blue;
    background-repeat:no-repeat;
    background-size:cover;
    overflow:display;
    flex: 0 1 auto;
}

.topnav nav{
    padding-top: 5px;
    padding-bottom: 5px;
}

.topnav nav div{
    width: 85%;
    margin-left: 7.5%;
    margin-right: 7.5% - ;
    display:flex;
    align-items: center;
}

.topnav nav a {
    color: white;
    text-decoration: none;
    font-size: 9px;
    width:10.65%;
    word-wrap:true;
    display:inline-block;
    vertical-align: top;
    text-align: center;
    /*line-height: 5em;*/
}

.topnav nav img {
    color: white;
    width:34%;
    margin-left: 1%;
    margin-right: 1%;
}

.topnav nav a:hover {
    color: #008ed2;
}