JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="horizontaal">
    <li><a href="index.html">Index</a>
    </li>
    <li><a href="mijnsoftware.html">Mijn Software</a>
    </li>
    <li><a href="browsers.html">Browsers</a>
    </li>
    <li><a href="registratie.html">Registratie</a>
    </li>
</ul>

CSS

ul li {
     background-color: grey;
     border: 5px solid #999999;
     list-style-type: none;
     margin-bottom: 5px;
     margin-top: 5px;
     text-align: center;
     padding: 3px;
     width: 10%;
     clear: both;
     width:150px;

 }
 ul  {
     margin-bottom: 70%;
     margin-right: 100px;

 }
#horizontaal {
        width: 100%;
    }

#horizontaal li {
    width: 10%;
    margin-right: 0px;
    margin-left: 0px;
    display: inline;
}