JSFiddle - React, Tailwind, and code Playground

HTML

<div id="trigger">
        <div id="menu">MENU<br/></div>
        <div id="navdrop">
            <a class="a transition" id="item1" href="Pages/music.html" alt="MUSIC">MUSIC</a><br />
            <a class="a transition" id="item2" href="Pages/photos.html" alt="PHOTOS">PHOTOS</a><br />
            <a class="a transition" id="item3" href="Pages/biography.html" alt="BIOGRAPHY">BIOGRAPHY</a><br />
            <a class="a transition" id="item4" href="Pages/discography.html" alt="DISCOGRAPHY">DISCOGRAPHY</a><br />
            <a class="a transition" id="item5" href="Pages/contact.html" alt="CONTACT">CONTACT</a><br />
            <a class="a" id="item6" href="http://www.blog.fernandogaribay.com" alt="BLOG" target="_blank">BLOG</a><br />
        </div>
    </div>

CSS

#menu:show{
   text-decoration: underline;
}

JavaScript

$('#trigger').click(function (){
    $('#navdrop').slideToggle(400, function(){
         $('#menu').toggleClass('show');
    });
});