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,
#dropdown1.unselected a,
#dropdown2.unselected a {
    color:rgba(0, 0, 0, 0)!important;
}

JavaScript

var dropdown1 = $('#dropdown1');
var dropdown2 = $('#dropdown2');
var navwrapper = $('#navwrapper');
var allDropdowns = $('#dropdown1, #dropdown2');
$('#nav1').click(function () {
    if (dropdown1.hasClass('unselected')) {
        allDropdowns.removeClass('unselected');
        navwrapper.removeClass('unselected');
        dropdown2.addClass('unselected');
        dropdown1.fadeIn();
    } else {
        allDropdowns.fadeOut();
        dropdown1.addClass('unselected');
        navwrapper.addClass('unselected');
    }
});
$('#nav2').click(function () {
    if (dropdown2.hasClass('unselected')) {
        allDropdowns.removeClass('unselected');
        navwrapper.removeClass('unselected');
        dropdown1.addClass('unselected');
        dropdown2.fadeIn();
    } else {
        allDropdowns.fadeOut();
        dropdown2.addClass('unselected');
        navwrapper.addClass('unselected');
    }
});