JSFiddle - React, Tailwind, and code Playground

HTML

<!---- List ---->
    <ul class="ul-wrap">
        <li>
        <a href="#" class="filter active" data-filter="all" id="hide"><div class="list-div">
            My Portfolio
        </div></a>
            
            <ul class="submenu">
                <li><a href="#" class="filter" data-filter=".web" id="hide">Web</a></li>
                <li><a href="#" class="filter" data-filter=".graphic" id="hide">Graphic</a></li>
                <li><a href="#" class="filter" data-filter=".others" id="hide">Others</a></li>
            </ul> 
        </li>

        <li>
            <a href="#" id="show"><div class="list-div">
                About Me
            </div></a>
        </li>
    </ul>




<div id="box1">
    <span>About Me</span>
</div>

<div id="container">
    <span>Portfolio, web graphic, others</span>
</div>

CSS

a {
   color: #525252;
    text-decoration: none;
}

.ul-wrap {
	list-style-type: none;
	text-align: right;
	margin-top: 35px;
    display: block;
    float: left;
}

.ul-wrap li{
	margin-top: 12px;
	font-size: 1.08em;
	display: block;
    float:left;
}

.list-div {
	padding-left: 14px;
	position: relative;
}

/*-----------*/

.submenu {
	list-style-type: none;
	font-size: 0.85em;
	margin-top: 0px;
	padding: 0;
}

.submenu li {
	display: block;
	margin-top: 5px;
	color: rgba(255, 255, 255, 0.7);
}

.ul-wrap a:hover{
	border: none;
	color: #2bc2c4;
}


#box1 {
	top: 150px;
	background: rgba(0,0,0, 0.5);
	height: 300px;
	width: 300px;
	position: absolute;	
	display: none;
	color: #000000;
	font-size: 1.3em;
	opacity: 0;
    z-index: -1;
}

/*----------------------*/

#container {
	position: relative;
	box-sizing: border-box;
	float: left;
	height: 300px;
	width: 300px;
	max-width: 1600px;
	background: #544949;
	color: #000000;
	margin-top: 15px;
	margin-bottom: 20px;
}

JavaScript

$(document).ready(function(){
        var hasSlid = false;
        $('a#hide').click(function(){
          $('#box1').animate({
            'top': '+=155px', easing: 'easeInOutCubic', opacity: 0}, 500, 
           function () {
            $('#box1').hide();
          });
          
		  
		  $('#container').show();
          hasSlid = false;
        });
        
 
		//SHOW
		
		$('a#show').click(function(){
          if (!hasSlid) {
            $('#box1').show().animate(
            {'top': '-=155px', easing: 'easeInOutCubic', opacity: 1}, 500);       
          
		    
			$('#container').hide();
            hasSlid = true;
          }
        })
	});