JSFiddle - React, Tailwind, and code Playground

HTML

<a id="open" href="#">open</a>
<a id="open-delay" href="#">open with delay</a>
<a id="close" href="#">close</a>

<nav id="nav-main">
    <ul>
        <li><a href="#">Test 1</a></li>
        <li><a href="#">Test 2</a></li>
        <li><a href="#">Test 3</a></li>
        <li><a href="#">Test 4</a></li>
        <li><a href="#">Test 5</a></li>
        <li><a href="#">Test 6</a></li>
    </ul>
</nav>

CSS

#nav-main {
  display: none;
  transition: all 2s;
  opacity: 0.0;
}

#nav-main.active {
  opacity: 1.0;
}

JavaScript

$(function() {
    
    $("#open").on("click", function(e) {
        e.preventDefault();
        
        $("#nav-main").show();
        $("#nav-main").addClass("active");
    });

    $("#open-delay").on("click", function(e) {
        e.preventDefault();
        
        $("#nav-main").show();
        window.setTimeout(function() {
	        $("#nav-main").addClass("active");
        }, 0);
    });

    $("#close").on("click", function(e) {
        e.preventDefault();
        
        $("#nav-main").removeClass("active");
        // here the delay is needed, because we have to wait
        // for the animation to finish, before we hide the element
        window.setTimeout(function() {
	        $("#nav-main").hide();
        }, 2000);

    });
});