JSFiddle - React, Tailwind, and code Playground

by Eddy94

HTML

<!doctype html>
<html>
<head>
    <title> Mapping Base DE </title>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>

<div id="wrapper" class="shadow">
    <div id="header"></div>       
        <div id="navigation" class="shadow-menu">
            <ul>
                <li><a href="index.html">Startseite</a></li>
                <li><a href="tutorials.html">Tutorials</a></li>
                <li><a href="downloads.html">Downloads</a></li>
                <li><a href="showroom.html">Showroom</a></li>
            </ul>
        </div>    
    <div id="content">
        <h3>Willkommen auf MappingBaseDE</h3>
        Ich wünsche Ihnen viel Spaß auf unserer Seite.
    </div>
</div>
<div id="footer">
&copy 2012 Mapping BaseDE. Alle Rechte vorbehalten. <a href="impressum.html">Impressum</a>
</div>


</body>
</html>

CSS

/*_______Komplette Seite___________*/
body {
    background-color: #666;
    margin-top: 20px;
    font-family: Arial, Helvetica, sans-serif;
}

#wrapper {
    margin-left: auto;
    margin-right: auto;
    width: 980px;
}

#header {
    width: 100%;
    height: 200px;
    background-color: #0F0;
    background-image: url(./images/header.png);
}

#footer {
    height: 30px;
    margin-left: auto;
    margin-right: auto;
    width: 980px;
    margin-top: 30px;
    text-align: center;
    font-size: 12px;
    color: #FFF;
}

#navigation {
    width: 100%;
    height: 15px;
    color: #FFF;
    text-transform: none;
    font-weight: 100;
    font-family: Trebuchet MS, Helvetica, sans-serif;
    text-align: center;
    padding-top: 5px;
    padding-bottom: 15px;
    background: #3198dd; /* Old browsers */
    background: -moz-linear-gradient(top, #3198dd 0%, #3198dd 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3198dd), color-stop(100%,#3198dd)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #3198dd 0%,#3198dd 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #3198dd 0%,#3198dd 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #3198dd 0%,#3198dd 100%); /* IE10+ */
    background: linear-gradient(to bottom, #3198dd 0%,#3198dd 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3198dd', endColorstr='#3198dd',GradientType=0 ); /* IE6-9 */
}

#navigation ul li {
    list-style-type: none;
}

#navigation ul li a{
    height: 15px;
    width: 150px;
    display: block;
    float: left;
    text-decoration: none;
    color: #FFF;
}

#navigation ul {
    margin: 0px;
    padding: 0px;
}

#content h3 {
    color: #F60;
    text-align: center;    
}

#content h2 {
    color: #999;
    text-align: center;
    text-decoration: underline;    
}

#content h1 {
    color: #F00;
    text-align: center;
}

#content h4 {
    color:...