JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="main-menu">
    <li>
        <a href="#">PRODUTOS</a>
<ul class="sub-menu">
	<li><a href="#">Diretoria</a></li>
	<li><a href="#">Apresentação</a></li>
	<li><a href="#">Atual</a></li>
	<li><a href="#">Histórico</a></li>
	<li><a href="#">Galeria de Presidentes</a></li>
	<li><a href="#">Estatuto</a></li>
	<li><a href="#">Delegados</a></li>
	<li><a href="#">Gestões Anteriores</a></li>
</ul>
</li>
    <li>
        <a href="#">QUEM SOMOS</a>
<ul class="sub-menu">
	<li><a href="#">Diretoria</a></li>
	<li><a href="#">Apresentação</a></li>
	<li><a href="#">Atual</a></li>
	<li><a href="#">Histórico</a></li>
	<li><a href="#">Galeria de Presidentes</a></li>
	<li><a href="#">Estatuto</a></li>
	<li><a href="#">Delegados</a></li>
	<li><a href="#">Gestões Anteriores</a></li>
</ul>
</li>
</ul>

CSS

.sub-menu{
    display: none;
}
.active .sub-menu{
	display: block;
}

JavaScript

$(document).ready(function() {
		    $('.main-menu > li').click(function(event) {
                event.preventDefault();
                event.stopPropagation();
		        $('.main-menu > li.active').removeClass("active"); //aqui removemos a class do item anteriormente clicado para que possamos adicionar ao item clicado
		        $(this).addClass("active"); //aqui adicionamos a class ao item clicado
		    });
            $("html, body").click(function(event) {
              $('.main-menu li.active').removeClass("active");
            });
		});