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"></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 class="header-line-2"></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;
    outline:1px solid green;
}

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

.header-line-image {
    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;
    outline:1px solid yellow;
    margin:0px 0 0 152px;
}

.header-line-navigation ul li{
    float:left;
    list-style-type:none;
    font:bold 14px  Arial, sans-serif;
    margin-right:56px;
    text-transform:uppercase;
    opacity:0.8;
    outline:1px solid #79146C;
    padding:36px 29px 31px 29px;
    display:block;
}

.header-line-navigation ul li a{
    color:#fff;
    text-decoration:none;
    
}

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












.header-line-2{
    width:100%;
    height:10px;
    background:#bd2d30;
}