JSFiddle - React, Tailwind, and code Playground

HTML

<a href="#"id="nav1">YouTube</a>
<a href="#" id="nav2">Twitch</a>
<div id="navwrapper" class="unselected">
    <span id="dropdown1" class="unselected"><a href="#">Sodapoppin</a> <a href="#">Gronkh</a> <a href="#">Deine Mama</a></span>
<span id="dropdown2" class="unselected"><a href="#">Deine Mama</a> <a href="#">Gronkh</a> <a href="#">Sodapoppin</a></span>
</div>

CSS

a {
    display:inline-Block;
    text-decoration:none;
}

#navwrapper.unselected {
    height:2px !important;
}
#navwrapper {
    background-color:#ff0000;
    height:120px;
    position:relative;
    transition: all 400ms ease;
}
#dropdown1, #dropdown2 {
    padding: 10px 25px;
    color: rgba(0,0,0,0.8);
    position:absolute;
}
#dropdown1 a, #dropdown2 a {
    color: rgba(0,0,0,8);
    transition: all 300ms ease-out;
}
#dropdown1.unselected, #dropdown2.unselected {
    color: rgba(0,0,0,0)!important;
    z-index:-1;
}
#dropdown1.unshown, #dropdown2.unshown {
    display:none;
}
#dropdown1.unselected a, #dropdown2.unselected a {
    color: rgba(0,0,0,0)!important;
}

JavaScript

$( "#nav1" ).click(function() {
    var dropdown1 = $("#dropdown1");
    var dropdown2 = $("#dropdown2");
    var navwrapper = $("#navwrapper");
    if (dropdown1.hasClass( "unselected" ) || dropdown2.hasClass( "unshown" ) ) {
        dropdown1.removeClass('unshown');
        dropdown2.removeClass('unshown');
        dropdown1.removeClass('unselected');
        navwrapper.removeClass('unselected');
        dropdown2.addClass('unselected');
    } else{
        dropdown1.addClass('unshown');
        navwrapper.addClass('unselected');
        dropdown2.addClass('unshown');
    }
});
$( "#nav2" ).click(function() {
    var notshown = $("#dropdown1", "#dropdown2");
    var dropdown2 = $("#dropdown2");
    if (dropdown2.hasClass( "unselected" ) || dropdown2.hasClass( "unshown" ) ) {
        notshown.removeClass('unshown').delay(1000).queue(function(){
            var dropdown1 = $("#dropdown1");
            var dropdown2 = $("#dropdown2");
            var navwrapper = $("#navwrapper");
            dropdown1.removeClass('unselected');
            dropdown2.removeClass('unselected');
            navwrapper.removeClass('unselected');
            dropdown1.addClass('unselected').dequeue();
            };
        
    }else{
        dropdown2.addClass('unshown');
        navwrapper.addClass('unselected');
        dropdown1.addClass('unshown');
    }
});