JSFiddle - React, Tailwind, and code Playground

by Haze32

HTML

<div class="d-flex" id="wrapper">
    <!-- Sidebar -->
    <div class="bg-light border-right vh-100" id="sidebar-wrapper">
        <div class="sidebar-heading">Start Bootstrap </div>
        <div class="list-group list-group-flush overflow-auto h-100">
            <a href="#" class="list-group-item list-group-item-action bg-light">Dashboard</a>
            <a href="#" class="list-group-item list-group-item-action bg-light">Menu 1</a>
            <a href="#" class="list-group-item list-group-item-action bg-light">Menu 2</a>
            <a href="#" class="list-group-item list-group-item-action bg-light">Menu 3</a>
            <a href="#" class="list-group-item list-group-item-action bg-light">Menu 4</a>
            <a href="#" class="list-group-item list-group-item-action bg-light">Menu 5</a>
            <a href="#" class="list-group-item list-group-item-action bg-light">Menu 6</a>
            <a href="#" class="list-group-item list-group-item-action bg-light">Menu 7</a>
            <a href="#" class="list-group-item list-group-item-action bg-light">Menu 8</a>
            <a href="#" class="list-group-item list-group-item-action bg-light">Menu 9</a>
            <a href="#" class="list-group-item list-group-item-action bg-light">Menu 10</a>
            <a href="#" class="list-group-item list-group-item-action bg-light">Menu 11</a>
            <a href="#" class="list-group-item list-group-item-action bg-light">Menu 12</a>
            <a href="#" class="list-group-item list-group-item-action bg-light">Menu 13</a>
            <a href="#" class="list-group-item list-group-item-action bg-light">Menu 14</a>
        </div>
    </div>
    <!-- /#sidebar-wrapper -->
    <!-- Page Content -->
    <div id="page-content-wrapper">
        <nav class="navbar navbar-expand-lg navbar-light bg-light border-bottom">
            <button class="btn btn-primary" id="menu-toggle">Toggle Menu</button>
            <button class="navbar-toggler" type="button" data-toggle="collapse"...

CSS

body {
    overflow-x: hidden;
}

#sidebar-wrapper {
    min-height: 100vh;
    margin-left: -14rem;
    -webkit-transition: margin .25s ease-out;
    -moz-transition: margin .25s ease-out;
    -o-transition: margin .25s ease-out;
    transition: margin .25s ease-out;
}

#sidebar-wrapper .sidebar-heading {
    padding: 0.875rem 1.25rem;
    font-size: 1.2rem;
}

#sidebar-wrapper .list-group {
    width: 15rem;
}

#page-content-wrapper {
    min-width: 100vw;
}

#wrapper.toggled #sidebar-wrapper {
    margin-left: 0;
}

@media (min-width: 768px) {
    #sidebar-wrapper {
        margin-left: 0;
    }

    #page-content-wrapper {
        min-width: 0;
        width: 100%;
    }

    #wrapper.toggled #sidebar-wrapper {
        margin-left: -15rem;
    }
}

JavaScript

$("#menu-toggle").click(function(e) {
  e.preventDefault();
  $("#wrapper").toggleClass("toggled");
});