JSFiddle - React, Tailwind, and code Playground

by silvawebdesigns

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<h3>Change the Bootstrap 4 navbar collapse with navbar-toggleable-* classes</h3>

<nav class="navbar navbar-fixed-top navbar-inverse bg-primary">
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#collapsingNavbar">
        <span class="navbar-toggler-icon"></span>
    </button>
    <a class="navbar-brand" href="#">Navbar</a>
    <div class="navbar-collapse collapse" id="collapsingNavbar">
        <ul class="navbar-nav">
            <li class="nav-item">
                <a class="nav-link" href="#">Always Collapsed</a>
            </li>
        </ul>
    </div>
</nav>
<nav class="navbar navbar-toggleable-xl navbar-inverse bg-primary">
    <a class="navbar-brand" href="#">Navbar</a>
    <div class="navbar-collapse collapse">
        <ul class="navbar-nav">
            <li class="nav-item">
                <a class="nav-link" href="#">Never Collapse</a>
            </li>
        </ul>
    </div>
</nav>
<nav class="navbar navbar-toggleable-lg navbar-inverse bg-primary">
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#collapsingNavbarLg">
        <span class="navbar-toggler-icon"></span>
    </button>
    <a class="navbar-brand" href="#">Navbar</a>
    <div class="navbar-collapse collapse" id="collapsingNavbarLg">
        <ul class="navbar-nav">
            <li class="nav-item">
                <a class="nav-link" href="#">Collapse on LG</a>
            </li>
        </ul>
    </div>
</nav>
<nav class="navbar navbar-toggleable-md navbar-inverse bg-primary">
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse"...

CSS

.navbar {margin: 30px 0;}
.bg-primary{background-color:#0c7c9b !important;}

a.navbar-brand {
    color: #FFFFFF;
}

/* responsive nav stacked liked 3.x */
@media(max-width:992px) {
    #nav1.navbar .navbar-brand {
        float:none;
        display: block;
    }
    #nav1.navbar .navbar-nav>.nav-item {
        float: none;
        margin-left: .1rem;
    }
    #nav1.navbar .navbar-nav {
        float:none !important;
    }
}

@media(max-width:768px) {
    #nav2.navbar .navbar-brand {
        float:none;
        display: block;
    }
    #nav2.navbar .navbar-nav>.nav-item {
        float: none;
        margin-left: .1rem;
    }
    #nav2.navbar .navbar-nav {
        float:none !important;
    }
}

@media(max-width:544px) {
    #nav3.navbar .navbar-brand {
        float:none;
        display: block;
    }
    #nav3.navbar .navbar-nav>.nav-item {
        float: none;
        margin-left: .1rem;
    }
    #nav3.navbar .navbar-nav {
        float:none !important;
    }
}