JSFiddle - React, Tailwind, and code Playground

HTML

<ul>

<li><a href=csshomepage.html>Home</a></li>
<li><a href="#images">Images</a></li>
<li><a href="#links">Links</a></li>
<li><a href=csshomepage.html>Home</a></li>
<li><a href="#images">Images</a></li>
<li><a href="#links">Links</a></li>



</ul>

CSS

ul     {
    overflow:hidden;
   list-style: none;
  padding: 0;
  width: 100%;
  margin: 0 auto;
    align: center;
   list-style-type: none; 
    }



li      {
    float: left}

    a:link,a:visited
    {
    display:block;
    width:120px;
    font-weight:bold;
    color:#FFFFFF;
    background-color:#98bf21;
    text-align:center;
    padding:4px;
    text-decoration:none;
    text-transform:uppercase;
    }
    a:hover,a:active
    {
    background-color:#7A991A;
    }