JSFiddle - React, Tailwind, and code Playground

HTML

<div class="hero">
  <div class="a">
    <img src="http://unsplash.it/600x300?random">
    <h2>Title</h2>
  </div>
  <div class="b">
    <div class="b1">
      <img src="http://unsplash.it/600x400?random">
      <h2>Title</h2>
    </div>
    <div class="b2">
      <img src="http://unsplash.it/600x500?random">
      <h2>Title</h2>
    </div>
  </div>
</div>

CSS

.hero {
  display: flex;
  height: 200px;
}
.hero div {
  position: relative;
}
.hero img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  display: block;
}
.hero h2 {
  position: absolute;
  bottom: 0;
  left: 0;
  color: white;
  font-weight: normal;
  margin: 10px;
}
.a, .b {
  flex: 1;
}
.b {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.b1, .b2 {
  height: 50%;
}
.a:before,
.b1:before,
.b2:before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-image: linear-gradient(to bottom right, #002f4b, #dc4225);
  opacity: .6;
}