JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class="navbar-div navbar-fixed-top">
	<nav class="navbar navbar-default">

		<ul class="nav navbar-nav">
			<li><a href="/"> <img alt="Home" style="height:100%" src="http://www.clker.com/cliparts/O/v/c/b/i/6/generic-logo-hi.png"></a></li>
                <li><a href="/">Action 1</a></li>
                <li><a href="/">Action 2</a></li>
                <li><a href="/">Logout</a></li>
		</ul>
	

	</nav>
</div>

CSS

.navbar-div {
	max-height: 50px;
	height: 50px;
	min-width: 933px;
}

.navbar-div nav {
	height: 50px;
	padding: 0px;
	margin: 0px 0px 10px;
	border: 0;
	box-shadow: none;
	background-image: none;
	border-radius: 0px;
	background-color: #99d4f5;
}

.navbar-div ul, .navbar-div li, .navbar-div a {
	height: 100%;
}

.navbar-div ul>li>a {
	padding: 10px;
}

.navbar-div a img, .navbar-div a {
    border: none; 
    overflow: hidden; 
    float: left; 
}

.navbar-div a:hover {
	-moz-transition: all .15s ease-in;
    -o-transition: all .15s ease-in;
    -webkit-transition: all .15s ease-in;
    transition: all .15s ease-in; 
    border-bottom: 5px solid #6666CC; 
    padding-bottom: 5px; 
}