JSFiddle - React, Tailwind, and code Playground

HTML

<div class="header">
        <img class="header-background" src="https://s17.postimg.org/5590nqkyn/dna-image.png">

        <img class="header-title" src="https://s12.postimg.org/5vqt7imb1/northman-wordmark.png" width="400" height="157">
        <h1>OUR DNA</h1>
        <p>Northman was established to provide radically-evolved insurance solutions for the adventure and extreme sport markets. Northman is changing the extreme insurance playing field.</p>
    </div>


    <div class="nav">
    
        <img class="navbar-logo" src="https://s12.postimg.org/p1g2nywql/northman-logo.png">
        <ul class="navbar-list">
            <li class="navbar-tags"><a href="#">OUR DNA</a></li>
            <li class="navbar-tags"><a href="#">PROGRAMS</a></li>
						<li class="navbar-tags"><a href="#">RESEARCH</a>/li>
            <li class="navbar-tags"><a href="#">STORIES</a></li>
            <li class="navbar-icons"><i class="fa fa-facebook-square"></i></li>
            <li class="navbar-icons"><i class="fa fa-twitter-square"></i></li>
            

        </ul>
        <div class="squares">
<p class="square square1">ADDITIONAL SPORT</p>
<p class="square square2">COLLEGIATE</p>
<p class="square square3">INDIVIDUAL</p>
<p class="square square4">PROFESSIONAL</p>
<p class="square square5">Additional Sport</p>
<p class="square square6">Additional Sport</p>
</div>

				<a class="login" href="#">Log In</a>
        <a class="login" href="#">Sign Up</a>
				    </div>

CSS

* {
padding: 0;
margin: 0;
}

.header {
    position: relative;
}

.header-background {
	  position:relative;
    width: 100%;
}

.header-title {
    position: absolute;
		top: 0px;
		left: 120px;
 }   

@font-face {
    font-family: AvantGarde;
    src: url(AvantGarde.woff);
}

h1 {
    text-align: center;
    font-size: 25px;
    font-family: "AvantGarde Demi";
    letter-spacing: .24em;
    color: rgb(255, 255, 255);
    position: absolute;
    top: 18vh;
		left: 160px;
		width:100%;
}

p {
    font: 27px "Adelle PE";
    padding-left: 200px;
    text-align: center;
    padding-right: 210px;
    line-height: 1.236;
    letter-spacing: .12em;
    -moz-transform: matrix( 0.79000470431452, 0, 0, 0.79518533499854, 0, 0);
    -webkit-transform: matrix( 0.79000470431452, 0, 0, 0.79518533499854, 0, 0);
    -ms-transform: matrix( 0.79000470431452, 0, 0, 0.79518533499854, 0, 0);
    color: rgb(255, 255, 255);
    position: absolute;
    top:24vh;
		left:0;
		 width:100%;
}

.nav {
    position: absolute;
    width: 155px;
    top: 0px;
    bottom: 0px;
    left: 0px;
		border-style: solid;
    border-right-color: #ff0000;
    background-color: #030303;
    opacity: 0.5;
    height: 1157px;
}


.navbar-logo {
    position: relative;
    width: 155px;
}

.navbar-tags {
    padding: 0;
    list-style-type: none;
}

.navbar-icons {
    display: inline;
}


.squares {
	position:absolute;
	left:32vw;
	bottom: 0vh;
	height:400px;
	width: 600px;
	border: 1px solid red;
}

.square {
	position: absolute;
left:0;
	margin:0;padding:0;
	background-color: #ccc;
  width: 200px;
  height:200px;
	border: 1px solid black;
  }
	.square1 {
		position:absolute;
		top:0;
		left:0;
		}
		.square2 {
		posiiton:absolute;
		top:0;
		left: 200px;
		}
		.square3 {
		posiiton:absolute;
		top:0;
		left:400px;
		}
	.square4 {
			position:absolute;
		bottom:0;
		left:0;
		}
		.square5 {
			position:absolute;
		bottom:0;
		left: 200px;
		}
		.square6...