JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
    <div class="item1">
      <a href="sbp-tag">FEATURED</a>
      <a class="sbp-title" href="#">Watch a tiny cat taking a bath</a>
    </div>
    <div class="item2">
      <a href="sbp-tag">FEATURED</a>
      <a class="sbp-title" href="#">Spain: Take a virtual tour</a>
    </div>
    
    <div class="item3">
      <a href="sbp-tag">FEATURED</a>
      <a class="sbp-title" href="#">5 Tips to create your garden</a>
    </div>
    
    <div class="item4">
      <a href="sbp-tag">FEATURED</a>
      <a class="sbp-title" href="#">10 Movies you need to see</a>
    </div>
  </div>

CSS

.wrapper {
    display:grid;
    grid-template-columns:repeat(12,1fr);
    grid-gap: 10px;
  } 

  .wrapper > div {
    background-color: #eee;
    padding: 1em;
    box-sizing: border-box;
  }

  .wrapper > div:nth-child(odd) {
    background-color: #ddd;
  }

  .item1 {
    grid-row: 1 / 3;
    grid-column: 1/7;
    height: 700px;
  }
  .item2 {
    grid-row: 1 / 1;
    grid-column: 7/13;
    height: 340px;
  }
  .item3 {
    grid-row: 2 / 3;
    grid-column: 7/10;
    height: 350px;
  } 
  .item4 {
    grid-row:2/3;
    grid-column: 10/13;
    height: 350px;
  }
  .sbp-title {
    font-size: 30px;
  }

  .sbp-tag {
    font-size: 12px;
  }

  @media only screen and (max-width: 600px) {
    .wrapper {
      display:grid;
      grid-template-columns:repeat(12,1fr);
      grid-gap: 10px;
    } 
    .item1 {
      grid-row: 1 / 3;
      grid-column: 1/13;
      height: 350px;
    }
    .item2 {
      grid-row: 3 / 3;
      grid-column: 1/13;
      height: 200px;
    }
    .item3 {
      grid-row: 4 / 5;
      grid-column: 1 / 7;
      height: 200px;
    } 
    .item4 {
      grid-row: 4 / 5;
      grid-column: 7 / 13;
      height: 200px;
    }
  }