JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container_header">header</div>
<div id="container_logo">Logo</div>
<div id="container_info">info</div>
<div id="container_button">
    <div id="text"><a href="#" id="button" data-role="button" data-inline="true" onclick='click();'>Click me</a>

    </div>
</div>
<div id="container_footer">footy</div>

CSS

body {
    overflow:hidden;
}
#text {
    display: table;
    vertical-align: middle;
    text-align:center;
    position: absolute;
    width: 80%;
    left: 10%;
    right:10%;
    height: 100%;
    top: 0;
}
#button {
    background: grey;
    display: table-cell;
    width: 100%;
    max-width: 300px;
    margin: 0;
}
#container_header {
    position: absolute;
    background: orange;
    top: 0;
    height: 10%;
    top: 0;
    width: 100%;
}
#container_logo {
    position: absolute;
    width: 100%;
    height: 15%;
    background:yellow;
    top: 10%;
}
#container_info {
    position: absolute;
    width: 100%;
    height: 30%;
    background:purple;
    top: 25%;
}
#container_button {
    position: absolute;
    width: 100%;
    height: 35%;
    background:blue;
    top: 55%;
}
#container_footer {
    position: absolute;
    width: 100%;
    height: 10%;
    background:green;
    bottom: 0;
}