JSFiddle - React, Tailwind, and code Playground

by Ed Bulikyan

HTML

<div class="container">
  
  <div class="main">1</div>

  <div class="inner">
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
  </div>
  
</div>

SCSS

body {
  margin: 0;
  padding: 0;
}

.container {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: space-between;
  border: 1px solid lime;
  overflow: hidden;
  position: relative;
}

.main {
  font-size: 100px;
  flex: 0 0 70%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: pink;
}

.item {
  font-size: 100px;
  flex: 0 0 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50vh;

  &:nth-child(4n+1) {
    background-color: red;
  }
  &:nth-child(4n+2) {
    background-color: blue;
  }
  &:nth-child(4n+3) {
    background-color: yellow;
  }
  &:nth-child(4n+4) {
    background-color: purple;
  }
}

.inner {
  flex: 0 0 30%;
  height: 100vh;
  overflow: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: space-between;
  
  .item {
    flex: 1 1 50%;
  }
}