JSFiddle - React, Tailwind, and code Playground

HTML

<div id="head">
    <div class="control-buttons-container">
        <button class="control-button">some button text</button>
        <button class="control-button">proceed with this button</button>
        <button class="control-button">Seth Rollins, WWE Champion</button>
    </div>
</div>
<div id="body">
    <div class="control-buttons-container">
        <button class="control-button">proceed with this button</button>
        <button class="control-button">Seth Rollins, WWE Champion</button>
    </div>
</div>
<div id="foot">
    <div class="control-buttons-container">
        <button class="control-button">Seth Rollins, WWE Champion</button>
    </div>
</div>

CSS

.control-buttons-container {
    text-align: center;
    font-size: 0; /*fix inline block gap*/
}
.control-button {
    background-color: #0E80B4;
    color: white;
    outline: none;
    height: 73px;
    width: 128px;
    margin: 3px 1.5px;
    display: inline-block;
    vertical-align: top;
    font-size: 12px; /*reset font size*/
}
.control-button:hover {
    background-color: #3FA9DB;
}
#head, #body, #foot {
    border: 1px solid red;
    position: absolute;
    width: 396px;
    height: 80px;
    left: 0;
}
#head {
    top: 0;
}
#body {
    bottom: 50%;
    -ms-transform: translateY(50%);
    -webkit-transform: translateY(50%);
    transform: translateY(50%);
}
#foot {
    bottom: 0;
}