JSFiddle - React, Tailwind, and code Playground

HTML

<div id="header">
    <div class="wrap">
        <div class="logo"> <a href="#">Logo Here</a>

        </div>
         <h2>Testing Fixed Header / Footer + Anchors</h2>

    </div>
    <div id="nav">
        <ul>
            <li><a href="#top">Top</a>
                <li>
                    <li><a href="#one">Title#1</a>
                    </li>
                    <li><a href="#two">Title #2</a>
                    </li>
                    <li><a href="#three">Title #3</a>
                    </li>
                    <li><a href="#four">Title #4</a>
                    </li>
        </ul>
    </div>
</div>
<div class="wrap">
    <div id="content">
        <id="top">
            <h1>This is an example of centered body content!</h1>
            </a>
            <p>'May it please your Majesty,' said Two, in a very humble tone, going down on one knee as he spoke, 'we were trying&mdash;'</p>
            <p>'I see!' said the Queen, who had meanwhile been examining the roses. 'Off with their heads!' and the procession moved on, three of the soldiers remaining behind to execute the unfortunate gardeners, who ran to Alice for protection.</p>
            <p>'You shan't be beheaded!' said Alice, and she put them into a large flower-pot that stood near. The three soldiers wandered about for a minute or two, looking for them, and then quietly marched off after the others.</p>
            <p>'May it please your Majesty,' said Two, in a very humble tone, going down on one knee as he spoke, 'we were trying&mdash;'</p>
            <p>'I see!' said the Queen, who had meanwhile been examining the roses. 'Off with their heads!' and the procession moved on, three of the soldiers remaining behind to execute the unfortunate gardeners, who ran to Alice for protection.</p>
            <p>'You shan't be beheaded!' said Alice, and she put them into a large flower-pot that stood near. The three soldiers wandered about for a minute or two, looking for them, and then quietly marched off...

CSS

/*CSS RESET*/
 html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-weight: inherit;
    font-style: inherit;
    font-size: 100%;
    vertical-align: baseline;
}
/* remember to define focus styles! */
 :focus {
    outline: 0;
}
body {
    line-height: 1;
    color: black;
    background: white;
}
ol, ul {
    list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
 table {
    border-collapse: separate;
    border-spacing: 0;
}
caption, th, td {
    text-align: left;
    font-weight: normal;
}
blockquote:before, blockquote:after, q:before, q:after {
    content:"";
}
blockquote, q {
    quotes:"""";
}
strong {
    font-weight:bold;
    color:#0289ce;
}
em {
    font-style:oblique;
}
p {
    margin:15px 0;
}
.aligncenter, div.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}
.alignleft {
    float: left;
}
.alignright {
    float: right;
}
h1 {
    font-size:180%;
}
h2 {
    font-size:150%;
}
h3 {
    font-size:125%;
}
h4 {
    font-size:100%;
}
h5 {
    font-size:90%;
}
h6 {
    font-size:80%;
}
a:link {
    color:#0289ce;
}
a:hover {
    color:#f64274;
}
/*End RESET - Begin Full Width CSS*/
 body {
    background:#FFFFBF;
    color:#2D1F16;
    font:13px Helvetica, Arial, sans-serif
}
.wrap {
    position:relative;
    margin:0 auto;
    width:900px;
}
#header, #footer {
    width:100%;
    float:left;
    padding:15px 0;
}
#header {
    background:#DBFA56;
    position:fixed;
    z-index:99999;
    clear:both;
    height:100px;
    left:0;
}
#header .logo {
    float:left;
    width:400px;
    font-size:24px;
}
#header p {
    float:right;
    width:400px;
   ...