JSFiddle - React, Tailwind, and code Playground

HTML

<header>
<div id="nav">
    <nav class="cl-effect-5">
        <div id="centeredmenu">
            <ul>
                    <li><a href="protected.php" class="active"><span data-hover="Home">Home</span></a></li>
                    <li><a href="Account.php"><span data-hover="Account">Account</span></a>
                        <ul>
                            <li><a href="">Unterpunkt1.1</a></li>
                            <li><a href="">Unterpunkt1.2</a></li>
                        </ul>
                    </li>
                    <li><a href="helpProtected.html"><span data-hover="Help">Help</a></span></li>
                    <li><a href="contactProtected.html"><span data-hover="Contact">Contact</span></a></li>
            </ul>
        </div>
    </nav>
</div>
</header>

CSS

#centeredmenu
{
    clear:left;
   float:left;
   width:100%;
   height:80px;
   background:#1A1A1A;
   overflow:visible;
   position:relative;
   font-size:2em;
 
}
 
#centeredmenu ul
{  
 
   float:left;
   list-style:none;
   margin-top:10px;
   padding:0;
   position:relative;
}
 
#centeredmenu ul li
{
 
   float:left;
   list-style:none;
   margin:0 0 0 20px;
   padding:0;
   position:relative;
   text-align:center;
 
 
}
 
#centeredmenu ul li ul
{
    position:absolute;
    margin:0;
    padding:0px;
    border:4px solid blue;
}
 
#centeredmenu ul li ul li
{
    float:none;
    display:block;
    margin:0px;
    padding:0px;
 
 
}
 
 
#centeredmenu ul li > ul
{
    display: none;
}
 
#centeredmenu ul li:hover>ul
{
    display: block;
 
}
 
#centeredmenu ul li ul li a
{
 
    border: 4px solid white;
    border-bottom-left-radius:15px;
    border-top-left-radius:15px;
    border-bottom-right-radius:15px;
    border-top-right-radius:15px;
    width:auto;
    height:50px;
    color:grey;
    text-decoration:none;
    display:block;
    background:black;
    line-height:50px;
    transition: background 0.3s ease-out; /* explorer 10 */
    -webkit-transition: background 0.3s ease-out; /* chrome & safari */
    -moz-transition: background  0.3 ease-out; /* firefox */
    -o-transition: background 0.3 ease-out; /* opera */
}
 
#centeredmenu ul li ul li a:hover
{
    background:grey;
    border: 4px solid white;
 
}
 
#centeredmenu ul li a
{
    border: 4px solid white;
    border-bottom-left-radius:15px;
    border-top-left-radius:15px;
    border-bottom-right-radius:15px;
    border-top-right-radius:15px;
    width:120px;
    height:50px;
    color:grey;
    text-decoration:none;
    display:block;
    background:url(navpics/navback2.jpg);
    line-height:50px;
}
 
 
#centeredmenu ul li a:hover,
#centeredmenu ul li a.active:hover
{
   background:url(navpics/navback.jpg);
   color:#fff;
   border: 4px solid #7D7D7D;
}
 
#centeredmenu ul li a.active
{
  ...