JSFiddle - React, Tailwind, and code Playground

by petroveg

HTML

<div class="container">
	<div class="wrapper">
		<header class="top">
			<nav class="navigation-top">
				<div class="navigation-inner-top"></div>
			</nav>
		</header>
		<main class="content"></main>
	</div>
	<footer class="bottom">
		<nav class="navigation-bottom"></nav>
	</footer>
</div>

CSS

html,
body,
.container {
	height: 100%;
}
html {
	background: #99a59b;
}
body {
	margin: 0;
	padding: 0 20px;
}
.container {
	width: 800px;
	margin: auto;
}
.wrapper {
	min-height: 100%;
	margin: 0 0 -300px;
	background: #efe3cb;
}
.bottom {
	height: 300px;
	background: #6a4e42;
}
.content {
	padding: 0 0 300px;
}
.top {
	padding: 50px 0 0;
}

.navigation-top {
	position: relative;
}
.navigation-inner-top {
	height: 50px;
	background: #6a4e42;
}
.navigation-top:before,
.navigation-top:after,
.navigation-inner-top:before,
.navigation-inner-top:after {
	content: "";
	position: absolute;
	background: #6a4e42;
}
.navigation-top:before,
.navigation-top:after {
	right: 40%;
	left: 0;
}
.navigation-inner-top:before,
.navigation-inner-top:after {
	right: 0;
	left: 40%;
}
.navigation-top:before,
.navigation-inner-top:before {
	top: 0;
	bottom: 50%;
	transform-origin: 0 100%;
}
.navigation-top:after,
.navigation-inner-top:after {
	top: 50%;
	bottom: 0;
	transform-origin: 0 0;
}
.navigation-top:before,
.navigation-inner-top:after {
	transform: skewX(15deg);
}
.navigation-top:after,
.navigation-inner-top:before {
	transform: skewX(-15deg);
}


.navigation-top:before {
	border-top: 3px solid #6a4e42;
	border-left: 3px solid #6a4e42;
	box-shadow: inset 2px 2px 0 0 #997f6e;
}
.navigation-top:after {
	border-bottom: 3px solid #6a4e42;
	border-left: 3px solid #6a4e42;
	box-shadow: inset 2px -2px 0 0 #997f6e;
}
.navigation-inner-top:before {
	border-top: 3px solid #6a4e42;
	border-right: 3px solid #6a4e42;
	box-shadow: inset -2px 2px 0 0 #997f6e;
}
.navigation-inner-top:after {
	border-bottom: 3px solid #6a4e42;
	border-right: 3px solid #6a4e42;
	box-shadow: inset -2px -2px 0 0 #997f6e;
}

.navigation-bottom {
	position: relative;
	height: 200px;
	margin: 0 -20px;
	background: #efa132;
}
.navigation-bottom:before,
.navigation-bottom:after {
	content: "";
	position: absolute;
	z-index: -1;
	bottom: 100%;
	border-bottom: 30px solid #b67b1d;
}
.navigation-bottom:before {
	left:...