JSFiddle - React, Tailwind, and code Playground

by doitlikejustin

HTML

<div id="header">
    <div id="menu">
        <ul>
            <li><a class="nav-element" href="#">News</a>
            </li>
            <li><a class="nav-element" href="#">Turnier</a>
            </li>
            <li><a class="nav-element" href="#">Ergebnisse</a>
            </li>
            <li><a class="nav-element" href="#">Impressionen</a>
            </li>
            <li><a class="nav-element" href="#">Anmeldung</a>
            </li>
            <li><a class="nav-element" href="#">Impressum</a>
            </li>
        </ul>
    </div>
</div>
<div id="content_wrapper"></div>

CSS

#header {
    padding: 0;
    mmargin:0;
    background: #003399;
    /* Old browsers */
    background-image:url(../images/logo.png);
    background: -moz-linear-gradient(top, #003399 0%, #006699 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #003399), color-stop(100%, #006699));
    background: -webkit-linear-gradient(top, #003399 0%, #006699 100%) background: -o-linear-gradient(top, #003399 0%, #006699 100%);
    background: -ms-linear-gradient(top, #003399 0%, #006699 100%);
    background: linear-gradient(to bottom, #003399 0%, #006699 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#003399', endColorstr='#006699', GradientType=0);
    width: 100%;
    height: 50px;
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    /*-webkit-box-shadow: 0px 0px 5px 1px #333333; /* WebKit */
    /* -moz-box-shadow: 0px 0px 5px 1px #333333; /* Firefox */
    /*box-shadow: 0px 0px 5px 1px #333333; /* Standard */
}
#menu ul {
    margin:0;
    padding:0;
}
#menu a {
    display: block;
    width: 150px;
    height: 50px;
}
#menu {
    padding:0;
    margin-right:auto;
    margin-left:auto;
    line-height:50px;
    width: 950px;
    height: 50px;
}
#menu ul li {
    display: block;
    width: 150px;
    height: 50px;
    float: left;
    text-align: center;
    text-transform: uppercase;
    font-family:'Source Sans Pro', sans-serif;
    font-size: 16px;
    font-weight: normal;
    list-style: none;
    margin:0;
    paddin:0;
    line-height:50px;
}
.nav-element:link {
    color: #FFF;
    text-decoration: none;
}
.nav-element:visited {
    color: #FFF;
    text-decoration: none;
    background: #81b4e3;
}
.nav-element:hover {
    text-decoration: none;
    color: #FFF;
    text-decoration: none;
    background: #1a589d;
}
.nav-element:active {
    color: #FFF;
    text-decoration: none;
    background: #C00;
}
#content_wrapper {
    padding:0;
    margin-left: auto;
    margin-right:...