JSFiddle - React, Tailwind, and code Playground

by yudhasetiawan

HTML

<div class="first">
    First DIV<br/>
    First DIV<br/>
    First DIV<br/>
    First DIV<br/>
    First DIV<br/>
    First DIV<br/>
    <div class="second">
        Second DIV<br/>
        Second DIV<br/>
        Second DIV<br/>
        Second DIV<br/>
        Second DIV<br/>
        <div class="third">
            <div class="fourth">
                Fourth DIV<br/>
                Fourth DIV<br/>
                Fourth DIV<br/>
                Fourth DIV<br/>
                Fourth DIV<br/>
                Fourth DIV<br/>
                Fourth DIV<br/>
                Fourth DIV<br/>
                Fourth DIV<br/>
                Fourth DIV<br/>
                Fourth DIV<br/>
                Fourth DIV<br/>
                Fourth DIV<br/>
                Fourth DIV<br/>
                Fourth DIV<br/>
                Fourth DIV<br/>
                Fourth DIV<br/>
                Fourth DIV<br/>
                Fourth DIV<br/>
                Fourth DIV<br/>
                Fourth DIV<br/>
                Fourth DIV<br/>
                Fourth DIV<br/>
            </div>
        </div>
    </div>
</div>

CSS

* {
	margin: 0;
	padding: 0;
}
html,body{
       height: 100%;        /* ie 6 will ignore this */
       min-height: 100%;        /* ie 6 will ignore this */
}

div{
    min-height: 100%;
    width:100%;
    -webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	box-sizing: border-box;
    *behavior: url(pathto/boxsizing.htc); /* Add the behavior/HTC after every box-sizing: border-box. You must add prefix with a star so IE6/7 can see it */
}

.first{
    padding:50px;
    background: red;
}

.second{
    padding:25px;
    background: green;
}

.third{
    background: yellow;
}

.fourth{
    background: brown;
}