JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<div class='header'>
<p class='title'>The Big Bang Theory Explained.</p>
</div>
<div class='menu'>
<a class='button' target='content'><div class="centertext"><p>What is the big bang?</p></div></a>
</div>
<div class="content"></div>
</body>

CSS

html, body {
	margin: 0 0 0 0;
	padding: 0;
    width: 100%;
    height: 100%;
	background-color:#000;
}
div.header {
	background-image: linear-gradient(to bottom, #FFFFFF 0%, #E0E0E0 100%);
	height: 100px;
	width: 100%;
	font-family:Arial, Helvetica, sans-serif;
	color: #000;
	border-bottom:20px solid #09F;
	border-top-left-radius:12px;
    overflow: hidden;
}
p.title {
	padding-top: 20px;
	padding-left:20px;
}
div.menu {
	width:100%;
	height:80px;
	border-bottom-left-radius:12px;
	background-color:#fff;
	border-bottom: 1px solid #000;
}
a.button {
	display:table-cell;
	width:120px;
	height:80px;
	border-bottom-left-radius: 10px;
	background-color:#999;
    text-decoration:none;
	color:#FFF;
	text-align:center;
	font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
}
.content {
	height:calc(100% - 200px);
	width:100%;
}