JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    <div class="wrapper">
        <div class="header_menu">
            <ul>
                <li><a href="#">home</a></li>
                <li><a href="#">about us</a></li>
                <li><a href="#">service</a></li>
                <li><a href="#">pages</a></li>
                <li><a href="#">blog</a></li>
                <li><a href="#">contact us</a></li>
            </ul>
            <input type="text">
        </div>
    </div>
</div>

CSS

.header_menu ul,.header_menu li{
    float: left;
}

.content{
    background: #252323;
    height: 59px;
    width: 100%;
    position: absolute;
}

.wrapper{
    width: 71.742313323572474377745241581259%;
    margin: 0 auto;

.header_menu{
    clear: both;
    width: 100%;
    height: 91.5px;
    border-bottom: 4px solid #efefef;
}

.header_menu ul{
    text-transform: uppercase;
    margin-top: 4px;
    padding: 0;
}

.header_menu li{
    padding-top: 39px;
    padding-bottom: 31px;
}

.header_menu li a{
    padding: 39px 11px 31px 11px;
    color: #8b8b8b;
}

.header_menu li a:hover{
    color: #00bac6;
    border-bottom: 1px solid #00bac6;
}