JSFiddle - React, Tailwind, and code Playground

HTML

<h1 class="Menu">Menu</h1>
    
    <div id="submenu">
        <ul>
            <a href="#"><li>Menu 1</li></a>
            <a href="#"><li>Menu 2</li></a>
            <a href="#"><li>Menu 3</li></a>
            <a href="#"><li>Menu 4</li></a>
            <a href="#"><li>Menu 5</li></a>
            <a href="#"><li>Menu 6</li></a> 
        </ul>

JavaScript

$(document).ready(function() {
   $("#submenu").hide(); 
});

$(".Menu").click(function() {
    $("#submenu").show("slow");
    $(".Menu").text("Close Menu");
    $(".Menu").removeClass( "Menu" ).addClass( "CloseMenu" );
});
$(".CloseMenu").click(function() {
    $("#submenu").hide();
    $(".CloseMenu").text("Menu");
    $(".CloseMenu").removeClass( "CloseMenu" ).addClass( "Menu" );
});