JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div id="header">
<h1> <i class="fa fa-adjust" style="font-size:48px;color:#ffffff"><a href="dashboard.html"> iXIMPLE</a></i>
<button type="button" class="navbar" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<i class="glyphicon glyphicon-comment" style="color:#fff"></i>
</button>
</h1>
</div>
<!--close-Header-part-->
<!--top-Header-messaages-->
<div class="btn-group rightzero"> <a class="top_message tip-left" title="Manage Files"><i class="icon-file"></i></a> <a class="top_message tip-bottom" title="Manage Users"><i class="icon-user"></i></a> <a class="top_message tip-bottom" title="Manage Comments"><i class="icon-comment"></i><span class="label label-important">5</span></a> <a class="top_message tip-bottom" title="Manage Orders"><i class="icon-shopping-cart"></i></a> </div>
<!--close-top-Header-messaages-->
<!--top-Header-menu-->
<div id="user-nav" class="navbar navbar-inverse">
<ul class="nav">
<li class="" ><a title="" href="#"><i class="icon icon-user"></i> <span class="text">Profile</span></a></li>
<li class=" dropdown" id="menu-messages"><a href="#" data-toggle="dropdown" data-target="#menu-messages" class="dropdown-toggle"><i class="icon icon-envelope"></i> <span class="text">Messages</span> <span class="label label-important">5</span> <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a class="sAdd" title="" href="#">new message</a></li>
<li><a class="sInbox" title="" href="#">inbox</a></li>
<li><a class="sOutbox" title="" href="#">outbox</a></li>
<li><a class="sTrash" title="" href="#">trash</a></li>
</ul>
</li>
<li class=""><a title="" href="#"><i class="icon...