JSFiddle - React, Tailwind, and code Playground

HTML

<div class="cont">

    <div class="logo">
        <span><img src="http://placehold.it/50x10"></span>
    </div>

    <div class="me">
        <ul>
            <li><a href="/">Sign In</a></li>
            <li><a href="/">|</a></li>
            <li><a href="/">Sign Up</a></li>
        </ul>
    </div>
</div>

CSS

.cont{

background: none repeat scroll 0 0 #34495E;
height:50px;
}


.me {
    float:right;
}

.me ul {
    float:right;
    list-style: none outside none;
}

.me li  {
    float:left;
    padding-right: 15px;
    text-decoration:none;
}

.me li  a{
    color: rgba(255, 255, 255, 0.6);
    text-decoration:none;
}

.me li  a:hover{
    color: #ffffff;
}
.logo{
    float:left;
}
.logo span{
    height:50px;
    vertical-align: middle;
    display: table-cell;
   
}

.logo img {
 margin: auto ;
}