JSFiddle - React, Tailwind, and code Playground

HTML

<div class="grid-container">
  <div class="box">
    <div class="header">
      <h1>Making remote work</h1>
    </div>
    <div class="text">
      <p>Get your team in sync, no matter your location. Streamline processes, create team rituals, and watch productivity soar.</p>
    </div>
    <div>
      <button>Learn more</button>
    </div>
  </div>
  <div class="logos-container">
    <div class="logos">
      <img src="images/client-databiz.svg" alt="databiz logo">
      <img src="images/client-audiophile.svg" alt="audiophile logo">
      <img src="images/client-meet.svg" alt="meet logo">
      <img src="images/client-maker.svg" alt="maker logo">
    </div>
  </div>
  <div class="boxside">
    <img src="images/image-hero-desktop.png" alt="image">
  </div>
</div>

CSS

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-template-areas:
    "head side"
    "main side"
    "footer footer";
    background-color: lightblue;
}
.logos-container {
  display: grid;
  align-items: end;
  grid-area: footer;
}
.logos{
  display: flex;
  justify-content: space-between;
  align-items: end;
}
.box{
  grid-area: head;
}
.boxside{
  grid-area: side;
}