JSFiddle - React, Tailwind, and code Playground

HTML

<div class="nav">
    <div class="buttons">
        <div class="programming">
            <p><a href="#">Programming</a>
            </p>
        </div>
        <div class="cinematography">
            <p><a href="#">Cinematography</a>
            </p>
        </div>
        <div class="photography">
            <p><a href="#">Photography</a>
            </p>
        </div>
        <div class="skills">
            <p><a href="#">Skills</a>
            </p>
        </div>
        <div class="bio">
            <p><a href="#">Bio</a>
            </p>
        </div>
        <div class="jeff_lester">
            <p><a href="#">Jeff Lester</a>
            </p>
        </div>
    </div>
</div>
<div class="picture">
    <p>Picture</p>
</div>

<div>Nostrud interdum parturient ad sociis. Hendrerit scelerisque nobis? Minus veritatis veritatis congue voluptate consectetuer? Doloremque elit blanditiis, dolore aute odit, facere! Fugit cupiditate animi gravida class eiusmod nostra itaque hymenaeos, facere, ut mi corrupti, maecenas iste accumsan euismod excepturi perspiciatis aliquip, leo malesuada nunc platea justo corrupti eligendi, aliquip magnis. Sapien accumsan felis bibendum platea cupidatat recusandae nisi consequuntur varius inventore distinctio at montes voluptate, unde esse sequi vestibulum nesciunt incididunt arcu aperiam magnam mauris similique magna? Possimus sequi placerat! Fermentum class, vel leo! Nascetur? Sapiente! Temporibus veritatis? Temporibus veritatis mollis cras justo ipsa aliquet animi? Augue quis, habitant vehicula. Autem aliqua pede ultrices, platea eligendi expedita excepturi, adipisicing, ultricies voluptate nam, at cursus sequi morbi tempor ultrices, corrupti aenean ultricies tempora varius, ex interdum eum, laborum, aenean donec dicta semper, consequatur congue, ipsum debitis blandit pharetra gravida ut, morbi unde diamlorem, architecto mollis torquent, animi occaecat mi? Blanditiis per. Eros mus elit pharetra velit ipsam fugit nostrum veritatis...

CSS

body {
    background-image: url('[email protected]') margin-top: 75px;
    margin-top: 75px;
}
/* Navigation Bar */
 .nav {
    background-color: #F5F5F5;
    height: 75px;
    width: 100%;
    position: fixed;
    top: 0;
    line-height: 70px;
    border-top: 4px solid #6E94E6;
    border-bottom: 1px solid #DEDEDE;
    opacity: 0.80;
}
.nav a {
    color: #858585;
    text-decoration: none;
    display: block;
}
.nav a:hover {
    color: #303030;
}
/* Approx. 62% of page */
 .nav .buttons {
    width: 1202px;
    margin: 0 auto;
}
.nav .buttons .programming {
    background-color: #F5F5F5;
    height: 70px;
    width: 140px;
    text-align: center;
    border-right: 1px solid #DEDEDE;
    float: right;
}
.nav .buttons .cinematography {
    background-color: #F5F5F5;
    height: 70px;
    width: 140px;
    text-align: center;
    border-right: 1px solid #DEDEDE;
    float: right;
}
.nav .buttons .photography {
    background-color: #F5F5F5;
    height: 70px;
    width: 140px;
    text-align: center;
    border-right: 1px solid #DEDEDE;
    float: right;
}
.nav .buttons .Skills {
    background-color: #F5F5F5;
    height: 70px;
    width: 140px;
    text-align: center;
    border-right: 1px solid #DEDEDE;
    float: right;
}
.nav .buttons .bio {
    background-color: #F5F5F5;
    height: 70px;
    width: 140px;
    text-align: center;
    border-left: 1px solid #DEDEDE;
    border-right: 1px solid #DEDEDE;
    float: right;
}
.nav .buttons .jeff_lester {
    background-color: #6E94E6;
    height: 70px;
    width: 100px;
    text-align: center;
    border-left: 1px solid #DEDEDE;
    border-right: 1px solid #DEDEDE;
    margin-right: 400px;
    float: right;
}
.nav .buttons .jeff_lester a {
    color: #F5F5F5;
}
.nav .buttons .jeff_lester a:hover {
    color: #303030;
}