JSFiddle - React, Tailwind, and code Playground

HTML

<div data-role="page">
<a href="#" id="toggleNav" data-role="button">Toggle Navbar</a>

<div id="head" data-role="head">
    <div class="active" data-role="navbar">
        <ul>
            <li><a href="#">Button1</a></li>
            <li><a href="#">Button2</a></li>
            <li><a href="#">Button3</a></li>
            <li><a href="#">Button4</a></li>
        </ul>
    </div>
    <div data-role="navbar">
        <ul>
            <li><a href="#">Button5</a></li>
            <li><a href="#">Button6</a></li>
            <li><a href="#">Button7</a></li>
            <li><a href="#">Button8</a></li>
        </ul>
    </div>
</div>
    
</div>

CSS

#head div:last-child{display:none;}

JavaScript

$(function(){
    $('#toggleNav').click(function(){
        $('#head div').toggle();
    });
});