JSFiddle - React, Tailwind, and code Playground

HTML

<!--[if lt IE 7]><style type="text/css">
  @media screen {
    html, body {
      height: 100%; overflow-y: hidden;
    }
    #scrollbereich {
      height: 100%; width: 100%; overflow: auto;
    }
    #content {
      position: static;
    }
  }
</style><![endif]-->

<body>



<div id="wrapper">

   <header>
    <section id="logo">
      Logo+Titel
    </section>
    <nav id="menu">
      <ul>
        <li class="direkt"><a href="index.html">Startseite</a>
        </li>
      </ul>
      <ul>
        <li id="oben"><a href="Inhalt.html">Inhalt</a>
          <ul>
            <li id="roundtopright"><a href="#">agd</a></li>
            <li id="noround"><a href="#">fghk</a></li>
            <li id="roundbottom"><a href="#">Easdf</a></li>
          </ul>
        </li>
      </ul>
      <ul>
        <li id="top"><a href="Angebot.html">Angebot</a>
          <ul>
            <li id="roundcross"><a href="#">tzkltik</a></li>
              <li id="noroundn" class="Unterpunkte"><a href="#">sfbs</a></li>
              <li id="noroundno" class="Unterpunkte"><a href="#">er</a></li>
            <li id="roundleft"><a href="#">dfb</a></li>
              <li id="noroundnor" class="Unterpunkte"><a href="#">qwer</a></li>
              <li id="noroundnoro" class="Unterpunkte"><a href="#">asdf</a></li>
            <li id="roundleftt"><a href="#">rtez</a></li>
              <li id="noroundnorou" class="Unterpunkte"><a href="#">tzuie</a></li>
              <li  id="roundbottomm"class="Unterpunkte"><a href="#">jlök</a></li>
          </ul>
        </li>
      </ul>
      <ul>
        <li class="direkt"><a href="about.html">Über mich</a>
        </li>
      </ul>
      <ul>
        <li class="direkt"><a href="contact.html">Kontakt</a>
        </li>
      </ul>
    </nav>
    <section id="info">
      schlagwörter für robots oder Links, Facebook, impressum etc
    </section>
  </header>

<section id="scrollbereich">
      <div id="slideshow" class="slider-wrapper theme-default">
        <div...

CSS

*{
  margin: 0px;
  padding: 0px;
}

html, body{
  background: #DFDFDF;
}

#wrapper{
  margin-top: 80px;
  margin-bottom: 20px;
  margin-left: auto;
  margin-right: auto;
  width: 1050px;
  height: 100%;
}

body {
  height: 100%;
  width: 100%;
  font-family: Arial, sans-serif;
  font-size: 12px;
  color: #0F0F0F;
  border-radius: 20px;
}

header {
  position: fixed;
  z-index: 1;
  margin-top: -80px;
  height: 60px;
  width: 1050px;
  background: #00DF00;
  color: #000000;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  box-shadow: 3px 3px 3px #000000;
  -webkit-box-shadow: 3px 3px 3px #000000;
}

#logo{
  height: 60px;
  width: 240px;
  float: left;
  background: #FF7F7F;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
}




#menu {
width: 570px;
padding: 0 0px;
font-family: Verdana;
font-size: 1em;
float: left;
}

#menu ul {
float: left;
width: 114px;
list-style-type: none;
}

#menu a{
text-decoration: none;
color: #000000;
display: block;
}

#menu li {
border-radius: 10px;
display: block;
border: 1px solid #ccc;
text-align: center;
background: #ff9224;
text-decoration: none;
height: 30px;
line-height: 30px;
margin-top: 15px;
  -webkit-transition: all 200ms ease-in;
  -moz-transition: all 200ms ease-in;
  -ms-transition: all 200ms ease-in;
  -o-transition: all 200ms ease-in;
  transition: all 200ms ease-in;
}

#menu li:hover{
background: #FF7F00;
  -webkit-transition: all 200ms ease-in;
  -moz-transition: all 200ms ease-in;
  -ms-transition: all 200ms ease-in;
  -o-transition: all 200ms ease-in;
  transition: all 200ms ease-in;
  box-shadow: 3px 3px 3px #000000;
  -webkit-box-shadow: 3px 3px 3px #000000;
}

#menu li ul li{
  margin-top: 0px;
  margin-left: -1px;
  border-radius: 0px;
  text-align: left;
}


/*---- Abgerundete Ecken des Navigationsmenus -----*/
#oben:hover{
  border-radius: 0px;
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
}
#oben:hover{
  border-radius: 0px;
 ...

JavaScript

.nivoSlider {
        position:relative;
        width:100%;
        height:auto;
        overflow: hidden;
}
.nivoSlider img {
        position:absolute;
        top:0px;
        left:0px;
}
.nivo-main-image {
        display: block !important;
        position: relative !important;
        width: 100% !important;
}

/* Bild als Link */
.nivoSlider a.nivo-imageLink {
        position:absolute;
        top:0px;
        left:0px;
        width:100%;
        height:100%;
        border:0;
        padding:0;
        margin:0;
        z-index:6;
        display:none;
}
/* Slices und Boxen im Slider */
.nivo-slice {
        display:block;
        position:absolute;
        z-index: 0;
        height:100%;
        top:0;
}
.nivo-box {
        display:block;
        position:absolute;
        z-index: 0;
        overflow:hidden;
}
.nivo-box img { display:block; }

/* Caption styles */
.nivo-caption {
        position:absolute;
        left:0px;
        bottom:0px;
        background:#000;
        color:#fff;
        width:100%;
        z-index:8;
        padding: 5px 10px;
        opacity: 0.8;
        overflow: hidden;
        display: none;
        -moz-opacity: 0.8;
        filter:alpha(opacity=8);
        -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
        -moz-box-sizing: border-box;    /* Firefox, other Gecko */
        box-sizing: border-box;         /* Opera/IE 8+ */
}
.nivo-caption p {
        padding:5px;
        margin:0;
}
.nivo-caption a {
        display:inline !important;
}
.nivo-html-caption {
    display:none;
}
/* Direction nav styles (e.g. Next & Prev) */
.nivo-directionNav a {
        position:absolute;
        top:45%;
        z-index:9;
        cursor:pointer;
}
.nivo-prevNav {
        left:0px;
}
.nivo-nextNav {
        right:0px;
}
/* Control nav styles (e.g. 1,2,3...) */
.nivo-controlNav {
        text-align:center;
        padding: 15px 0;
}
.nivo-controlNav a {
        cursor:pointer;
}
.nivo-controlNav a.active {
       ...