JSFiddle - React, Tailwind, and code Playground

by mtsys

HTML

<html>
  <head>    
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Projeto SESMT</title>    
      
  </head>
    <body>         
    <div id="top"></div>
    <div id="tudo">    
      <div id="topo">
        <div class="topo logo">
          
        </div>
        <div class="topo texto">          
          
        </div>
      </div>            
      <div id="principal">        
        <div id="conteudo">
          <p>
          Sem linha de texto o conteúdo todo aqui dentro, mas será que irá passar final ou vai continuar assim sem estragar a linhas padrão, 
          mas ainda faltou texto e estou colocando para ter mais coisas<br>
          Analisando o escopo do projeto e tendo em vista o aceite do cliente previamente estipulado, avaliamos que as mudanças interpessoais requisitadas pelo gerente de projetos serão de suma importância para a remodelação estratégica objetivada.          
          </p>
          <p>
            O prefeito do Rio, Eduardo Paes, também se manifestou e lamentou a morte do cinegrafista. Em nota, ele afirmou que todo tipo de violência é inaceitável e não deve ser tolerado. Para ele, "a sociedade deve refletir sobre os limites entre o direito de manifestação e os excessos que resultam em vandalismo e violência"
          </p>
          
          <div class="linha">
            <div class="box container">
              <div class="box interno">
                 Text ---
                <div class="box item">
                  Test
                </div>
              </div>
            </div>
            <div class="box container">             
              <div class="box interno">
                 Text ---
                <div class="box item">
                  Test
                </div>
              </div>            
            </div>
            <div class="box container">
              <div class="box interno">
          ...

CSS

/* 
#efefef - cinza
#54bde2

#324a61 - mais escuro
#476f94 - mais claro
*/

html, body {height:100%; width:100%; } 
html { overflow-y: scroll; } 

body {margin:0; padding:0; background:#F0F0F0; color:#000; font:12px Verdana, Arial, Helvetica, sans-serif; text-align:center; }
#tudo {position:relative; background:#fff; text-align:left; height:100%; margin:0; padding:0; width: 98%; margin: auto;	max-width:1000px; }
#topo, #menu, #empresa { background:#7FADCB; height:100px; border-bottom:1px dotted #999;	text-align:left; padding-top:1px; color:white;}
#topo { height: 145px;  min-height: 145px; height: auto !important; overflow:hidden; z-index: 1; }
#menu { height: 40px; padding-top : 8px; }
#empresa { height: 20px; color: White; padding-left: 10px; min-height: 20px; height: auto !important;}
#principal { width:100%; float : left; word-wrap: break-word; background-color:white; }
#conteudo { margin:8px; }
#top { position: absolute; top: 0; left: 0; z-index: -99999; width: 100%; height: 100px; background-color:#7FADCB; padding-top:1px; border-bottom:1px dotted #999;	 }
#rodape { position: relative; margin-top: -125px; height: 125px; background:#296084; overflow:visible; clear:both; width:100%; } 



.topo.logo { width :100px; height:145px; }
.topo.texto { height:auto; position:absolute; top: 0; left:100px; color:#fff; height: auto !important; float:left; }
.topo.logo  img {  max-width:80%; max-height:80%;  margin-left:16px; margin-top:16px;}
.topo.texto  img {  max-width:320px; max-height:120px; margin-top:24px; }  
 

.linha { clear: left; padding: 10px; padding-bottom: 0px; text-align: left; overflow: hidden;  background-color: white; }

.rodape_container { height: 85px; overflow:hidden; width:80%; margin: auto; background-color:#296084; color: white; }
.rodape_copy { height: 40px;   overflow:hidden; width:100%; margin: auto; background-color:#296084; border-top: thin solid white; color: white; }
.rodape_item { height: 100%; width: 33%; background-color: #296084;...

JavaScript

$(document).ready(function () {          
          $(window).trigger('resize');                
        });
        
        $(window).resize(function() {
          $('#top').css('height', $('#topo').height()+'px');
        });
        $(window).trigger('resize');