JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-2">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a href="www.google.com" class="navbar-brand"><span class="glyphicon glyphicon-home" style="color:black;" />
      </a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="navbar-collapse-2">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Início</a>
        </li>
        <li><a href="#">Contato</a>
        </li>
        <li>
          <a class="btn btn-default btn-outline btn-circle btnCliente" data-toggle="collapse" href="#areaCliente" aria-expanded="false" aria-controls="nav-collapse2" style="background-color:#3276b1; border:none; color:white;">Aárea do Cliente</a>
        </li>
        <li>
          <a class="btn btn-default btn-outline btn-circle" data-toggle="collapse" href="#nav-collapse2" aria-expanded="false" aria-controls="nav-collapse2" style="background-color: #00ff21; border:none; color: white;">Entrar</a>
        </li>
      </ul>
      <div class="collapse nav navbar-nav nav-collapse" id="nav-collapse2">
        <form action="~/Public/Login" method="post" class="navbar-form navbar-right form-inline" role="form">
          <div class="form-group">
           ...

CSS

/*Menu*/
#menu {
    border-radius: 0em 0em 1em 1em;
    background-color: black;
    border-bottom: solid;
    border-bottom-color: white;
    border-left-color: white;
    border-right-color: white;
    z-index: 1061;
    position: absolute fixed;
}

.menuImage {
    width: 1.56em;
    height: 1.56em;
}

.menuTitulo {
    font-size: 2em;
    text-align: center;
    color: red;
    padding-bottom: 0.1em;
    padding-top: 0.1em;
    line-height: 1;
}

hr.menuSup {
    border-color: black;
    padding: 0em;
}

.menuAlt {
    height: 2em;
}

.menuContato {
    color: red;
    text-align: center;
    padding-top: 1em;
}
/*Popover*/
.popover-title {
    background-color: #73AD21;
    color: #FFFFFF;
    text-align: center;
}

.popover-content {
    background-color: #000000;
    color: #FFFFFF;
    text-align: center;
}

a:hover:not(.ignoreCss) {
    text-decoration: none; /*Tira o sublinhado do link*/
    color: #ffffff;
}

a:not(.ignoreCss) {
    text-decoration: none;
    color: #ffffff;
}


@media (max-width: 990px) {
    .navbar-header {
        float: none;
    }

    .navbar-toggle {
        display: block;
    }

    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    }

        .navbar-collapse.collapse {
            display: none !important;
        }

    .navbar-nav {
        float: none !important;
        margin: 7.5px -15px;
    }

        .navbar-nav > li {
            float: none;
        }

            .navbar-nav > li > a {
                padding-top: 10px;
                padding-bottom: 10px;
            }

    .navbar-text {
        float: none;
        margin: 15px 0;
    }
    /* since 3.1.0 */
    .navbar-collapse.collapse.in {
        display: block !important;
    }

    .collapsing {
        overflow: hidden !important;
    }

    .menuSup {
        display: none;
    }
}

.img1 {
    width: 100%;
    max-height: 35em;
}

.input-group-addon {
    color: #fff;
   ...