JSFiddle - React, Tailwind, and code Playground

HTML

<div class="head_menu">
    <div class="menu">
        <ul>
            <li><a href="#">Menu 1</a></li>
            <li><a href="#">Menu 2</a></li>
            <li><a href="#">Menu 3</a></li>
        </ul>
    </div>
</div>
dsdfsfdf

fds
fds
fds
df

CSS

.header {
    background-color: #AC3123;
    height: 70px;
}
.menu ul {
    position:relative;
    background: #4d5057;
    border-bottom: 7px solid #E8E8E8;
    text-align:center;
    list-style: none;
    padding:0px;
    margin:0px;
}
.menu ul:before {
    content:''; display:block; font-size:0px;
    position:absolute; left:0px; top:0px; right:0px; height:7px; z-index:1;
    background:#972B1E; 
}
.menu ul li {
    position:relative; z-index:2;
    display:inline-block;
    padding:0px;
    margin:0x;
}
.menu ul li a {
    display: block;
    padding: 22px 12px 14px 12px;
    color: #fff;
}
.menu ul li a:hover {
    color: #000;
    background: #e8e8e8;
}