JSFiddle - React, Tailwind, and code Playground

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

HTML

<div class="wrap">
  <div class="green item">
      <div class="btn">Котельня №1</div> 
  </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; 
}
{
   width:100%;
}