JSFiddle - React, Tailwind, and code Playground

by t2t2

HTML

<div class="gallery">
  <div class="gallery-item"><img src="http://placekitten.com/400/300?image=1" alt=""></div>
  <div class="gallery-item"><img src="http://placekitten.com/400/300?image=2" alt=""></div>
  <div class="gallery-item"><img src="http://placekitten.com/400/300?image=3" alt=""></div>
</div>

CSS

.gallery {
  display: flex;
  flex-direction: column; /* mobile first */
}
.gallery-item {
  margin: 1rem;
  flex: 1 1 33%;
}
.gallery-item > img {
  width: 100%;
}

@media (min-width: 640px) {
  .gallery {
    flex-direction: row;
  }
}