JSFiddle - React, Tailwind, and code Playground

HTML

<!--como aqui nao tem acesso ao body, criei um div .principal 
vamos supor que ele é o body-->
<div class="principal">
  <div class="barra">
    Barra de menu
  </div>
  <div class="bloco1">
    <!--Como se estende esse div até o fim da página/elemento pai-->
    Menu lateral:<br>.<br>.<br>.
  </div>
  <div class="bloco2">
    Area de conteudo:<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.
  </div>
</div>

CSS

.principal{background-color:red;height:400px;}
.barra{background-color:gray;widht:100%;}
.bloco1{background-color:blue;width:30%;float:left;}
.bloco2{background-color:green;width:70%;float:left;}