JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
  <body>

<nav class="navbar navbar-default">
  <div class="container-fluid">

    <!-- Brand and toggle get grouped for better mobile display. -->
    <div class="navbar-header">
      <button aria-expanded="false" class="collapsed navbar-toggle" data-target="#main_menu" data-toggle="collapse">
        <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="#">brand</a>
    </div>

    <div class="collapse navbar-collapse" id="main_menu">
      <form class="navbar-form navbar-right" style="padding:0;">
        <input class="form-control" type="text" name="username" placeholder="User name">
        <input class="form-control" type="password" name="password" placeholder="Password">
        <input class="btn btn-success" type="submit" name="signinup" value="Sign In">
        <input class="btn btn-primary" type="submit" name="signinup" value="Sign Up">
      </form>
    </div>

  </div>
</nav>
  </body>