JSFiddle - React, Tailwind, and code Playground

HTML

<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0 maximum-scale=1.0"/>
        <title>Schreinerei Brettner | Startseite</title>
        <link rel="stylesheet" type="text/css" href="index2.css">
        <link href="https://fonts.googleapis.com/css?family=Jura" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css?family=Roboto:300,400" rel="stylesheet">
    </head>
    <body>
        <section id="menubar">
        <a class="menubutton" href="#menu"><img class="icon" src=""> </a>
        </section>
        <div class="header">
        <img id="togg" onclick="openNav()"src="icon.png">
            <ul id="menu"><span id="X">X</span>
 <li><a class="active" href="">Startseite</a></li>
                <li><a href="">Über uns</a></li>
                <li><a href="">Leistungen</a></li>
                <li><a href="">Kontakt</a></li>
            </ul>
        </div>
        <footer>
            <span class="footer"> <a class="copyright">&copy;</a> Copyright 2018 - Schreinerei Brettner <a class="strich"> | </a>   <a class="impressum" href="impressum.html">Impressum</a> </span>
        </footer>
        
        <script>
            $('#togg').click(function(){
                $('#menu').fadeIn()
            });
            $('#X').click(function(){
                $('#menu').fadeOut();
            })
        </script>
    </body>
</html>

CSS

body {
    margin:0;
    padding:0;
    width:100%;
    height: auto;
    background-size: cover;
    background-image: url(hintergrund.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
}
#menubar {
    position: absolute;
    right:20px;
    top:9px;
} 
#menubar a.menubutton {
    display: none;
}
.header {
    width:100%;
    background-color:#FAEDD6;
    height:70px;
}
.header img {
    width: 192px;
    height: auto;
    position: absolute;
    margin-left: 1%;
}
.header ul {
    margin: auto;
    width: 79%;
    padding:17px 0 23px 0;
    text-align: center;
    float: right;
}
.header ul li {
    display: inline;
    font-family: 'Jura', sans-serif;
    font-size: 152%;
    padding: 0 27px;
}
.header ul li a {
    text-decoration: none;
    color: black;
}
.header ul li a:hover {
    border-bottom: 4px solid #78342f;
}
.header ul li a.active {
    border-bottom: 4px solid #78342f;
}
footer {
    background-color: #FAEDD6;
    height: 42px;
    width: 100%;
    position: absolute;
    bottom: 0px;
}
footer span.footer {
    position: absolute;
    top:8px;
    color: #151515;
    font-family: 'Roboto', sans-serif;
    margin:auto auto auto 2%;
    letter-spacing: 0.5px;
}
footer span a {
    text-decoration: none;
    color:black;
}
footer span a.copyright {
    font-family:  'Roboto: 300', sans-serif;
    font-size: 20px;
}
footer span a.strich {
    margin: 0 5px;
}
footer span a.impressum:hover {
    text-decoration-line: underline;
}
@media screen and (min-width:850px) {
    .header ul {
        display: block !important;
    }
    #X,#togg{
      display:none;
    }
}
@media screen and (max-width: 850px) {
    #menubar a.menubutton ,#togg{
    display: block;
}
    .header ul {
        display: none;
    }
    #menu{
      display:none;
      margin-left:-200px;
      width:200px;
      height:500px;
      background:#123456;
    }
#X{
  position:absolute;
  right:180px;
  top:0px;
 ...