JSFiddle - React, Tailwind, and code Playground

HTML

<div class="parent-wrapper">
    <div class="child-wrapper">
        <img src="//dummyimage.com/100" />
    </div>
    <div class="child-wrapper">
        <img src="//dummyimage.com/100" />
    </div>
    <div class="child-wrapper">
        <img src="//dummyimage.com/100" />
    </div>
    <div class="child-wrapper">
        <img src="//dummyimage.com/100" />
    </div>
    <div class="child-wrapper">
        <img src="//dummyimage.com/100" />
    </div>
    <div class="child-wrapper">
        <img src="//dummyimage.com/100" />
    </div>
</div>

CSS

body {
    margin: 0;
}
.parent-wrapper {
    margin: auto;
    width: 500px;
    padding: 5px 0;
    font-size: 0;
}
.child-wrapper {
    display: inline-block;
    width: 100px;
    font-size: 16px;
}
.child-wrapper img {
    max-width: 100%;
    height: auto;
    padding: 5px;
    vertical-align: top;
    box-sizing: border-box;
}
@media screen and (max-width: 499px) {
    .parent-wrapper { width: 400px; }
}
@media screen and (max-width: 399px) {
    .parent-wrapper { width: 300px; }
}
@media screen and (max-width: 299px) {
    .parent-wrapper { width: 200px; }
}
@media screen and (max-width: 199px) {
    .parent-wrapper { width: 100px; }
}