JSFiddle - React, Tailwind, and code Playground

HTML

<div id="application-frame">

<div class="panel"></div>
<ul id="slide-out-menu">
  <li>
  	<a href="#" class="item" id="styles-menu">
  	<h1>S</h1>
  	<h6>Styles</h6>
  	</a>
  </li>
  <li>
  	<a href="#" class="item" id="designers-menu">
    <h1>D</h1>
    <h6>Designers</h6>
	</a>
  </li>
  <li>
  	<a href="#" class="item" id="code-menu">
  	<h1>C</h1>
  	<h6>Code</h6>
  	</a>
  </li>
  <li>
  	<a href="#" class="item" id="help-menu">
  	<h1>?</h1>
  	<h6>Help</h6>
  	</a>
  </li>
</ul>

<!-- ---- -->

</div>

CSS

* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

#slide-out-menu {
  list-style-type: none;
  position: absolute;
  top: 64px;
  right:0;
  z-index: 3;
  margin:0;
}

#slide-out-menu li a {
  width: 75px;
  height: 75px;
  border: 1px solid black;
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flexbox;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -webkit-flex-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
}

#slide-out-menu h1 {
  margin: 0;
  padding: 0;
  text-align: center;
}

#slide-out-menu h6 {
  margin: 0;
  padding: 0;
  text-align: center;
}

.panel {
    position:fixed;
    top:64px;
    bottom:0px;
    right:-450px;
    width:450px;
    height: 50%;
    padding:20px;
    border:1px solid black;
    background-color:white;
}

JavaScript

function showPanel() {

    $('.panel').stop().show().animate({
        right: '0px'
    });

    $('#application-frame').stop().animate({
        marginRight: '450px'
    });

    $('#slide-out-menu').stop().animate({
        marginRight: '450px'
    });
}

function hidePanel() {

    $('.panel').stop().animate({
        right: '-450px'
    }, function(){
        $(this).hide();
    });
    

    $('#application-frame').stop().animate({
        marginRight: '0px'
    });

    $('#slide-out-menu').stop().animate({
        marginRight: '0px'
    });
}

function slidePanel( event ) {
    target = event.target.id;

    console.log("ID is " + $(this).closest(".item").attr("id"));

    $('#slide-out-menu').delegate('.item:not(.slide-active)', 'click', function() {
    var $this = $(this);
    
    $('.slide-active').removeClass('slide-active');
    $this.addClass('slide-active');
    
    if ( target == 'styles-menu') {
        $('.panel').html('It matches!'); } 
    else {
        $('.panel').html('No match');
    }

    showPanel();
    });

    $('#slide-out-menu').delegate('.slide-active', 'click', function() {

    $(this).removeClass('slide-active');
    
    hidePanel();
    });
};

$(document).ready(function() {  
    
    $(".item").click( slidePanel );
});