JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <nav>
        <ul>
        <li class="about"><a href="#"><span>About Us</span></a></li>
        <li class="products"><a href="#"><span>Our Products</span></a></li>
        <li class="testimonials"><a href="#"><span>Testimonials</span></a></li>
        <li class="balanceability"><a href="#"><span>Balance</span></a></li>
        <li class="theblog"><a href="#"><span>The Blog</span></a></li>
        <li class="contactus"><a href="#"><span>Contact Us</span></a></li>
        </ul>
    </nav>
    <div id="main">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pharetra nulla nec velit sollicitudin luctus. Quisque imperdiet, diam vel tristique varius, risus tellus ultricies justo, ut tempus neque sapien nec neque. Nullam sit amet nunc ante, in lobortis libero. Vestibulum velit turpis, lobortis ac lacinia ac, laoreet vitae metus. Nunc sed pulvinar felis. Curabitur euismod volutpat ornare. Suspendisse potenti. Donec dignissim rutrum commodo. In eget felis eu odio dictum fermentum nec non odio. Fusce vitae malesuada lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus semper vehicula suscipit. Phasellus condimentum dictum nibh, vitae fermentum ligula sodales vel.</p>
    </div>
</div>

CSS

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

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, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}


    #container {
        width: 960px;
        margin: 100px auto;
        position: relative;
    }
    
    nav {
        position: absolute;
        z-index: 1;
    }
    
    nav ul li {
        display: inline-block;
        margin-right: 10px;
    }
    
    nav ul li a {
        display: block;
        padding: 20px 20px 30px 20px;
        border: 2px solid #000;
        border-radius: 10px;
        color: #FFF;
        font-size: 13px;
        font-weight: bold;
        font-family: Arial;
        -webkit-transition: all 0.1s ease-in;
        -moz-transition: all 0.1s ease-in;
        -ms-transition: all 0.1s ease-in;
        -o-transition: all 0.1s ease-in;
        transition: all 0.1s ease-in;
    }
    
    li.about a {
        -webkit-transform: rotate(-5deg);
        -moz-transform: rotate(-5deg);
        -ms-transform: rotate(-5deg);
...