JSFiddle - React, Tailwind, and code Playground

HTML

<div class="grid">
  <img src="https://static.1000.menu/img/content/18783/bliny-na-moloke-v-multivarke_1486143717_7_max.jpg">
  <img src="https://static.1000.menu/img/content/18783/bliny-na-moloke-v-multivarke_1486143717_7_max.jpg">
  <img src="https://static.1000.menu/img/content/18783/bliny-na-moloke-v-multivarke_1486143717_7_max.jpg">
  <img src="https://static.1000.menu/img/content/18783/bliny-na-moloke-v-multivarke_1486143717_7_max.jpg">
  
  <img src="https://www.svoimirykami.club/wp-content/uploads/2015/02/Vkusnoe-testo-na-bliny-i-legko-ih-prigotovit-min.jpg">
</div>

CSS

.grid {
  display: grid;
  margin: auto;
  width: 600px;
  grid: 70px 200px 60px 150px 90px / 10% 40% 40% 10%;
  gap: 10px;
}

.grid img {
  object-fit: cover;
  height: 100%;
  width: 100%;
  border-radius: 5px;
}

.grid img:nth-child(1) {
  grid-row: 2 / 4;
  grid-column: 2;
}

.grid img:nth-child(2) {
  grid-row: 1 / 3;
  grid-column: 3 / 5;
}

.grid img:nth-child(3) {
  grid-row: 4 / 6;
  grid-column: 1 / 3;
}

.grid img:nth-child(4) {
  grid-row: 3 / 5;
  grid-column: 3;
}

.grid img:nth-child(5) {
  grid-row: 1 / 4;
  grid-column: 1 / 3;
  z-index: -1;
  opacity: 20%;
}