JSFiddle - React, Tailwind, and code Playground

Teste de Divs

by Gustavo Castilho

HTML

<header>
   <title>ERP</title>
</header>
<body>
<div id="divAreaSite">
   <!--span id="AreaSite"> Area Site</span-->
   <div id="divAreaConteudo">
      <!--span id="AreaConteudo"> Area Conteudo</span-->

      <div id="divAreaTitulo">
         <span id="AreaTitulo"> Area Titulos</span>
      </div>
      <div id="divAreaMenu">
         <span id="AreaMenu"> Area Menu</span>
      </div>
      <div id="divAreaMenuLateral">
         <!--span id="AreaMenuLateral"> Area Menu Lateral</span-->
      </div>

      <div id="divAreaDados">
          <!--span id="AreaDados"> Area Dados</span>

          <!--div id="divVendas">
              <span id="AreaVendas"> Vendas</span>
          </div>

          <div id="divVendasDados">
              <span id="VendasDados"> Vendas Dados</span>
          </div-->
      </div>
   </div>
</div>
</body>
</html>

CSS

html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}
body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}
#divAreaSite {
    background-color: #1f3ff0;
    width: 100%;
    height: 100%;
}

#divAreaConteudo {
    background-color: #f03a45;
    margin-left: 3%;
    margin-right: 3%;
    width: 90%;
    height: 60%;
}

#divAreaTitulo {
    background-color: #76f0cb;
    width: 100%;
}

#divAreaMenu {
    background-color: #2ff062;
    width: 100%;
}

#divAreaMenuLateral {
    background-color: #f0a75c;
    height: 100%;
    width: 20px;
   // float: left;
}
/*
#divAreaDados {
    background-color: #826cf0;
    width: 100%;
    height: 100%;
    float: left;
}
#divAreaNotificacoes{
    background-color: #2f36cc;
    //overflow-y: auto;
    width: 80%;
    height: 20%;
    float: left;
}
/*
#divAreaNotificacoesERP {
    background-color: #cc6812;
    width: 45%;
    height: 50%;
    float: left;
}

#divAreaRodape {
    position: absolute;
    bottom: 0px;
    background-color: #bdc0b9;
    width: 100%;
}
*/