JSFiddle - React, Tailwind, and code Playground

HTML

<nav class="navbar navbar-default" role="navigation">

<div class="navbar-header">
  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button>
</div>

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
  <ul class="nav navbar-nav cl-effect-1">
  <li><a href="index.php">HOME</a></li>
  <li><a href="empresa.php">EMPRESA</a></li>
  <li><a href="servicos.php">SERVIÇOS</a></li>
  <li><a href="galeria.php">FOTOS</a></li>  
  <div class="img-class"><a href="index.php"><img src="http://icons.iconarchive.com/icons/mazenl77/I-like-buttons-3a/512/Cute-Ball-Go-icon.png" ></a></div>          
  <li><a href="eventos.php">NOSSOS EVENTOS</a></li>               
  <li><a href="agenda.php">AGENDA</a></li>
  <li><a href="contato.php">CONTATO</a></li>
  </ul>
</div>

CSS

nav a{
color: black;
text-decoration: none;
text-transform: uppercase;
font-weight: bold;
}

.img-class
{
 float: left; 
 margin-right: 15px;
}

.collapse
{
    width: 100%;
    border: 1px solid black;
}

li
{
     float: left;
     margin: 0px 10px 0px 10px; 
    border: 1px solid green;
}

nav.navbar.navbar-default {
background: transparent;
border: 2px solid red;
width: 80%;
margin: 0 auto;
}

div img {

    width: 32px;
    height: 32px;

}

ul.nav.navbar-nav.cl-effect-1 {
margin-right: auto;
margin-left: auto;
float: none;
display: table;
text-align: center;
margin-top: 110px;
}

ul.nav.navbar-nav.cl-effect-1 li a {
font-size: 13px;
font-weight: bold;
font-family: Century Gothic;
}

nav a:hover{
    color: black;
    font-weight: bold;
    text-decoration: none;
}