JSFiddle - React, Tailwind, and code Playground

HTML

<header> 
        <a id="logo" href="#">MatsKrĂĽger</a>
        <nav> 
            <a href="#" title="Test">Test</a> 
            <a href="#" title="Test">Test</a> 
            <a href="#" title="Test">Test</a> 
            <a href="#" title="Test">Test</a> 
        </nav>
        <div class="clear"></div>
    </header>

CSS

header {
    padding:1.5em 0em 0em 0em;
    margin:0em 0em 1.5em 0em;
    display:block;
    height:100%;
}
header a#logo {
    width:110px; height:110px;
    background:url(../images/logo.png) no-repeat 0 0;
    display:block;
    margin:0 auto 1.5em;
    text-indent:-9999px;
    opacity:0.7;
}
header nav a {
    float:left;    
    padding:.5em 1em;
    font-size:1.7em;
    color:rgb(0,0,0);
    background:rgb(95,186,219);
    margin:0em 1em 0em 0em;
    position:relative;
    
}
header nav a:before {
    width:100%;
    height:100%;
    position:absolute;
    top:-100%;
    left:0;
    background:red;
    text-align:center;
    display: table-cell;
    vertical-align: middle;
    content:attr(title);
}
header nav a:after {
    width:100%;
    height:100%;
    position:absolute;
    top:100%;
    left:0;
    background:yellow;
    content:'';
}
header nav a.active {
    background:rgb(95,186,219);
    color:rgb(255,255,255);
}