JSFiddle - React, Tailwind, and code Playground

by madjacky

HTML

<section class="banners">
    <div class="container-fluid">
        <ul class="list-reset grid banners-list">
            <li class="banners-item">1</li>
            <li class="banners-item banners-item--big">2</li>
            <li class="banners-item banners-item--big">3</li>
            <li class="banners-item">4</li>
        </ul>
    </div>
</section>

CSS

.container-fluid {
  max-width: 1860px;
  padding: 0 30px;
}

.grid {
  display: grid;
}

.banners-list {
  margin: 0;
  padding: 0;
  list-style: none;
  gap: 16px;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 500px);
}

.banners-item {
  background-color: #E5E8ED;
}

.banners-item--big {
  grid-column-end: span 2;
}