JSFiddle - React, Tailwind, and code Playground

HTML

<div class="outer">
    <div id="container">
        <div id="dummy"></div>
        <div id="element">
            some text
        </div>
    </div>
    <div id="container">
        <div id="dummy"></div>
        <div id="element">
            some text2
        </div>
    </div>
    <div id="container">
        <div id="dummy"></div>
        <div id="element">
            some text3
        </div>
    </div>
    <div id="container">
        <div id="dummy"></div>
        <div id="element">
            some text4
        </div>
    </div>
    <div id="container">
        <div id="dummy"></div>
        <div id="element">
            some text5
        </div>
    </div>
    <div id="container">
        <div id="dummy"></div>
        <div id="element">
            some text6
        </div>
    </div>
    <div id="container">
        <div id="dummy"></div>
        <div id="element">
            some text7
        </div>
    </div>
    <div id="container">
        <div id="dummy"></div>
        <div id="element">
            some text8
        </div>
    </div>
    <div id="container">
        <div id="dummy"></div>
        <div id="element">
            some text9
        </div>
    </div>
</div>

CSS

.outer {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
}
#container {
    display: flex;
    position: relative;
    display: inline-block;
    flex-basis: 20%;
    outline: 1px solid #eee;
    text-align: center;
}
#dummy {
    margin-top: 100%;
}

#element {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: silver;
}