JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>Northman | Our DNA</title>
    
</head>

<body>
    <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">
        <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</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>
            <!--  Commented it because it was going inside boxes in html 
            <li class="navbar-icons"><i class="fa fa-instagram" </i></li>
-->

        </ul>
        <a class="login" href="#">Log In&nbsp&nbsp&nbsp&nbsp&nbsp|</a>
        <a class="login" href="#">Sign Up</a>
    </div>










</body>

</html>

CSS

.header {
    position: relative;
}

.header-background {
    width: 100%;
}

.header-title {
    position: relative;
    padding-left: 120px;
    top: -640px;
}

@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: relative;
    padding-left: 230px;
    top: -680px;
}

p {
    font-family: "Adelle PE";
    padding-left: 200px;
    text-align: center;
    padding-right: 210px;
    /*Added by FJ */
    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);
    font-size: 27px;
    color: rgb(255, 255, 255);
    position: relative;
    left: 105px;
    top: -670px;
}

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


/*

.main {
    position: absolute;
    left: 178px;
    top: 120px;
    right: 0;
    bottom: 0;
}

*/

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

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

.navbar-icons {
    display: inline;
}

.login {
    display: inline;
    padding-left: 10px;
}