JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<div class="row">
    <div class="col-lg-12">
        <nav class="navbar navbar-default" role="navigation">
            <div class="container-fluid">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mainNavbarInfo"> <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 visible-xs visible-sm" href="#"> EdViewRate</a>

                </div>
                <!-- Begin Navbar items -->
                <div class="collapse navbar-collapse" id="mainNavbarInfo">
                    <ul class="nav navbar-nav navbar-right">
                        <li class="active"><a href="#"><span class = "glyphicon glyphicon-home"></span> Home </a> 
                        </li>
                        <li><a href="#"><span class = "glyphicon glyphicon-list-alt"></span> SLO Generator </a> 
                        </li>
                        <li><a href="#"><span class = "glyphicon glyphicon-question-sign"></span> SLO Tutorial </a> 
                        </li>
                        <li><a href="#"><span class = "glyphicon glyphicon-cloud-upload"></span> Sign up  </a>
                        </li>
                        <li class="dropdown visible-xs visible-sm visible-md"> <a class="dropdown-toggle" href="#" data-toggle="dropdown"><span class = "glyphicon glyphicon-share-alt"></span> Sign In <strong class = "caret"></strong></a>

                            <div class="dropdown-menu" style="padding: 15px; padding-bottom: 10px;">
                                <form action="[YOUR ACTION]" method="post" accept-charset="UTF-8">
                                   ...

CSS

@media (min-width: 768px) {
        .navbar-nav > li {
            border-left: 1px solid #000000;
        }
        .navbar {
            border-radius-bottom-left: 5px;
            border-radius-bottom-right: 5px;
            width: 100%;
        }
        .nav>li>a:hover, .nav>li>a:focus {

        }
    }
    .navbar {
        border: 1px solid #000000;
    }