JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <nav id="my-menu">
    <ul>
        <li><a href="/">Home</a>
        </li>
        <li><a href="/about/">About us</a>
        </li>
        <li><a href="/contact/">Contact</a>
        </li>
    </ul>
</nav>
    <!-- the wrapper -->
    <div class="header mm-fixed-top">
        <p><a href="#my-menu">Open the menu</a>
        </p>
    </div>
    <div class="container">
        <!-- container -->
        <div class="content">
            <!-- content -->
            <p>Cupcake ipsum dolor sit amet soufflé liquorice. Powder gingerbread chocolate cake I love. Dragée chocolate chupa chups. Fruitcake sweet danish bonbon chocolate cake liquorice. Biscuit I love candy liquorice sweet roll. Tart chocolate cake caramels jelly-o I love cake wafer bonbon. Oat cake sesame snaps apple pie gingerbread. Cupcake gummi bears jelly-o jujubes jelly sweet roll toffee bear claw. Dessert sweet roll cake fruitcake danish jelly-o. I love danish unerdwear.com. Pastry chupa chups jelly-o tart. Bonbon jelly-o muffin icing I love cupcake bear claw. Chocolate bar jujubes cheesecake soufflé I love applicake powder. Bonbon I love dessert caramels macaroon.</p>
            <p>Danish dragée tootsie roll applicake apple pie icing. Danish cheesecake pastry bonbon. Sweet roll sesame snaps wafer chocolate cake marshmallow applicake. Marshmallow danish gummi bears gummi bears gummies I love. Jelly beans apple pie jelly-o. Chocolate toffee tiramisu fruitcake unerdwear.com cake. I love chocolate bar danish apple pie. Macaroon marzipan muffin pastry tiramisu unerdwear.com. Pastry bear claw sweet soufflé dessert cheesecake jelly beans. Powder pudding I love toffee. Cupcake oat cake biscuit I love cookie caramels jelly beans cupcake. Tiramisu chocolate bar I love applicake. Sweet roll biscuit tart. Sweet gingerbread carrot cake gummies oat cake.</p>
            <p>Liquorice lollipop candy canes pie powder I love. Apple pie fruitcake pie candy canes croissant I love. Lollipop cotton candy I love...

CSS

/*
	jQuery.mmenu CSS
*/
 html.mm-opened .mm-page, html.mm-opened #mm-blocker, html.mm-opened .mm-fixed-top, html.mm-opened .mm-fixed-bottom, html.mm-opened .mm-menu.mm-horizontal > .mm-panel {
    -webkit-transition: none 0.4s ease;
    -moz-transition: none 0.4s ease;
    -ms-transition: none 0.4s ease;
    -o-transition: none 0.4s ease;
    transition: none 0.4s ease;
    -webkit-transition-property: top, right, bottom, left, border;
    -moz-transition-property: top, right, bottom, left, border;
    -ms-transition-property: top, right, bottom, left, border;
    -o-transition-property: top, right, bottom, left, border;
    transition-property: top, right, bottom, left, border;
}
html.mm-opened .mm-page, html.mm-opened #mm-blocker {
    left: 0%;
    top: 0;
    margin: 0;
    border: 0px solid rgba(0, 0, 0, 0);
}
html.mm-opened.mm-opening .mm-page, html.mm-opened.mm-opening #mm-blocker {
    border: 0px solid rgba(100, 100, 100, 0);
}
.mm-menu .mm-hidden {
    display: none;
}
.mm-fixed-top, .mm-fixed-bottom {
    position: fixed;
    left: 60px;
}
.mm-fixed-top {
    top: 0;
}
.mm-fixed-bottom {
    bottom: 0;
}
html.mm-opened .mm-page, .mm-menu > .mm-panel {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
}
html.mm-opened, html.mm-opened body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
}
html.mm-opened .mm-page {
    height: 100%;
    overflow: hidden;
    position: absolute;
}
html.mm-background .mm-page {
    background: inherit;
}
#mm-blocker {
    background: #fff;
    opacity: 0;
    display: none;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 999999;
}
html.mm-opened #mm-blocker, html.mm-blocking #mm-blocker {
    display: block;
}
.mm-menu.mm-current {
    display: block;
}
.mm-menu {
    background: inherit;
    display: none;
    overflow: hidden;
    height: 100%;
   ...

JavaScript

/*	
 * jQuery mmenu v4.1.9
 * @requires jQuery 1.7.0 or later
 *
 * mmenu.frebsite.nl
 *	
 * Copyright (c) Fred Heusschen
 * www.frebsite.nl
 *
 * Dual licensed under the MIT and GPL licenses.
 * http://en.wikipedia.org/wiki/MIT_License
 * http://en.wikipedia.org/wiki/GNU_General_Public_License
 */


(function ($) {

    var _PLUGIN_ = 'mmenu',
        _VERSION_ = '4.1.9';


    //	Plugin already excists
    if ($[_PLUGIN_]) {
        return;
    }

    //	Global variables
    var glbl = {
        $wndw: null,
        $html: null,
        $body: null,
        $page: null,
        $blck: null,

        $allMenus: null,
        $scrollTopNode: null
    };

    var _c = {}, _e = {}, _d = {},
    _serialnr = 0;


    $[_PLUGIN_] = function ($menu, opts, conf) {
        glbl.$allMenus = glbl.$allMenus.add($menu);

        this.$menu = $menu;
        this.opts = opts
        this.conf = conf;

        this.serialnr = _serialnr++;

        this._init();

        return this;
    };

    $[_PLUGIN_].prototype = {

        open: function () {
            this._openSetup();
            this._openFinish();
            return 'open';
        },
        _openSetup: function () {
            //	Find scrolltop
            var _scrollTop = findScrollTop();

            //	Set opened
            this.$menu.addClass(_c.current);

            //	Close others
            glbl.$allMenus.not(this.$menu).trigger(_e.close);

            //	Store style and position
            glbl.$page.data(_d.style, glbl.$page.attr('style') || '')
                .data(_d.scrollTop, _scrollTop)
                .data(_d.offetLeft, glbl.$page.offset().left);

            //	Resize page to window width
            var _w = 0;
            glbl.$wndw.off(_e.resize)
                .on(_e.resize,

            function (e, force) {
                if (force || glbl.$html.hasClass(_c.opened)) {
                    var nw = glbl.$wndw.width();
                    if (nw != _w) {
                        _w =...