JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<ul>
    <li><a href="#"><i class="fa fa-map-marker"></i>home</a></li>
    <li><a href="#"><i class="fa fa-comment"></i>forum</a></li>
    <li><a href="#"><i class="fa fa-globe"></i>computer news</a></li>
    <li><a href="#"><i class="fa fa-users"></i>team</a></li>
    <li><a href="#"><i class="fa fa-gamepad"></i>wargames</a></li>
</ul>

CSS

@import url(http://fonts.googleapis.com/css?family=Cuprum);
html {
    background-image: url('http://www.v3wall.com/wallpaper/1920_1080/1006/1920_1080_20100614094811129782.jpg');
    background-size: cover;
    box-sizing: border-box;
}
*, *:before, *:after {
    box-sizing: inherit;
    margin: 0;
    padding: 0;
}
body {
    padding: 50px;
}
ul {
    background-color: #fff;
    border-radius: 2px;
    display: flex;
    justify-content: space-between;
    padding: 0 1.25rem;
    width: 100%;
}
ul li a {
    color: #888;
    display: block;
    font-family: 'cuprum';
    font-size: .85m;
    padding: .9rem 0rem;
    text-decoration: none;
    text-transform: uppercase;
    transition: all .2s ease-in-out;
}
ul li a:hover {
    color: #444;
}
ul li a i {
    margin-right: 15px;
}