JSFiddle - React, Tailwind, and code Playground

HTML

<header id="header">
        <div class="inside">
          
<!-- indexer::stop -->
<div class="mod_search block">

  


  
  
</div>
<!-- indexer::continue -->


<!-- indexer::stop -->
<nav class="mod_navigation block">

  
  <a href="index.php/ax.html#skipNavigation3" class="invisible">Navigation überspringen</a>

  
<ul class="level_1">
            <li class="submenu sibling first"><a href="index.php/main.html" title="Start" class="submenu sibling first">Start</a>
<ul class="level_2">
            <li class="first"><a href="index.php/kalender.html" title="Kalender" class="first">Kalender</a></li>
                <li class="submenu"><a href="index.php/seite1.html" title="Seite 1" class="submenu">Seite 1</a>
<ul class="level_3">
            <li class="first"><a href="index.php/unterseite-1.html" title="Unterseite 1" class="first">Unterseite 1</a></li>
                <li class="last"><a href="index.php/unterseite-2.html" title="Unterseite 2" class="last">Unterseite 2</a></li>
      </ul>
</li>
                <li><a href="index.php/seite2.html" title="Seite 2">Seite 2</a></li>
                <li class="last"><a href="index.php/seite3.html" title="Seite 3" class="last">Seite 3</a></li>
      </ul>
</li>
                <li class="active"><span class="active">AX</span></li>
                <li class="submenu sibling"><a href="index.php/testformular-qm-reklamationsbogen.html" title="Testformular QM Reklamationsbogen" class="submenu sibling">Testformular QM Reklamationsbogen</a>
<ul class="level_2">
            <li class="first last"><a href="index.php/eingegebene-daten.html" title="Eingegebene Daten" class="first last">Eingegebene Daten</a></li>
      </ul>
</li>
                <li class="sibling"><a href="index.php/crm.html" title="CRM" class="sibling">CRM</a></li>
                <li class="sibling last"><a href="index.php/Technik.html" title="Technik" class="sibling last">Technik</a></li>
      </ul>

  <a id="skipNavigation3"...

CSS

#header .mod_navigation {
    color: #000;
    margin: 0 221px;
}
#header .mod_navigation ul {
    float: right;
    margin-bottom: 0;
    width: auto;
}
#header .mod_navigation li {
    background-color: #ffffff;
    border-left: 1px solid #89adcd;
    float: left;
    list-style-type: none;
    margin-top: 10px;
    padding: 4px 8px;
    top: 10px;
    width: auto;
}
#header .mod_navigation li.first {
    border-left: medium none;
}
#header .mod_navigation a, #header .mod_navigation span {
    background-color: transparent;
    color: #000;
    display: block;
    text-align: center;
    text-decoration: none;
}
#header .mod_navigation .active, #header .mod_navigation .trail {
    color: #e2001a;
    font-weight: bold;
}
#header .mod_navigation a:hover, #header .mod_navigation a:focus {
    font-weight: bold;
}
#header .mod_navigation a:after {
    color: transparent;
    content: attr(title);
    display: block;
    font-weight: bold;
    height: 1px;
    overflow: hidden;
    visibility: hidden;
}
#header .mod_navigation .level_2 {
    display: inline;
    height: 0;
    left: -32786px;
    overflow: hidden;
    position: absolute;
    top: -32768px;
    width: 0;
}
#header .mod_navigation li:hover .level_2 {
    display: block;
    height: 200px;
    left: auto;
    overflow: auto;
    top: auto;
    width: auto;
    z-index: 1000;
}
#header .mod_navigation .level_2 li {
    border: 1px solid #89adcd;
    margin-right: 10px;
}
#header .mod_navigation .level_2 a {
    font-weight: normal;
}
#header .mod_navigation .level_2 span.active {
    font-weight: bold;
}
#header .mod_navigation .level_2 .active, #header .mod_navigation .level_2 .trail {
    color: #e2001a;
    font-weight: bold;
}
#header .mod_navigation .level_2 a:hover, #header .mod_navigation .level_2 a:focus {
    font-weight: bold;
}
#header .mod_navigation .level_3 {
    display: inline;
    height: 0;
    left: -32786px;
    overflow: hidden;
    position: absolute;
    top: -32768px;
    width:...