JSFiddle - React, Tailwind, and code Playground

HTML

<body>

<div id="wrapper">

   <div id="header">
      <h1>Titel</h1>
      <h3></h3>
<div class="Hauptmenueclass"><ul id="menu-hauptmenue" class="menu"><li id="menu-item-23" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-14 current_page_item menu-item-has-children menu-item-23"><a href="http://sib.limprich.de/">Startseite</a>
<ul class="sub-menu">
	<li id="menu-item-24" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-24"><a href="http://sib.limprich.de/?page_id=2">Beispiel-Seite</a></li>
</ul>
</li>
<li id="menu-item-26" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-26"><a href="http://sib.limprich.de/?page_id=20">hjdetnhjetd</a>
<ul class="sub-menu">
	<li id="menu-item-35" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-35"><a href="http://sib.limprich.de/?page_id=27">gwergwg</a></li>
</ul>
</li>
<li id="menu-item-38" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-38"><a href="http://sib.limprich.de/?page_id=36">ohne slide</a></li>
</ul></div>   </div><!-- header -->
    <div id="wrap_main">
        <div id="main">

                        <h2>blabla</h2>
            <div class="entry">
                <p>blablablabla</p>
            </div>


        </div><!-- main -->

        <div id="sidebar">



<h2>Suche</h2>
<p>
</p><form method="get" id="searchform" action="/index.php">
   <input value="" name="s" id="s" type="text">
   <input id="search_submit" value="Suchen" type="submit">
</form>
<p></p>

<h2>Über diesen Blog</h2>
<p class="mini_about">
   Kein Slide gesetzt
</p>



        </div><!-- sidebar -->
    </div><!-- wrap_main -->

 <div id="footer"></div><!-- footer -->

</div><!-- wrapper -->



</body>

CSS

.Hauptmenueclass {
     margin-left:0px; ;
     margin-right:auto;
     border-left-width:0px; ;
     padding-left:0px; ;
     text-align:left;
     position: relative;
}

.menu {
     margin-left:0px; ;
     margin-right:auto;
     border-left-width:0px; ;
     padding-left:0px; ;
     text-align:left;

}

.Hauptmenueclass li {
    float: left;
    position: relative;

}
.Hauptmenueclass ul {
    list-style: none;
    float: left;
    position: relative;

}

.Hauptmenueclass a {
  color: #000000;
  background: #905837;
  text-decoration: none;
  float: left;
  line-height: 3.2em;
  width: 5em;
  padding: 0 8px; margin: 0px;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}

.Hauptmenueclass a:first-child {
margin-left: none;
}

 .Hauptmenueclass .current-menu-item a {
  background: #06039C;

  color: #FFFFFF;
  font-weight: normal;
}
 .Hauptmenueclass a:hover {
  background: #4AA0CF;

}


.Hauptmenueclass .sub-menu {
  background: #06039C;
  padding: 0 px 0;
  margin: 0;
  list-style: none;
  position: absolute;
  opacity: 0;
  top: 3.2em;-