JSFiddle - React, Tailwind, and code Playground

HTML

<div class="pd">
    <div class="align">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</div>

CSS

.pd {
    text-align:center;
    width:500px;
    background-color:#dddddd;
    height:500px;
}
.pd .align {
    position:relative;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    /* IE 9 */
    -webkit-transform: translate(-50%, -50%);
    /* Safari */
    overflow:hidden;
    width:400px;
}
.pd .align div {
    width:50%;
    height:200px;
    box-sizing:border-box;
    float:left;
    background-color:#cccccc;
    border:1px solid #333333;
    -webkit-transition: all 1s;
    /* Safari */
    transition: all 1s;
    display:table-cell;
}
.pd .align div:hover {
    background-color:#000000;
}