JSFiddle - React, Tailwind, and code Playground

HTML

<body>  
    <header>
        <div id="container">
            <div class="companyinfo">
                <span>Secure Access Control</span>
            </div>
            <div class="logout">
                HARIS
            </div>
                <div class="header-box">
                    <div class="left">
                        <div class="right">
                            <nav>
                                <ul>
                                    <li class="current"><a>Home</a></li>
                                    <li><a>Access Control</a></li>
                                    <li><a>Site Administration</a></li>
                                    <li><a>Dashboard</a></li>
                                    <li><a>Visitor Management</a></li>
                                </ul>                
                            </nav>
                        </div>                    
                    </div>
                </div>
            </div>            
    </header>
</body>

CSS

root { 
    display: block;
}
body{
    background: #E4E4E4;
}

#container{
    width: 800px;
    height: 130px;
    margin: 0 auto; 
}
span{
    font-variant: small-caps;
    font: 16px Verdana;
    font-weight: bolder;
    color: #82b704;
    padding-left: 20px;
}
a{
    text-decoration: none;
    cursor: pointer;
}

/*top Info*/
.companyinfo{
    float: left;
    width: 80%;
    height: 35px;
    line-height: 35px;
    font: 18px Verdana;
    color: #82b704;
}
.logout{
    float: left;
    width: 20%;
    height: 35px;
    line-height: 35px;
    font: 14px Verdana;
    color: gray;
    text-align: right;
}

/*Header Box*/
.header-box {
    top: 40px;
    width:100%;
    height: 81px;
    position: relative;  
}


header nav{
    border: 1px solid black;
    /* height: 81px; */
}
header nav ul{
    width:100%;
    /* height: 81px; */
    margin:0px auto;
    padding:15px 0px;
    text-align:center;
}
header nav ul li {
    font: 18px Verdana;
    display: inline-block;
    list-style-type: none;  
    text-align:center;
    line-height: 3em;    
    border: 1px solid red;
}
header nav li:first-child {
    background:none;
}


header nav li a {
    color:#fff;
    text-decoration:none
}
header nav li.current a, header nav li a:hover {
    color:#82b704;
    cursor: pointer;
}