JSFiddle - React, Tailwind, and code Playground

HTML

<div class="drawers">
    <div class="drawer sideDrawer drawerHotkey hotkeyHover">Testing Drawer</div>
</div>
<div class="clickaway"></div>
<p class="ClickLink">Click here!</p>
<button class="ColorButton">A button element</button>

CSS

.show-drawerHotkey .drawerHotkey {
    top: 0;
    transition: top 0.2s ease;
}
.show-drawerHotkey .drawerHotkey {
    border: 0.1rem solid #111111;
    transition: right 0.2s ease;
}
.show-drawerHotkey .drawerHotkey {
    border: 0.1rem solid #111111;
    width: 250px;
    right: 0;
    left: auto;
    transition: right 0.2s ease;
    background: #DDDDDD
}
.drawers {
    background: transparent;
    position: absolute;
    top: 60px;
    right: 0;
    bottom: 0;
    left: 60px;
    overflow: hidden;
    pointer-events: none;
}
.clickaway {
    display: none;
    background-color: rgba(255, 255, 255, 0);
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
.show-drawerHotkey .clickaway {
    display: block;
}
.sideDrawer {
    background-color: rgba(255, 255, 255, 0.95);
    width: 29.5rem;
    position: absolute;
    top: 0;
    right: auto;
    bottom: 0;
    left: -30.0rem;
    transition: left 0.0s ease;
}
.ClickLink {
    cursor: pointer;
}

JavaScript

$(function() {
    $(".ClickLink").click(function () {
        $("body").addClass("show-drawerHotkey");

    });
    $('.clickaway').click(function () {
        $('body').removeClass("show-drawerHotkey");
    });
    $(".ColorButton").click(function(){
        $(".ClickLink").css("color:red");
    });
})