JSFiddle - React, Tailwind, and code Playground

by mtsys

HTML

<html>
  <head>    
    <title>Projeto SESMT</title>     
      <script type="text/javascript">      
    </script>
  </head>
  <body>         
    <div id="tudo">    
      <div id="topo">
        Topo
      </div>          
      <div id="conteudo">        
        <div id="principal">
          <div class="linha">Linha 2<br><br><br><br><br></div>          
          <div class="linha">
            <div class="teste">01</div>
            <div class="teste">02</div>
            <div class="teste">03</div>
            <div class="teste">04</div>
          </div>
        </div>              
      </div>
      <div class="clear"></div>        
    </div>
    <div id="footer">
  </body>
</html>

CSS

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

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:#7FADCB; height:100px; border-bottom:1px dotted #999;	text-align:left; padding-top:1px; }
#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; padding-bottom:30px; }
#rodape { background:#7FADCB; width:100%; height:40px; position: relative; bottom: 0; border:dotted #999; border-width: 1px 0; text-align:center; clear:left; min-height: 40px; height: auto !important;}
* html #tudo {height: 100%;}

#top {
  position: fixed;
  top: 0;
  left: 0;
  z-index: -99999;
  width: 100%;
  height: 100px;
  background-color:red;
}

.linha { clear: left; height: auto; padding: 10px; padding-bottom: 0px; text-align: left; overflow: visible; background-color: blue;}

@media screen and (max-width: 599px) {
    .teste { height: 50px; width: 50%; background-color:#babaca; float:left;}
}

@media screen and (min-width: 600px) {
    .teste { height: 50px; width: 25%; background-color:#babaca; float:left;}
}

.testeItem { background-color:Red; margin:8px; }

.menuleft { width: 100px; background-color: red; text-align:left;}

#footer {position: relative;
	margin-top: -150px; /* valor negativo da altura do rodapé */
	height: 150px;
    
  overflow:visible;  
	clear:both;
  background-color: yellow;
  width:100%;  
} 

.caixa { height: 100px; width: 100%; background-color:#babaca; float:left;}