JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<nav class="navbar navbar-SwitchHon navbar-fixed-top">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#SwitchHon-main-navbar"> <span class="sr-only">Toggle Navigation</span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>

            </button> <a class="navbar-brand" href="#"><img src="img/brand-switchhon.png"></a>

        </div>
        <div class="collapse navbar-collapse" id="SwitchHon-main-navbar">
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#"><i class="fa fa-users"></i> Inicio</a>
                </li>
                <li><a href="#"><i class="fa fa-newspaper-o"></i> Productos y Servicios</a>
                </li>
                <li><a data-toggle="modal" data-target="#modalContact"><i class="fa fa-envelope-o"></i> Contactanos</a>
                </li>
                <li><a href="#"><i class="fa fa-shopping-cart"></i></a>
                </li>
            </ul>
        </div>
    </div>
</nav>

CSS

.navbar-SwitchHon {
    background-color: #34495e;
    border-radius: 0px;
    font-size: 1.1em;
    border-bottom: 0px;
}
.navbar-brand img {
    height: 40px;
    width: auto;
    margin-top: -11px;
}
.nav li {
    text-align: center;
}
.nav li a {
    color: #fff;
    transition: all 0.5s ease;
}
.navbar-header a {
    transition: all 0.5s ease;
}
.nav li a:hover, .navbar-header a:hover, .nav li a:active, .navbar-header a:active {
    transition: all 0.5s ease;
    background-color: rgba(44, 62, 80, 0.4);
}
.navbar-header a:hover {
    opacity: 0.9;
    transition: all 0.5s ease;
}
.navbar-brand a {
    transition: all 0.5s ease;
}
.navbar .nav > li > a:focus {
  background-color: rgba(44, 62, 80, 0.4);
}