JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <ul>
      <li class="nav1selected" titype="standard" name="treeitem">
        <a href="index.html">Start</a>
      </li>
      <li class="nav1unselected" titype="standard" name="treeitem">
        <a href="newscalendar.htmml">Kalender</a>
      </li>
    </ul>
  </body>

CSS

BODY  {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  background-color: #FFFFFF;
  margin: 0;
  padding: 0;  
  font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;  
  font-weight: normal;  
}    
ul  {
  position: absolute;
  top: 0;
  left: 30px;
  list-style: none;
  margin: 0;
  padding: 0;    
  height: 26px;
  line-height: 26px;
  
}
li.nav1selected {
  display: inline;
  float: left;   
  padding-left: 20px;  
  padding-top: 0px;  
  padding-right: 20px;  
  padding-bottom: 0px;  
  margin: 0;    
  white-space: nowrap;  
  background-color: #393949;
  vertical-align: middle;
  font-size: 11px;
  font-weight: bold;
}
li.nav1selected a:link, a:hover, a:active, a:visited {
  text-decoration: none;
  height: 26px;
  color: #B2B1DF;
}
li.nav1unselected {
  display: inline;
  float: left;   
  padding-left: 20px;  
  padding-top: 0px;  
  padding-right: 20px;  
  padding-bottom: 0px;  
  margin: 0;    
  white-space: nowrap;  
  vertical-align: middle;
  font-size: 11px;
  font-weight: bold;  
  background-color: #B2B1DF;  
}
li.nav1unselected a:link, a:active, a:visited {
  text-decoration: none;
  height: 26px;
  color: #393949;  
}
li.nav1unselected a:hover {
  text-decoration: none;
  color: #B2B1DF;  
  background-color: #393949;
}
li.nav1unselected:hover a:link, a:active, a:visited {
  text-decoration: none;
  color: #B2B1DF;  
}
li.nav1unselected:hover {
  text-decoration: none;
  color: #B2B1DF;  
  background-color: #393949;
}