JSFiddle - React, Tailwind, and code Playground

by kiokotzu

HTML

<div class="clearfix contenedor">
    <div class="clearfix wrapper">
        <header>
            hola como estas
        </header>
        <div class="contenido">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla expedita ab animi autem perspiciatis odit praesentium temporibus neque nostrum repellat? Nemo hic cumque eveniet dolor deserunt doloremque minima qui commodi
             Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla expedita ab animi autem perspiciatis odit praesentium temporibus neque nostrum repellat? Nemo hic cumque eveniet dolor deserunt doloremque minima qui commodi
             Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla expedita ab animi autem perspiciatis odit praesentium temporibus neque nostrum repellat? Nemo hic cumque eveniet dolor deserunt doloremque minima qui commodi Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla expedita ab animi autem perspiciatis odit praesentium temporibus neque nostrum repellat? Nemo hic cumque eveniet dolor deserunt doloremque minima qui commodi Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla expedita ab animi autem perspiciatis odit praesentium temporibus neque nostrum repellat? Nemo hic cumque eveniet dolor deserunt doloremque minima qui commodi Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla expedita ab animi autem perspiciatis odit praesentium temporibus neque nostrum repellat? Nemo hic cumque eveniet dolor deserunt doloremque minima qui commodi!
        </div>
       

    </div>
    <footer class="clearfix">
            pie de pagina
        </footer>

</div>

CSS

.contenedor{width:100%; height:100%; background:#ccc;}
.wrapper{width:200px; margin:0 auto; border:1px solid red; display:block; position:relative; height:100px;}
header{background:#000; color:#fff;}
.contenido{position:absolute;  background:green;}
footer{position:absolute; bottom:0; left:0; background:blue; width:100%; padding:10px;}

.clearfix:before,.clearfix:after {content: " "; /* 1 */display: table; /* 2 */}
.clearfix:after {clear: both}

.clearfix {*zoom: 1;}