JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
</div>

CSS

html, body {
    margin: 0;
    height: 100%
}
div {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: auto;
}
ul {
    padding: 0;
    margin: auto;
    width: 70%;
    display: inline-flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    align-items: flex-start;
    align-items: center;
    align-content: center;
}
li {
    list-style-type: none;
    border: 1px solid tomato;
    box-sizing: border-box;
    flex-basis: calc(100%/3);
    line-height: 1;
}

JavaScript

$(document).ready(function () {
    "use strict";

    var width = $('li').width();

    $('li').css({
        'height': width,
        'width': width,
        'background-color': 'green'
    });
    $("li").height($("li").width());
    $("li").height($("li").width());

    $(window).resize(function () {
        var width = $('li').width();        
        $('li').css({
            'height': width,
            'width': width,
            'background-color': 'green'
        });
        $("li").height($("li").width());
        $("li").height($("li").width());
    });
});