JSFiddle - React, Tailwind, and code Playground

HTML

<table width="100%" height="100"  align="left" valign="top" cellspacing="0" cellpadding="0" border="0" style="border-left: 1px solid #0000FF;">
	<tr>
		<td style="border-color:blue"  height="20" width="50" class="menu" id="td_cada" onClick="AlternarAbas('td_cada','div_cada')">Incluir</td>
		<td style="border-color:blue"  height="20" width="50" class="menu" id="td_alt_exc" onClick="AlternarAbas('td_alt_exc','div_alt_exc')">Alterar - Excluir</td>
		<td style="border-color:blue"  height="20" width="50" class="menu" id="td_cons" onClick="AlternarAbas('td_cons','div_cons')">Consultar</td>
	</tr>

<tr>
	<td height="200" style="border-color:blue"  width="300" class="tb-conteudo" valign="top" colspan="3" >
		<div id="div_cada" width="100" class="conteudo" style="display: block; padding-top:5px;">
			<table border="0" width="50%">
				<tr>
					<td >
						<iframe style="border-radius:20px;"  scrolling="no" src="../sai_cada_usua/sai_frm_incl_usua.php" width="830" height="310" >
						</iframe>
                    </td>
                </tr>
          </table>
       </div>

		<div id="div_alt_exc" class="conteudo" width="100"  style="display: none; padding-top:5px;">
			<table border="0" width="50%">
				<tr>
					<td>
						<iframe style="border-radius:20px;" scrolling="no" src="../sai_cada_usua/sai_frm_alte_excl_usua.php" width="830" height="310" >
						</iframe>
                    </td>
                </tr>
            </table>
        </div>
	
		<div id="div_cons" class="conteudo" style="display: block; padding-top:5px;">
			<table border="0" width="50%">
				<tr>
					<td>
						<form>
							<button type="button" value="Atualizar" style="height:26" style="width:5"  size="10" onclick='javascript:parent.location.replace("../sai_cada_usua/sai_cons_usua.php")' width="830" height="300" >
																	<image src="../sai_imag/refresh.ico"> </button>
						</form>
						<iframe style="border-radius:20px;" scrolling="" src="../sai_cada_usua/sai_cons_usua.php"...

CSS

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

.menu {
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: 1px solid #000000;
padding: 5px;
cursor: hand;
margin: 0px; 
margin-top: 0px;
}

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

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

JavaScript

function stAba(menu,conteudo)
{
  this.menu = menu;
  this.conteudo = conteudo;
}

var arAbas = new Array();
arAbas[0] = new stAba('td_cada','div_cada');
arAbas[1] = new stAba('td_alt_exc','div_alt_exc');
arAbas[2] = new stAba('td_cons','div_cons');

function AlternarAbas(menu,conteudo)
{

  for (i=0;i<arAbas.length;i++)
  {
   m = document.getElementById(arAbas[i].menu);
   m.className = 'menu';
   c = document.getElementById(arAbas[i].conteudo)
   c.style.display = 'none';
  }
  m = document.getElementById(menu)
  m.className = 'menu-sel';
  c = document.getElementById(conteudo)
  c.style.display = '';
}