JSFiddle - React, Tailwind, and code Playground

HTML

<div id="header">
    <ul id="nav">
    <li><a href="index.php" class="index">index</a></li>
    <li><a href="project.php" class="project">project[]</a></li>
    <li><a href="contact.php" class="current contact">contact</a></li>
    <li><a href="about.php" class="about">about</a></li>
    </ul>
</div>
<div id="content">
</div>

CSS

div#content {
        background:#444;
        border-radius:15px;
        padding:40px 30px 30px 30px;
        clear:left;
        position: relative;
        z-index: 1;
        top: -13px;
        
    }
div#header {
        margin-left:20px;
    }


ul#nav {
    list-style-type: none;
    margin: 0;
    padding: 0;
    white-space: nowrap;

}

ul#nav li {
    display:inline;
  }

ul#nav a {
    text-decoration:none;
    color: #444;
    font-size: 30px;
    position: relative;
    z-index: 1;
}

ul#nav a.current {
  position: relative;
  z-index: 2;   
  color: red;
}