JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<div id="top-div">
    <div class="top-bar">
        <ul class="top-links">
            <li><a href="#"><i class="fa fa-home"></i> Home</a>
            </li>
            <li><a href="#"><i class="fa fa-diamond"></i> Upgrade</a>
            </li>
            <li class="pull-right">
                <a href="#">
                <span class="pull-right pmText">Private Messages: 
                    <span class="unreadPM">1</span>
                </span>
                </a>
            </li>
        </ul>
    </div>
</div>

CSS

body {
    margin: 0;
}
#top-div ul {
    padding: 0;
    margin: 0;
    list-style-type: none;
}
#top-div {
    border-top: 3px solid #308198;
    background: #1a1a1a;
    position: fixed;
    width: 100%;
    max-height: 38px;
}
.top-bar {
    max-width: 85%;
    margin: auto;
    padding: 10px;
}
.top-bar li {
    display: inline-block;
    margin-right: 10px;
}
.top-links li a {
    color: #fff;
    text-decoration: none;
    padding: 10px;
}
li.pull-right {
    float: right;
}
.unreadPM {
    background-color: rgb(74, 74, 74);
    padding: 6px;
    font-size: 12px;
    font-weight: bold;
    color: white;
    border-radius: 2px;
    -o-border-radius: 2px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
}

ul.top-links li a:hover {
    background-color: #025B72;
}

li.hoverPM li a {
}