JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <div id="row1"></div>
    <div id="row2"></div>
    <div id="buttonsContainer">
        <div id="button1"></div>
        <div id="button2"></div>
        <div id="buttonCenter"></div>
    </div>
</div>

CSS

#container {
    height: 400px;
    width: 500px;
    background-color: gray;
}

#row1 {
    width: 500px;
    float: left;
    height: 100px;
    background-color:red;
}

#row2 {
    width: 500px;
    float: left;
    height: 100px;
    background-color:blue;
}

#buttonsContainer {
    width: 500px;
    float: left;
    height: 200px;
    background-color:orange;
}

#button1 {
    width: 50%;
    float: left;
    height: 200px;
    background-color:yellow;
}

#button2 {
    width: 50%;
    float: left;
    height: 200px;
    background-color:green;
}

#buttonCenter {
    width: 250px;
    height: 100px;
    margin-right:auto;
    margin-left:auto;
    margin-top:100px;
    background-color:gray;
    border: 1px solid #000;
    z-index: 1;
    position: relative;
}