JSFiddle - React, Tailwind, and code Playground

HTML

<section class="middle">

        <div class="rowone">
            <img src="https://via.placeholder.com/200" height="200" width="200">
            <div class="text">Text</div>
        </div>
        <div class="rowone">
            <img src="https://via.placeholder.com/200" height="200" width="200">
            <div class="text">Text</div>
        </div>
        <div class="rowone">
            <img src="https://via.placeholder.com/200" height="200" width="200">
            <div class="text">Text</div>
        </div>
        <div class="rowone">
            <img src="https://via.placeholder.com/200" height="200" width="200">
            <div class="text">Text</div>
        </div>
    </section>

CSS

.middle {
    /*position: relative;
    overflow: hidden;*/
    display: flex;
    justify-content: space-between;
}

.rowone {
    /*float: left;
    width: 200px;
    margin: 1% 1% 45px 1%;*/
    text-align: center;
}

.text {
    /*position: absolute;
    bottom: 0px;
    margin: 30px;*/
    background-color: gray;
    display:inline-block;
}

.rowone img {
    width: 100%;
    display: block;
}