JSFiddle - React, Tailwind, and code Playground

HTML

<div id="menu-bar">
    <div class="inner-right-to-left" id="upper"></div>
    <div class="inner-right-to-left" id="lower"></div>
    <!-- <div class="tabs"> <span>Tab1</span>

    </div>
    <div class="tabs"> <span>Tab2</span>

    </div>
    <div class="tabs"> <span>Tab3</span>

    </div>
    <div class="tabs"> <span>Tab4</span>

    </div>
    <div class="tabs"> <span>Tab5</span>

    </div> --></div>

CSS

#menu-bar {
    background-color: gray;
    height: 220px;
    width: 400px;
    display: none;
    opacity: 0.8;
    position: relative;
}
div.inner-right-to-left {
    height: 80px;
    background-color: rgb(207, 205, 205);
    position: absolute;
    display: none;
}
#upper {
    width: 300px;
    right: 5px;
    top: 20px;
}
#lower {
    width: 200px;
    right: 5px;
    bottom: 20px;
}
.tabs {
    color: white;
    float: left;
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 5px;
    margin-bottom: 5px;
    opacity: 0.5;
}
.tabs:hover {
    cursor: pointer;
    opacity: 1.0;
}

JavaScript

$(document).ready(function () {
    $("#menu-bar").show("slide", {}, 1000, callback);

    options = {
        direction: 'right'
    };

    function callback() {
        setTimeout(function () {
            $(".inner-right-to-left").show("slide", options, 750);
        }, 500);
    };
});