JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="flex">
  <li><img src="//placeholdit.imgix.net/~text?txtsize=100&bg=555&txtclr=fff&txt=468×468&w=468&h=468"></li>
  <li><img src="//placeholdit.imgix.net/~text?txtsize=100&bg=555&txtclr=fff&txt=468×668&w=468&h=468"></li>
  <li><img src="//placeholdit.imgix.net/~text?txtsize=100&bg=555&txtclr=fff&txt=468×468&w=468&h=468"></li>
  <li><img src="//placeholdit.imgix.net/~text?txtsize=100&bg=555&txtclr=fff&txt=468×468&w=468&h=468"></li>
  <li><img src="//placeholdit.imgix.net/~text?txtsize=100&bg=555&txtclr=fff&txt=468×468&w=468&h=468"></li>
  <li><img src="//placeholdit.imgix.net/~text?txtsize=100&bg=555&txtclr=fff&txt=468×468&w=468&h=468"></li>
</ul>

CSS

body {
  background: #ccc;
}

#flex {
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  list-style: none;
  margin: 0 auto;
  padding: 10px 0 0 10px;
}

li {
  margin: 0 10px 10px 0;
  width: 468px;
}

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