JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">

  <div class="item item-1 item-small">Lorem <br> ipsum </div>
  <div class="item item-2 item-small">Loremlor <br>  ipsum </div>
  <div class="item item-3 item-big">
  <h1>Lorem ipsum dolor sit amet</h1> 
  <p>
    consectetur adipisicing elit. Maxime assumenda ea autem quisquam labore commodi, adipisci similique suscipit pariatur, porro ut. Architecto ab maxime facere quasi nulla deleniti ut. Placeat suscipit dicta nobis blanditiis. Di
  </p>
  
  <button class="btn">btn btn btn</button></div>

</div>

CSS

* {
  box-sizing: inherit;
}

html {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: #000;
  color: #fff;
}

.wrapper {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 20px;
  padding: 20px;
}

.item {
  padding: 40px;
  border: 1px solid deepskyblue;
  border-radius: 20px;
}

.item-1 {
  font-size: 50px;
  background: url(https://gamerteams.com/web/uploads/gallery/10000/1562/36570809.png) no-repeat right -50px top -30px/ 80% auto;
}

.item-2 {
  display: flex;
  justify-content: flex-end;
  font-size: 50px;
  background: deepskyblue url(https://playvalorant.com/static/agents-group-539f9e91c0ca94a88baafa239808180b.png) no-repeat left top / 70% auto;
}
.btn {
  padding: 0.5em 1em;
  border-radius: 20px;
  border: 0;
  background: deepskyblue;
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}
@media (min-width: 768px) {
  .wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 20px;
  }

  .item-small {
    grid-column: 1/2;
  }

  .item-big {
    grid-row: 1/3;
    grid-column: 2/3;
  }
}