JSFiddle - React, Tailwind, and code Playground

by MikeChipshop

HTML

<div id="wrapper">
    <div id="header">
        Header            
    </div>
    <div id="content">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ultrices nunc metus, ac blandit dolor. Suspendisse sed ante eget leo commodo blandit id a dui. Curabitur nunc nunc, dignissim eget malesuada ut, ullamcorper vel sapien. Pellentesque vitae velit justo, suscipit gravida quam. Curabitur eget nulla lorem, ac faucibus tellus. Suspendisse pharetra felis et felis imperdiet eu hendrerit magna posuere. Phasellus consectetur, justo ac venenatis dignissim, felis nulla scelerisque sapien, a vulputate ante velit id neque.

            Nunc tempor placerat elit non vestibulum. Nam libero est, tempus quis malesuada eget, mattis vitae enim. Cras ultricies purus non diam dapibus ac tempor sapien porta. Ut vehicula nisi vitae leo commodo non facilisis eros elementum. Etiam malesuada molestie tortor, sed ultrices nisi mattis at. Nulla bibendum, elit facilisis tincidunt cursus, augue leo aliquam massa, eget condimentum felis lectus id dolor. Quisque urna tortor, fermentum tempor interdum eu, adipiscing eu erat. Donec dapibus, mi et sollicitudin viverra, augue ante pharetra neque, id auctor purus quam vel est. Donec semper, tellus in ultricies iaculis, augue diam tempor lacus, non dapibus sem quam in risus. Morbi mollis augue posuere elit congue varius. Aenean dignissim quam sit amet sapien adipiscing sit amet tincidunt felis faucibus. Cras lorem enim, pretium at viverra non, ultrices et arcu. Sed a dui magna. Duis hendrerit venenatis sollicitudin. Vestibulum quis ipsum vitae nunc euismod mollis malesuada non ipsum. Maecenas nec enim nec tortor lobortis consectetur.           
    </div>
    <div id="footer">
        Footer            
    </div>
<div style="clear:both;"></div>
</div>

CSS

#wrapper {
  background-color:#ff0000;
  max-width:800px;
  width:90%;
  padding:10px;
  margin:0 auto;   
}
#header {
  background-color:#00aced;
  height:100px;   
}
#content {
  background-color:#04a129;  
}
#footer {
  background-color:#e6a800;
  height:200px;   
}

/* Smaller Screen */

@media all and (max-width: 500px) {
    
#header {
  float:left;
 width:33%;   
}

#content {
  float:left;
 width:33%;  
}
#footer {
  float:left;
 width:33%;   
}