JSFiddle - React, Tailwind, and code Playground

HTML

<!-- insert checkbox -->
<input type="checkbox" id="navbar-toggle-cbox">
<!-- change the "hamburger" icon from being a button to a label for checkbox -->
<div class="navbar-header">
 <label for="navbar-toggle-cbox" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </label>
<!-- end label not button -->

CSS

/* show the collapse when navbar toggle is checked */
#navbar-toggle-cbox:checked ~ .collapse {
    display: block;
}

/* the checkbox used only internally; don't display it */
#navbar-toggle-cbox {
  display:none
}