JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<div id="top-cell">
  <nav>
    <div class="navbar navbar-default navbar-static-top">
      <div class="container center-brand-fix">
        <input id="navbar-toggle-cbox" type="checkbox">

        <div class="navbar-header">
          <label type="button" 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>
          <a class="navbar-brand" href="https://saving.love">The Good News</a>
        </div>

        <div id="navbar" class="navbar-collapse collapse center">
          <ul class="nav navbar-nav topnav navbar-right">
            <li class="print-li"><a href="https://saving.love/print">Print</a></li>
            <li class="active moveup-floatright thegospel-li"><a href="https://saving.love/">The&nbsp;Gospel</a></li>
            <li class="moveup-floatright more-li"><a href="https://saving.love/pages">More</a></li>
          </ul>
        </div>
        <!--/.nav-collapse -->
      </div>
    </div>
  </nav>
</div>

CSS

/* xs: Extra Small Devices, Phones */
    @media (min-width: 480px) and (max-width: 767px) {
    /* This code centers the top navbar items when it's collapsed.  Whether they are stacked vertically or horizontally.  Use for whenever the hamburger button appears. */
    .navbar .navbar-nav {
        display: inline-block;
        float: none;
    }
    .navbar .navbar-collapse {
        text-align: center;
    }
    }    
        .navbar-brand {
        font-size: 17px;
}




.navbar-header {
        position: relative;
}
/* Adds light hover color with opacity to navbar menu items */
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
        background-color: rgba(241, 241, 241, 0.37);
        color: #999;
    }
.navbar-default .navbar-nav > .active > a {
        background-color: rgba(231, 231, 231, 0.333);
}
.navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
        background-color: rgba(231, 231, 231, 0.57);
}
.topnav {
  font-size: 17px;
}
/*!
 This code makes the navbar work without javascript.
 */
    #navbar-toggle-cbox:checked ~ .collapse {
        display: block;
    }
    #navbar-toggle-cbox {
        display: none;
    }
    .footer {
        border-top: 1px solid #e7e7e7;
    }

    .navbar {
        background-image: url(navbar.png);
    }

    .navbar-static-top {
      border-bottom: 1px solid #e7e7e7;
    }
    .navbar-collapse .collapse .center {
        height: 50px;  
    }



    .nav > li.print-li {
        display: table;
    }
    @media (min-width: 768px) {
    .navbar-nav > li {
        margin-top: -1px;
    }
    .navbar-nav > li.moveup-floatright {
        float: right;
        margin-top: -48px;
        margin-left: auto;
        margin-right: auto;
    }
    .navbar-nav > li.print-li {
      margin-bottom: -2px;
      text-align: center;
      float: none;
      position: relative;
      margin-left: auto;
      margin-right: auto;
    }
   ...