JSFiddle - React, Tailwind, and code Playground

by Anton Ayupov

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>

CSS

* {
    margin:0;
    padding:0;
}

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

.header {
    height:579px;
}

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

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

.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;
    margin:0px 0 0 152px;
}

.header-line-navigation ul li{
    float:left;
    list-style-type:none;
    font:bold 14px  Arial, sans-serif;
    margin-right:40px;
    text-transform:uppercase;
}

.header-line-navigation ul li a{
    color:rgba(255,255,255,.8);
    text-decoration:none;
    display: block;
    height:79px;
    line-height: 79px;

        padding:0 29px;

    
}

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