JSFiddle - React, Tailwind, and code Playground

HTML

<div class="close"><p>CLOSE</p></div>
        <div class="menu-trigger"><div id="arrow">&#9660;</div><p>MENU</p></div>
        <div class="nav-menu">
           <ul>
               <li><a href="#">Home</a></li>
               <li><a href="#" class="projects">Projects<div id="arrow-1">&#9660;</div></a>
                   <ul>
                       <li><a href="#">JQuery</a></li>
                       <li><a href="#">Web App</a></li>
                       <li><a href="#">Website</a></li>
                   </ul>
               </li>
               <li><a href="#">Gallery</a></li>
               <li><a href="#">About</a></li>
               <li><a href="#">Contact</a></li>
               <li><a href="#">Links</a></li>
               <li><a href="#">Current Projects</a></li>
            </ul> 
        </div>

CSS

* {
    font-family: sans-serif;
}
div .nav-menu {
    background: #e7e7e7;
    padding: 0 20px;
}
.nav-menu ul {
    margin: 0;
    padding: 0;
}
.nav-menu ul li {
    list-style-type: none;
    float: left;
}
.nav-menu ul li a:link, .nav-menu ul li a:visited {
    display: block;
    font-size: 90%;
    padding: 10px 25px;
    color: #305782;
    text-decoration: none;
    font-weight: bold;
}
.menu-trigger {
    display: none;
    color: #305782;
    background: #d5dce4;
    padding: 10px;
    text-align: right;
    font-size: 90%;
    cursor: pointer;
}

.menu-trigger p {
    line-height: 6px;
    margin-top: 7px;
    margin-bottom: 7px;
    margin-right: 10px;
    font-size: 1.3em;
    font-family: sans-serif;
}


@media screen and (max-width: 400px) {
    .menu-trigger {
    display: block;
    }
    .nav-menu ul li {
        float: none;
        border-bottom: 1px solid gray;
    }
    .nav-menu ul li:last-child {
        border-bottom: 0;
    }
    .nav-menu {
        height: 0;
        overflow: hidden;
    }
    .nav-menu ul {
        height: 0;
        overflow: hidden;
    }
    .nav-menu ul ul {
        height: 0;
        overflow: hidden;
    }
    .nav-expanded {        /* will be added through jQuery */
        display: block;
    }
    .background {         /* will be added through jQuery */
        color: #d6d6d6;
        background: #153448;
        transition: 0.5s;
    }
    .background-1 {        /* will be added through jQuery */
        background: #2f5269;
        color: aliceblue !important;
        transition: 0.5s;
    }

    #arrow {            /* For the Main Menu Arrow */
        margin-right: 340px;
        font-size: 1.4em;
        line-height: 0;
        position: absolute;
        left: 25px;
        top: 28px;
        transition: 0.4s;
    }
    #arrow-1 {            /* For the SubMenu Arrow, Projects */
        float: right;
        margin-right: 15px;
        transition: 0.4s;
    }
    .rotated {           /* For Arrow, will...

JavaScript

$(document).ready(function(){
                $(".menu-trigger").click(function(){
                    $(".nav-menu").animate().css("height", "auto");
                    $(".nav-menu ul").animate().css("height", "auto");
                    $("#arrow").toggleClass("rotated");
                    $(".close").fadeIn(); 
                    $(".menu-trigger p").css("color", "#909090");
                 });
                    
                /* For Sub Menu Projects */
                $(".projects").click(function(){
                    $(".nav-menu ul ul").slideToggle();
                    $(".projects").toggleClass("background-1");
                    $("#arrow-1").toggleClass("rotated");
                    $(".nav-menu ul ul li a").css({"background":"#687583", "color":"white"});
                });  
                /* For Closing All Menus */
                $(".close").click(function(){
                    $(this).fadeOut();
                    $(".nav-menu").animate().css("height", "0"); 
                    $(".nav-menu ul ul").animate().css("height", "0"); 
                    $("#arrow-1").removeClass("rotated");
                    $(".projects").removeClass("background-1");
                    $(".menu-trigger p").fadeIn();
                    $(".menu-trigger p").css("color", "#3c3c3c");
                    $("#arrow").toggleClass("rotated");
                });
            });