JSFiddle - React, Tailwind, and code Playground

HTML

<div class="gallery-block">
  <div class="gallery-item gallery-item-m">
    <div class="gallery-image">
      <img src="#" alt="image">
    </div>
  </div>
  <div class="gallery-item gallery-item-b">
    <div class="gallery-item-b-b">
      <div class="gallery-image">
        <img src="#" alt="image">
      </div>
    </div>
    <div class="gallery-item-b-s">
      <div class="gallery-item-b-s-item">
        <div class="gallery-image">
          <img src="#" alt="image">
        </div>
      </div>
      <div class="gallery-item-b-s-item">
        <div class="gallery-image">
          <img src="#" alt="image">
        </div>
      </div>
    </div>
  </div>
  <div class="gallery-item gallery-item-m">
    <div class="gallery-image">
      <img src="#" alt="image">
    </div>
  </div>
</div>

CSS

.gallery-block {
  width: 100%;
  height: 30vw;
  font-size: 0;
}

.gallery-item {
  height: 100%;
  display: inline-block;
  font-size: 14px;
  vertical-align: top;
}

.gallery-item-m {
  width: 25%;
  background: #ccc;
}

.gallery-item-b {
  width: 50%;
  background: #ddd;
}

.gallery-item-b > div {
  height: 50%;
}

.gallery-item-b-s {
  font-size: 0;
}

.gallery-item-b-s > div {
  display: inline-block;
  font-size: 14px;
  width: 50%;
}

.gallery-image {
  overflow: hidden;
  height: 100%;
}

.gallery-image img {
  height: 100%;
  border: none;
}