JSFiddle - React, Tailwind, and code Playground

HTML

<div class="header">
    <div id="img"></div>
    <div id="header-text"><span>Some text vertically aligned</span></div>
    </div>
    <div class="nav">
        <div class="menu-item">Left align text</div>
        <div class="menu-item">Left align text</div>
        <div class="menu-item">Left align text</div>
        <div class="menu-item">Left align text</div>
    </div>
<div class="main">
    <div class="main_fixed">
	<div class="fixed">Centered data</div>
	<div class="fixed">Centered data</div>
	<div class="fixed">Centered data</div>	
	<div class="fixed">Centered data</div>
	<div class="fixed">Centered data</div>
	<div class="fixed">Centered data</div>
    </div>
    <div class="main_elastic">
        <div class="elastic"><span>Centered<br>vertically<br>data</span></div>
        <div class="elastic"><span>Centered<br>vertically<br>data</span></div>
        <div class="elastic"><span>Centered<br>vertically<br>data</span></div>
    </div>
</div>
<div class="footer">
  <div class="footer-top"><span>Centered data</span></div>
  <div class="footer-top"><span>Centered data</span></div>
  <div class="footer-top"><span>Centered data</span></div>
  </div>
  <div class="footer-bottom"><span>Centered content</span></div>

CSS

body {
background: lightgreen;    
border: solid 1px black;
}

span {
  display: inline-block;
  vertical-align: middle;
  line-height: 15px;
}
.header {
    border: solid 1px black;
    width: 100%;
    height: 120px;
}
.nav {
    border: solid 1px black;
    width: 200px;
    height: 600px;
    float: left;
}
.menu-item {
    display: block;
    border: inherit;
    line-height: 50px;
    background: darkgreen;
}

#img {
    width: 120px;
    height: 120px;
    float: left;  
    background: blue;  
    border-right: solid 1px black;    
}

#header-text {
    height: 120px;
    line-height: 120px;
    margin-left: 120px;
    vertical-align: middle;
}

.main {
    border: solid 1px black;
    height: 600px;
    margin-left: 201px;
}.main_fixed {
    display: table;
    width: calc(100% - 80px);
    height: 300px;
    vertical-align: middle;
    text-align:center;
}
.fixed {
    display: inline-block;
    vertical-align: middle;
    border: solid 1px black;
    margin: 50px 25px;
    width: 250px;
    height: auto;
    background-color: pink;
    padding: 5px;
}
.main_elastic {
    height: 300px;
}
.elastic {
    position: static;
    display: inline-block;
    vertical-align: middle;
    float: left;
    width: 25%;
    margin: 120px 4%;
    height: 60px;
    line-height: 60px;
    border: solid 1px black;
    background-color: pink;
}

.elastic::after {
 width: 50px;
 border-left: 10px solid blue;
 -webkit-transform: rotate(36deg);
 -moz-transform: rotate(36deg);
 -o-transform: rotate(36deg);
 -ms-transform: rotate(36deg);
 transform: rotate(36deg);
 position: relative;
 top: 0px;
 left: 0px;
} 

.footer {
    background: orange;
    height: 90px;
    text-align: center;
    width: 100%;
}
.footer-top {
    margin-top: -1px;
    line-height: 90px;
    vertical-align: middle;
    float: left;
    width: 33.1%;
    height:100%;
    border: solid 1px black;
}
.footer-bottom {
    height: 60px;
    line-height: 60px;
    vertical-align: middle;
    text-align:...