JSFiddle - React, Tailwind, and code Playground

by Vaibhav Mehta

HTML

<div> <span></span></div>

CSS

html, body {
    height: 100%;
}
div {
    height: 100%;
    width: 200px;
    background: #aaa;
    position: absolute;
    right: -200px;
    -moz-transition: all .5s;
    -webkit-transition: all .5s;
    transition: all .5s;
}
div span {
    height: 30px;
    width: 30px;
    top: 50%;
    margin-top: -15px;
    position: absolute;
    background: #f00;
    left: -30px;
}
.open {
    right: 0;
}

body {
    overflow: hidden;
}

JavaScript

$('div span').on('click', function () {

    if ($('div').hasClass('open')) {
        $('div').removeClass('open');
    } else {
        $('div').addClass('open');
    }
});