JSFiddle - React, Tailwind, and code Playground

HTML

<div class="works">
    <div class="works-example-wrapper">
        <div class="work-example">
            <a href="#"><img src="https://ind5.ccio.co/7B/OF/w7/18a70ca9f320fcb56274a7b5c60f30cf.jpg?iw=300" alt="" class="work-example-img"></a>
        </div>
        <div class="work-example">
            <a href="#"><img src="https://bw-1651cf0d2f737d7adeab84d339dbabd3-gallery.s3.amazonaws.com/images/image_2776262/64c8b4dc25f61bee2c566196dc3ceb76_thumbnail.jpg" alt="" class="work-example-img"></a>
        </div>
        <div class="work-example">
            <a href="#"><img src="https://ind5.ccio.co/7B/OF/w7/18a70ca9f320fcb56274a7b5c60f30cf.jpg?iw=300" alt="" class="work-example-img"></a>
        </div>
        <div class="work-example">
            <a href="#"><img src="https://bw-1651cf0d2f737d7adeab84d339dbabd3-gallery.s3.amazonaws.com/images/image_2776262/64c8b4dc25f61bee2c566196dc3ceb76_thumbnail.jpg" alt="" class="work-example-img"></a>
        </div>
        <div class="work-example">
            <a href="#"><img src="https://bw-1651cf0d2f737d7adeab84d339dbabd3-gallery.s3.amazonaws.com/images/image_2776262/64c8b4dc25f61bee2c566196dc3ceb76_thumbnail.jpg" alt="" class="work-example-img"></a>
        </div>
        <div class="work-example">
            <a href="#"><img src="https://ind5.ccio.co/7B/OF/w7/18a70ca9f320fcb56274a7b5c60f30cf.jpg?iw=300" alt="" class="work-example-img"></a>
        </div>
        <div class="work-example">
            <a href="#"><img src="https://bw-1651cf0d2f737d7adeab84d339dbabd3-gallery.s3.amazonaws.com/images/image_2776262/64c8b4dc25f61bee2c566196dc3ceb76_thumbnail.jpg" alt="" class="work-example-img"></a>
        </div>
        <div class="work-example">
            <a href="#"><img src="https://ind5.ccio.co/7B/OF/w7/18a70ca9f320fcb56274a7b5c60f30cf.jpg?iw=300" alt="" class="work-example-img"></a>
        </div>
    </div>
</div>

CSS

.works-example-wrapper {
    display: flex;
    flex-wrap: wrap;
}

.work-example {
    flex: 0 0 100%;
}

@media (min-width: 576px) {
  .work-example {
    flex: 0 0 50%;
    }
}

@media (min-width: 768px) {
    .work-example {
      flex: 0 0 25%;
    }
}

.work-example-img {
    width: 100%;
    height: 300px;
    object-fit: cover;
}