JSFiddle - React, Tailwind, and code Playground

HTML

<div class="header">
        <img src="http://soteriabrighton.co.uk/test2/logo.png" alt="" class="logo" />
        <ul class="navi">
            <li><a href="#"><span>home</span></a></li>
            <li><a href="#"><span>news</span></a></li>
            <li><a href="#"><span>forums</span></a></li>
            <li><a href="#"><span>articles</span></a></li>
            <li><a href="#"><span>contact</span></a></li>
        </ul>
    </div>

CSS

.header, .navi, ul, li, a, span{
    margin:0;
    padding:0;
}
    .header{
        overflow:hidden;
        z-index:5;    }


        .logo{
            position:relative;
            z-index:1;
    height:188px;
    width:100%;
        }


        .navi{
            position:absolute;
            left:40%;
            right:0;
            z-index:2;
            top:148px;
            list-style:none;
        }


        li{
            float:left;
            background:url('http://soteriabrighton.co.uk/test2/nav/images/top.png') no-repeat 10% 0;
            margin-left:2%;
        }
        .navi a{
            background:url('http://s16.postimage.org/yqxo6bq6p/navi_left.png') no-repeat left top;
            padding-left:9px;
            color:#000;
            margin-top:27px;
            text-decoration:none;
            font-size:22px;
            float:left;
                border-radius:5px 0 0 5px;
        }
        .navi a span{
            background:url('http://s17.postimage.org/ukpot5zcb/navi_right.png') no-repeat right top;
            padding-right:9px;
            float:left;
            line-height:38px;
            border-radius:0 5px 5px 0;
        }
        .navi a:hover span, .navi a:hover{
            background:green;
            color:#fff;
            border-radius:5px;
        }