JSFiddle - React, Tailwind, and code Playground

HTML

<img class="breakpoint" src="https://www.webpagefx.com/blog/images/assets/cdn.sixrevisions.com/0476-01-responsive-images-demo/images/image01.jpg" width="960" height="640" />
<img class="breakpoint" src="https://www.webpagefx.com/blog/images/assets/cdn.sixrevisions.com/0476-01-responsive-images-demo/images/image02.jpg" width="960" height="640" />
<img class="breakpoint" src="https://www.webpagefx.com/blog/images/assets/cdn.sixrevisions.com/0476-01-responsive-images-demo/images/image03.jpg" width="960" height="640" />
<img class="breakpoint" src="https://www.webpagefx.com/blog/images/assets/cdn.sixrevisions.com/0476-01-responsive-images-demo/images/image04.jpg" width="960" height="640" />

CSS

img {
  width: 100%;
  height: auto;
}

.breakpoint {
  /* One column for smartphones */
  max-width: 100%;
  display: inline-block;
}

@media (min-width: 420px) {
  /* Two columns for tablets */
  .breakpoint {
    max-width: 48%;
  }
}

@media (min-width: 760px) {
  /* Four columns for large devices */
  .breakpoint {
    max-width: 24%;
  }
}