JSFiddle - React, Tailwind, and code Playground

by Robert Herring

HTML

<div class="wrapper">
    <div class="titleContainer">Title</div>
    <div class="container">
        <div class="item">
            some stuff
        </div>
        <div class="item">
            other stuff
        </div>
        <div class="item">
            some other stuff
        </div>
    </div>
    <div class="menuContainer">
        <div class="menuItem">
            home
        </div>
        <div class="menuItem">
            something
        </div>
        <div class="menuItem">
            something else
        </div>
    </div>
</div>

CSS

html, body {
	height: 100%;
}
body {
	background-color: blue;
	margin: 0;
}


.wrapper {
    height:100%;
    display: flex;
    flex-flow: row wrap;
}
.wrapper > * {
  padding: 10px;
  flex: 1 100%;
}



.titleContainer {
	color: white;
	font-size: 50px;
	padding: 20px;
    text-align: center;
	margin: auto;
    background: black;
}



.container {
	display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
	text-align: center;
    margin-top:10px;
}
.item {
	padding: 30px;
	width: 25%;
	background-color: deepskyblue;
    margin: auto;
    flex: 0 1 auto;
}



.menuContainer {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
	background-color: green;
    align-items: flex-end;
    margin: auto;
}
.menuItem {
    margin:auto;
	padding: 15px;
    flex: 0 1 auto;
}