JSFiddle - React, Tailwind, and code Playground

HTML

<div id="primary-nav">
    <ul>
        <li><a href="#">kkkk</a></li>
        <li><a href="#">work</a></li>
        <li><a href="#">about</a></li>
        <li><a href="#">contact</a></li>
    </ul>
</div>

CSS

#menuwrapper { }

#primary-nav
{
    margin: 0;
    padding: 0px 0px 0px 0px;
    line-height: normal;
}

#primary-nav li {
    /* float: left; */
}

#primary-nav a {
    display: block;
    /* float: left; */
    min-height: 20px;
    margin: 0px;
    padding: 0px 10px 0px 30px;
    text-decoration: none;
    font-family: Georgia, Times New Roman, Times, serif;
    font-size: 14px; 
    font-weight: normal;
    color: #71bf44;
}

#primary-nav li { list-style: none; margin-bottom:5px; font-weight: bold;}
#primary-nav li a{font-weight: bold; }

#primary-nav li li {  list-style: none; }
#primary-nav li li a{ background-image: url(/uploads/images/layout/pfeil.gif); background-repeat: no-repeat; background-position: left 2px; border:none;  font-weight: normal;  color:#364099; font-weight: bold; }

.menuparent {font-weight: bold;}