JSFiddle - React, Tailwind, and code Playground

by ThomasSpiessens

HTML

<div class="box fullSize">
	<div class="boxHeader">HEADER</div>
	<div class="boxContent">
			<div class="box fullSize">
				<div class="boxHeader moregreen">INNER HEADER</div>
				<div class="boxContent red">
					 CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT  
				</div>
				<div class="boxFooter moreblue">INNER FOOTER</div>
			</div>
		</div>
	<div class="boxFooter">FOOTER</div>
</div>

CSS

.fullSize {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

.box {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  -ms-flex-direction: column;
  -webkit-flex-direction: column;
  flex-direction: column;
  background-color: brown;
}

/* line 7, ../../app/styles/_layout.scss */
.boxHeader {
  -ms-flex: 0 0 auto;
  -webkit-flex: 0 0 auto;
  flex: 0 0 auto;
  background-color: green;
}

/* line 12, ../../app/styles/_layout.scss */
.boxContent {
  -ms-flex: 1 0 auto;
  -webkit-flex: 1 0 auto;
  flex: 1 0 auto;
  -webkit-box-flex: 1.0;
  background-color: yellow;
}

/* line 18, ../../app/styles/_layout.scss */
.boxFooter {
  -ms-flex: 0 1 auto;
  -webkit-flex: 0 1 auto;
  flex: 0 1 auto;
  background-color: cornflowerblue;
}

.moreblue {
    background-color: blue;
}

.moregreen {
    background-color: darkgreen;
}

.red {
    background-color: red;
}