JSFiddle - React, Tailwind, and code Playground

by iii l

HTML

<header class="header">
        <div class="top_navigation">
            <div class="topnav_inner">
                <nav class="navigation">
                    <li><a class="active" href="/">Home</a></li>
                    <li><a href="/">Blog</a></li>
                    <li><a href="/">About us</a></li>
                    <li><a href="/">Chat</a></li>
                    <li><a href="/">Forum</a></li>
                </nav>
            </div> 
        </div>
        
        <div class="logobg">
            <div class="logo_inner">
                <div class="logo"><a href="/"></a></div>
            </div>
        </div>
    </header>

CSS

* {padding:0;margin:0;}
.top_navigation {
    height: 35px;
    background: #34160c;
   z-index: 9999;
    display: block;
}
.topnav_inner {
    margin: 0 auto;
    width: 778px;
    height: 35px;
}
.navigation {
    margin-left: 130px;
}
.navigation > li {
    font: 13px Trebuchet MS;
    float: left;
    margin: 0 5px;
    line-height: 35px;
    list-style: none;
    font-weight: bold;
    text-transform: uppercase;
}
.navigation > li > a {
    color: #fff;
    padding: 5px 10px;
    border-radius: 4px; 
    text-decoration: none;
}
.navigation > li > a:hover, .navigation > li > a.active  {
    background: #ff6600;
}
.logobg {
    height: 150px;
    background:  #fff8f0;
    width: 100%;
}

.logo_inner {
    margin: 0 auto;
    height: 150px;
    width: 778px;
    background: url('http://placehold.it/20x128/EEEEEE') no-repeat;
}
.logo {
    width: 378px;
    height: 128px;
    background-image:  url('http://placehold.it/378x128/CCCCCC');
    background-repeat: no-repeat;
    bottom: 0px;
}