JSFiddle - React, Tailwind, and code Playground
HTML
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"><link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" rel="stylesheet"/> <style type="text/css">
</style>
</head>
<body>
<div class="container">
<nav class="navbar navbar-inverse">
<div class="navbar-inner">
<div class="container-fluid">
<div class="navbar-collapse">
<a class="navbar-brand navbar-brand-centered" href="#">
<span class="glyphicon glyphicon-menu-hamburger"></span>
</a>
<a class="navbar-brand navbar-brand-centered" href="#">
<span class="glyphicon glyphicon-cog"></span>
</a>
<a class="navbar-brand navbar-brand-centered" href="#">
<span class="glyphicon glyphicon-plus"></span>
</a>
<a class="navbar-brand navbar-brand-centered" href="#">
<span class="glyphicon glyphicon-minus"></span>
</a>
<p class="navbar-text">Company Name</p>
<p class="navbar-text">CUSTOMER PORTAL</p>
<div class="navbar-right moveLeft"><a class="navbar-text" href="#">Contact Name</a>
<div...
CSS
.container {
width: 100%;
padding: 0;
}
.navbar {
border-radius: 0px;
}
.container a {
color: yellow;
}
@media (max-width: 767px){
.navbar-collapse p{
padding-left: 15px;
}
.moveLeft{
padding-left:15px;
}
}