JSFiddle - React, Tailwind, and code Playground

by Amando Filipe

HTML

<!-- 1st row verticaly centered text in the square columns -->
<div class="wrapper">
    <div class="square">
        <div class="content">
            <div class="table">
                <div class="table-cell">
                    <ul>This demo shows you can center multiple types of content :
                        <li>Text</li>
                        <li>Images</li>
                        <li>Lists</li>
                        <li>... (you can also do it with forms)</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="square">
        <div class="content">
            <div class="table">
                <div class="table-cell">
                    <ul>This demo shows you can center multiple types of content :
                        <li>Text</li>
                        <li>Images</li>
                        <li>Lists</li>
                        <li>... (you can also do it with forms)</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="square">
        <div class="content">
            <div class="table">
                <div class="table-cell">
                    <ul>This demo shows you can center multiple types of content :
                        <li>Text</li>
                        <li>Images</li>
                        <li>Lists</li>
                        <li>... (you can also do it with forms)</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="square">
        <div class="content">
            <div class="table">
                <div class="table-cell">
                    <ul>This demo shows you can center multiple types of content :
                        <li>Text</li>
                        <li>Images</li>
                        <li>Lists</li>
                        <li>... (you can also do it with forms)</li>
                    </ul>
               ...

CSS

.square:nth-child(odd) {
    float:left;
    position: relative;
    width: 15%;
    padding-bottom : 15%;
    margin:0%;
    background-color:#1E1E1E;
    overflow:hidden;
}

.square:nth-child(even) {
    float:left;
    position: relative;
    width: 25%;
    padding-bottom : 25%;
    margin:15% 0% 0%;
    background-color:#1E1E1E;
    overflow:hidden;
}

.content {
    position:absolute;
    height:90%;
    width:90%;
    padding: 5%;
    font-size:0.8em;
}
.table {
    display:table;
    width:100%;
    height:100%;
}
.table-cell {
    display:table-cell;
    vertical-align:middle;
}
 ul {
    text-align:left;
    margin:5% 0 0;
    padding:0;
    list-style-position:inside;
}
li {
    margin: 0 0 0 5%;
    padding:0;
}
 .content .rs {
    width:auto;
    height:auto;
    max-height:90%;
    max-width:100%;
}
 .bg {
    background-position:center center;
    background-repeat:no-repeat;
    background-size:cover;
    color:#fff;
}
.img1 {
    background-image: url('https://farm3.staticflickr.com/2827/10384422264_d9c7299146.jpg');
}
.img2 {
    background-image: url('https://farm7.staticflickr.com/6217/6216951796_e50778255c.jpg');
}
.img3 {
    background-image: url('https://farm4.staticflickr.com/3794/13893055574_3df0ab636b.jpg');
}

 body {
    font-size:20px;
    font-family:'Lato', verdana, sans-serif;
    color: #fff;
    text-align:center;
    background:#ECECEC;
}
p {
    margin:0;
    padding:0;
    text-align:left;
}
.numbers {
    font-weight:900;
    font-size:100px;
}
#bottom {
    clear:both;
    margin:0 1.66%;
    width:89.68%;
    padding: 3.5%;
    background-color:#1E1E1E;
    color: #fff;
}
#bottom p {
    text-align:center;
    line-height:2em;
}
#bottom a {
    color: #000;
    text-decoration:none;
    border:1px solid #000;
    padding:10px 20px 12px;
    line-height:70px;
    background:#ccc;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
#bottom a:hover {
    background:#ECECEC;
    border:1px...