JSFiddle - React, Tailwind, and code Playground

by Евгений Дзюба

HTML

<div class="wrap">
      <div class="green item">
        <img src="https://dispatcher.pte.pl.ua/users/id28/user_image/avatar/crop/0ce19aa0ccfd8f1eabb6380ed82d0a23.jpg"></div>
      <div class="blue item"><img src="https://dispatcher.pte.pl.ua/users/id28/user_image/avatar/crop/0ce19aa0ccfd8f1eabb6380ed82d0a23.jpg"></div>
      <div class="yellow item"><img src="https://dispatcher.pte.pl.ua/users/id28/user_image/avatar/crop/0ce19aa0ccfd8f1eabb6380ed82d0a23.jpg"></div>
      <div class="grey item"><img src="https://dispatcher.pte.pl.ua/users/id28/user_image/avatar/crop/0ce19aa0ccfd8f1eabb6380ed82d0a23.jpg"></div>
    </div>

CSS

.wrap{
       margin-left:auto;
   margin-right:auto;
    display: flex;
    flex-wrap: wrap;
   max-width:700px; 
}

.item{
  flex:1;
  min-width:100px;
  padding: 2px; 
}
img{
   width:100%;
}