JSFiddle - React, Tailwind, and code Playground

HTML

<br><br><br>
<input name="btnSubmit" class="botao salvar" type="submit" value="Salvar" />&nbsp;&nbsp;<input name="btnSubmit" class="botao excluir" type="submit" value="Excluir" />&nbsp;&nbsp;<input name="btnSubmit" class="botao voltar" type="submit" value="Voltar" />&nbsp;&nbsp;<a class="botao voltar" href="/Produto/Index">Voltar&nbsp;&nbsp;</a>

CSS

/*#8EAEC1 #8AB4C4 #85BBC5 */

html, body {height:100%; width:100%;} 

body {margin:0; padding:0; background:#F0F0F0; color:#000; font:75%/1.4 Verdana, Arial, Helvetica, sans-serif; text-align:center; }
#tudo {position:relative; background:#fff; text-align:left; min-height:100%; margin:0; padding:0; width: 98%; margin: auto;	max-width:1000px; }
#conteudo { padding-bottom:45px; clear:left; }
#topo, #menu, #empresa { background:#8EAEC1; height:100px; border-bottom:1px dotted #999;	text-align:left; padding-top:1px; position:relative; }
#menu { height: 40px; padding-top : 8px; }
#empresa { height: 20px; color: White; padding-left: 10px; }
#principal { width:100%; float : left; word-wrap: break-word; padding-bottom:30px; }
#rodape { background:#8EAEC1; width:100%; height:40px; position: absolute; bottom: 0; border:dotted #999; border-width: 1px 0; text-align:center; clear:left; }

* html #tudo {height: 100%;}

.clear {clear:both;}

.topo.esq
{
    background: url('../images/logo.png') no-repeat 25px 25px;
     width :100px;
     height:100px;
}

.topo.dir
{
    height:auto;
    position:absolute;
    top:0;
    left:100px;   /* giving the value of the adjacent element ie width: 150px */
    bottom:0;
    right:0;    
    color:#fff;
}

a:link { color:white; text-decoration:none;font-weight:bold; }
a:visited { color:white;text-decoration:none;font-weight:bold; }
a:hover { color:white;text-decoration:none;font-weight:bold; }


a.preto:link { color:Black; text-decoration:none;font-weight:bold; }
a.preto:visited { color:Black;text-decoration:none;font-weight:bold; }
a.preto:hover { color:Black;text-decoration:none;font-weight:bold; }

.linha
{
    width       :   100%;         
    clear       :   left;    
    height      :   auto;
    padding     :   10px;    
    text-align  :   center;
}

.linha.left
{
    text-align  :   left;
}

.coluna
{
    height  :   auto;
    width   :   50%;
    float   :   left;        
}

.coluna.menu
{
    width   :   160px;
}

.coluna2
{
  ...