JSFiddle - React, Tailwind, and code Playground

HTML

<div data-role="page">
    <div class="box"><a class="close">Close</a>
    </div>
    <div data-role="header" data-position="fixed">
        	<h1>Single page</h1>

    </div>

    <div role="main" class="ui-content"> <a class="pannel">Open Panel</a>

    </div>
    <div data-role="footer" data-position="fixed">
        	<h4>Footer content</h4>

    </div>
</div>

CSS

.box {
    position:fixed;
    top:0;
    right:-100%;
    background-color: blue;
    width: 100%;
    display: block;
    z-index: 999999;
    overflow: hidden;
    height:40px;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
}

.close {
    color:white !important;
}

a {
 cursor:pointer;
}

JavaScript

$(document).on("click", ".pannel", function () {
    $('.box').animate({
        'right': "0%"
    }, 300);
})

$(document).on("click", ".close", function () {
    $('.box').animate({
        'right': "-100%"
    }, 300);
})