JSFiddle - React, Tailwind, and code Playground

HTML

<div class="square bg imgautumn1">
   <div class="content">
        <div class="table">
            <div class="table-cell months">
                DECEMBER
            </div>
        </div>
    </div>
</div>

CSS

.square {
    float: left;
    position: relative;
    margin: 0.25%;
    width: 50%;
    padding-bottom : 50%; /* = width for a 1:1 aspect ratio */
    background-color: #1E1E1E;
    overflow: hidden;
}
.content {
    position: absolute;
    height: 90%; /* = 100% - 2*5% padding */
    width: 90%; /* = 100% - 2*5% padding */
    padding: 5%;
}
.table {
    display: table;
    width: 100%;
    height: 100%;
}
.table-cell {
    display: table-cell;
    vertical-align: middle;
}
.months {
    font-size: 40px;
    font-weight: 900;
}
.imgautumn1 {
    background-image: url('https://raw.githubusercontent.com/erooijak/zaaikalender/master/Zk/Content/Images/Autumn/1.jpg');
}
/*  For responsive images as background */
.bg {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover; /* you change this to "contain" if you don't want the images to be cropped */
    color: #fff;
}
/*  Some styling that we like */
@import url(http://fonts.googleapis.com/css?family=Lato:400,900);
body {
    font-family: 'Lato',verdana, sans-serif;
    font-size: 40px;
    color: #fff;
    text-align: center;
    background: #ECECEC;
}