JSFiddle - React, Tailwind, and code Playground

by Doeke Wartena

HTML

<link rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css">
<script src="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.js"></script>
<div class="menu-root">
        <div class="container">

            <div id="menu" class="col-xs-12 col-md-6 col-lg-4">

                <nav class="navbar navbar-dark bg-inverse" style="background: transparent">

                    <button class="navbar-toggler hidden-md-up collapsed" type="button" data-toggle="collapse" data-target="#collapsingNavbar" aria-expanded="false">
                        <span class="so_menu_name">The Protagonist</span>
                    </button>

                    <div class="navbar-toggleable-sm collapse" id="collapsingNavbar">

                        <ul class="nav navbar-nav os_menu">
                        
                            <li class="nav-item"><a class="nav-link" href="http://localhost:8888/so/wordpress/watch-the-trailer/">Watch the Trailer</a></li>
                            <li class="nav-item"><a class="nav-link" href="http://localhost:8888/so/wordpress/screenings-events/">Screenings &amp; Events</a>
                            </li><li class="nav-item"><a class="nav-link" href="http://localhost:8888/so/wordpress/synopsis/">Synopsis</a></li>
                            <li class="nav-item"><a class="nav-link" href="http://localhost:8888/so/wordpress/the-protagonist/">The Protagonist</a></li>
                            <li class="nav-item"><a class="nav-link" href="http://localhost:8888/so/wordpress/the-filmmakers/">The Filmmakers</a></li>
                            <li class="nav-item"><a class="nav-link" href="http://localhost:8888/so/wordpress/contact-credits/">Contact &amp; Credits</a></li>
                            <li class="nav-item"><a class="nav-link" href="http://localhost:8888/so/wordpress/press/">Press</a></li>
                            <li class="nav-item"><a class="nav-link"...

CSS

html, body {
    height: 100%;
    width: 100%;
    margin:0;
}

body {
    background-color: black !important;
}

* {
    color: white;
}

#menu {
    padding-top: 20px;
}


.nav.navbar-nav .nav-item {
    float: none;
}
.nav.navbar-nav .nav-item+.nav-item {
    margin-left: 0;
}
.nav.navbar-nav .nav-link {
    padding: .25rem 0;
}

.navbar {
    border-top: 2px solid white;
    border-bottom: 2px solid white;
}

#menu button{
    display: block;
}

#menu hr {
    /*box-sizing: border-box;*/
    margin-left: -16px;
    margin-right: -16px;
    color: white;
    border-color: white;
    background-color: white;
    border: 0 none;
    height: 2px;
}

#menu * {
    font-family: sans-serif;
    color: white;
    font-size: 14px;
    letter-spacing: 1px;
    line-height: 18px;
}

a {
    color: rgb(255,236,189);
}

a:hover {
    color: rgb(255,236,189);
}


textarea:focus, input:focus{
    outline: none;
}
button:focus {
    outline:0;
}

.menu-root {
    z-index: 50;
}