JSFiddle - React, Tailwind, and code Playground

HTML

<div id="header">
    <button class="main-nav">push me</button>
</div>
<div id="content">
    <div class="media-content">
    </div>
    <div class="mobile-nav">
        <button class="close" value="close">close</button>
        <ul>
            <li>item1</li>
            <li>item1</li>
            <li>item1</li>
        </ul>
    </div>
</div>

CSS

#header { 
    width: "100%";
    background: yellow;
    height: 100px;
    position: relative;
}
.main-nav {
    float:right;
    height:100%;
    width:50px;
    background:red;
}
#content {
    width:100%;
    height:400px;
    background: grey;
    position: relative;
}
.media-content {
    background: #FFF;
    height:200px;
    padding:30px;
    width:40%;
    color: purple;
    z-index:1;
    position:relative;
    margin:0 auto;
}
.mobile-nav {
    z-index:2;
    position:absolute;
    width:150px;
    background: black;
    color: #FFF;    
    display: none;
    top: 0;
    left: 100px;
}
.mobile-nav ul {
    list-style:none;
}
.mobile-nav ul li {
    list-style: none;
    color: #FFF;  
    height: 50px;
}
.close {
    /* width:50%;
    height:30px;
    color:red; */
}

JavaScript

$(document).ready(
    function() {
        $("button.main-nav").click(function() {
            $(".mobile-nav").fadeIn(1000);
        });
        $("button.close").click(function() {
            $(".mobile-nav").fadeOut(1000);
        });
    });