JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div id="body">
        <div class="nav">
            <ul>
                <li> <a href="#"> About Me </a> 
                </li>
                <li> <a href="#"> Contact Me </a> 
                </li>
                <li> <a href="#"> Pricing </a> 
                </li>
            </ul>
        </div>
        <div class="jumbotron">
            <div class='container'>
                <div id='h1'>
                     <h1> Need a website but don't know how? Look no further </h1> 
                </div>
                <p>Web engineer for hire</p>
            </div>
        </div>
        <div style='align:center;text-align:center' class="des">
             <h2> Knowledge. </h2> 
            <p>Straight 'outta Compton</p>
            <hr>
             <h2> Commitment. </h2>

            <p>To excellence and to serve</p>
            <hr>
             <h2> Perspective. </h2> 
            <p>New outlook on your web designs</p>
                <br />
        </div>
    </div>
</body>
<footer>
    <div id='footer1'>
        <div id='foot1'> <a href="https://twitter.com/TheJakeoShark" target=newtab><img src="https://g.twimg.com/Twitter_logo_blue.png"  width="72" height="46" border="0" /></a>

        </div>
    </div>
</footer>

CSS

.jumbotron {

    background-image: url(http://cam-consultants.net/wp-content/uploads/2014/05/servers.jpg);
    z-index: 110;
    position: relative;



}

.des {
    /* position: relative; */
    /* bottom: 1564px; */ 
    background-color: #e3e3e3;
    font-family: 'Georgia', sans-serif;
    text-shadow: 2px 3px 3px rgba(0,0,0,0.5);
    box-shadow: 1px 5px 35px black;
    text-align: center; 
    width: 1050px; 

    position: absolute;
    top: 260px;
    z-index: -1;
    margin: 0 auto;
}

.nav li {

    list-style-type: none; 
    text-align: center; 
    float: left; 
    width: 33.3%; 
    position: relative;
    z-index: 10;
    color: black; 
    padding-top: 12px;
    font-weight: 700; 
    font-size: 18px; 

}
.nav {

    background-color: #660000; 
    height: 65px;
    box-shadow: 2px 2px 8px 3px black; 
}
.nav a {

    text-decoration: none;
    color: black; 
    padding-top: 15px;
    font-weight: 700; 
    color: white;
}

.container > p {

    padding-top: 100px;
    height: 500px;
    position: relative;
    bottom: 140px; 
    font-weight: 700; 
    color: #cc0000; 
    text-align: center;
    font-family: 'Georgia', sans-serif; 
    text-shadow: 2px 3px 3px blue; 


}



.jumbotron  {

    background-image: url(http://cam-consultants.net/wp-content/uploads/2014/05/servers.jpg);

    background-position: -10px -60px; 
    z-index: -1; 
    height: 1700px; 


}

#h1 {

    position: relative;
    top: -50px; 
    text-align: center;
    font-family: 'Georgia', times, serif;
    background-color: black; 
    color: #e3e3e3;
    text-shadow: 5px 5px 5px white; 
    height: 150px;
    width: auto;
    margin: 0;
    margin-left: 44px;
    margin-right:44px;

    position: relative;
    z-index: -1;
}

#master_wrapper{overflow:hidden!important;} {

    width: 2000px;

    background-color: black; 
    box-shadow: 1px 1px 12px 4px black;
    position: relative;
    
}

#footer1 {
  
    background-color: #660000; 

}

#footer > p {
    text-align:...