JSFiddle - React, Tailwind, and code Playground

by Al Dunne

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/2.2.2/isotope.pkgd.min.js"></script>
<div class="wrapper">
    <div class="row no-gutter">
        <div class="col-xs-9">
            <nav class="navbar navbar-default custom-navbar">
                <!-- 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="#bs-nav" aria-expanded="false"> <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="#"><img src="http://placehold.it/100x25/ff0/ff0"></a> 
                </div>
                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse" id="bs-nav">
                    <ul class="nav navbar-nav">
                        <li><a data-method="get" href="/">Home</a>

                        </li>
                        <li><a data-method="get" href="/matches">Matches</a>

                        </li>
                        <li><a data-method="get" href="/pools">Pools</a>

                        </li>
                        <li><a data-method="get" href="/match_picks">Your Picks</a>

                        </li>
                        <li><a data-method="get" href="/leagues">Leagues</a>

                        </li>
                        <li><a data-method="get" href="/venues">Venues</a>

                        </li>
                    </ul>
                </div>
         ...

CSS

.wrapper .navbar-default.custom-navbar, .wrapper .login .btn-group .btn-drop {
    font-weight: bold;
    text-transform: uppercase;
    font-family:'Oswald', sans-serif;
}
.wrapper {
    padding-left: 15px;
    padding-right: 15px;
    padding-bottom: 60px;
    margin: 0 auto;
}
.wrapper .navbar-default.custom-navbar {
    margin: 0px;
    padding: 0px;
    width: 100%;
    position: fixed;
    border-radius: 0px;
}
.navbar-default.custom-navbar .navbar-collapse {
    background: #f5f5f5;
}
.navbar-default.custom-navbar .navbar-nav > li > a:hover, .navbar-default.custom-navbar .navbar-nav > .active > li > a, .navbar-default.custom-navbar .navbar-nav > .active > li > a:hover, .navbar-default.custom-navbar .navbar-nav > .active > li > a:focus, .wrapper .login .btn-group .btn-drop:hover, .wrapper .login .btn-group .btn-drop:focus, .wrapper .login .btn-group .btn-drop.active > a {
    background: #0383c0;
    color: #fff;
}
.wrapper .login {
    display: inline;
    position: fixed;
    right: 0px;
    height: 50px;
    border: transparent;
    border-radius: 0px;
}
.wrapper .login .btn-group {
    color: #555;
}
.wrapper .login .btn-group .dropdown-menu {
    left: auto;
    background: #f5f5f5;
    width: 100%;
}
.wrapper .login .btn-group .dropdown-menu > li {
    padding-top: 5px;
    font-size: 16px;
}
.wrapper .login .btn-group .dropdown-menu > li > a:hover {
    background: #0383c0;
    color: #fff;
}
.wrapper .login .btn-group .btn-drop {
    background: none;
    border border: none;
    outline: none;
    box-shadow: none;
    padding: 15px;
}
.navbar-default.custom-navbar .navbar-toggle {
    float: left;
}
.no-gutter >[class*='col-'] {
    padding-right: 0;
    padding-left: 0;
}
@media (max-width: 992px) {
    .custom-navbar .navbar-header {
        float: none;
    }
    .custom-navbar .navbar-left, .custom-navbar .navbar-right {
        float: none !important;
    }
    .custom-navbar .navbar-toggle {
        display: block;
        left: 10px;
    }
...