JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<table width="945" height="50"  align="left" valign="top" cellspacing="0" cellpadding="5" border="0" style="border-left: 1px solid #000000;" >
   <tr>
       <td height="20" width="50" class="menu" id="td_usua" data-tab="div_usua">Usuario</td>
    <td height="20" width="50" class="menu" id="td_empr" data-tab="div_empr">Empresa</td>
    <td height="20" width="50" class="menu" id="td_nota" data-tab="div_nota">Nota Fiscal</td>
    <td height="20" width="50" class="menu" id="td_soft" data-tab="div_soft">Software</td>
  </tr>
</table>
		<div id="div_usua" class="conteudo" style="display: none; padding-top:5px;">
			<table align="left" border="0" width="2%">
				<tr>
					<td>
		    USUA
					</td>
				</tr>
			</table>
		</div>

		<div id="div_empr" class="conteudo"  style="display: none; padding-top:5px;">
            <table border="0" width="" align="left"valign="top">
                <tr>
					<td>
                  	 EMPR
                   </td>
                </tr>
            </table>
        </div>
        
		<div id="div_nota" class="conteudo"  style="display: none; padding-top:5px;">
            <table border="0" width="" align="left"valign="top">
                <tr>
					<td>
                  	NOTA
                   </td>
                </tr>
            </table>
        </div>
        
		<div id="div_soft" class="conteudo"  style="display: none; padding-top:5px;">
            <table border="0" width="" align="left"valign="top">
                <tr>
					<td>
                  	 SOFT
                   </td>
                </tr>
            </table>
        </div>        

</body>

CSS

body, table {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #000000;
}

.menu {
margin: 1px; 
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
color: #000033;
background-color: #FFFFFF;
border-right: 1px solid #000000;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
padding: 5px;
cursor: hand;
text-align: center;
margin-top: 0px;
}

.menu-sel {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
color: #0000FF;
background-color: #FFFAFA;
border-right: 1px solid #000000;
border-top: 2px solid #000000;
padding: 5px;
cursor: hand;
margin: 0px; 
margin-top: 0px;
}

.tb-conteudo {
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
margin: 0px; 
}

.conteudo {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: normal;
color: #000033;
background-color: ;
padding: 5px;
margin:0px;
width:500px;
}

JavaScript

$(document).ready(function() {
    
    $(".menu[data-tab]").click(function() {
        
        // reseta as propriedades das outras abas       
        $(".menu[data-tab]").each(function() {
            esconder($(this));
        });
        
        // muda as propriedades da aba atual
        exibir($(this));
    });
});

function esconder(menu) {
    mudarPropriedades(menu, "none", "white");
}

function exibir(menu) {
    mudarPropriedades(menu, "block", "silver");
}

function mudarPropriedades(menu, display, corDeFundo) {
    $(menu).css("background-color", corDeFundo);
    
    var aba = $(menu).attr("data-tab");
    $("#" + aba).css("display", display);
}