JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<nav role="navigation" class="navbar navbar-default">
<div class="navbar-header botonera col-xs-12">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar" id="botonMenu">
       <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 id="navbar" class="navbar-collapse collapse">
    <ul class="nav navbar-nav">
        <li><a href="#productos"><img class="iconoMenu" src="imagen/iconoMenuProductos.png">Productos</a></li>
        <li><a href="#contacto"><img class="iconoMenu" src="imagen/iconoMenuContacto.png">Contacto</a></li>
        <li><a href="#distribuidores"><img class="iconoMenu" src="imagen/iconoMenuDistribuidores.png">Distribuidores</a></li>  
        <li><a href="#cotizacion"><img class="iconoMenu" src="imagen/iconoMenuCotizacion.png">Cotizacion</a></li>                     
        <li><a href="#descargas"><img class="iconoMenu" src="imagen/iconoMenuDemos.png">Descargas</a></li>
        <li><a href="#videos"><img class="iconoMenu" src="imagen/iconoMenuVideos.png">Videos</a></li>
        <li><a href="#nosotros"><img class="iconoMenu" src="imagen/iconoMenuNosotros.png">Nosotros</a></li>
        <li><a href="#faq"><img class="iconoMenu" src="imagen/iconoMenuFaq.png">FAQ</a></li>
    </ul>
</div>
</nav>

CSS

.navbar-header {
  float: none;
}
.navbar-toggle {
  display: block;
}
.navbar-collapse.collapse {
  display: none!important;
}
.navbar-nav {
  float: none!important;
}
.navbar-nav>li {
  float: none;
}
.navbar-collapse.collapse.in{
  display:block !important;
}