JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
    <div class="header">
        <div class="header-line">
            <div class="header-line-wrapper">
                <div class="header-line-image"><a href="#"></a></div>
                <div class="header-line-navigation">
                    <ul>
                        <li><a href="#">Home</a></li>
                        <li><a href="#">About</a></li>
                        <li><a href="#">Service</a></li>
                        <li><a href="#">Prices</a></li>
                        <li><a href="#">Contacts</a></li>
                    </ul>
                </div>
                <div class="header-line-button"></div>
            </div>
        </div>
    </div>




</div>

CSS

* {
    margin:0;
    padding:0;
}

.wrapper {
    max-width:100%;
    min-width:1800px;
}

.header {
    height:579px;
    outline:1px solid red;
}

.header-line {
    background:#d34346;
    height:79px;
    border-bottom:10px solid #bd2d30;
}

.header-line-wrapper {
    margin:0 auto;
    height:79px;
    width:1169px;
}

.header-line-image a {
    width:147px;
    background:url(../images/header-line-image.png);
    display:block;
    height:26px;
    float:left;
    margin-top:26px;
}

.header-line-navigation {
    float:left;
    overflow:hidden;
    margin:0px 0 0 152px;
}

.header-line-navigation ul li{
    float:left;
    list-style-type:none;
    font:bold 14px  Arial, sans-serif;
    text-transform:uppercase;
    opacity:0.8;
    
    _display: inline;
    _zoom: 1;
}

.header-line-navigation ul li a{
    color:#fff;
    text-decoration:none;
    display: block;
    height:79px;
    line-height: 79px;
    padding: 0 31px 0 31px;
}

.header-line-navigation ul li a:hover{
    background:#bd2d30;
    opacity:1;
    color:#fff;
}