JSFiddle - React, Tailwind, and code Playground

HTML

<div class="c">
<div class="container">
    <div class="header">
      <div class="mails">
        <div style="border: solid 1px orange">
          <div>h1</div>
        </div>
        <div style="border: solid 1px orange">
          <div>h2</div>
        </div>
        <div style="border: solid 1px orange">
          <div>h3</div>
        </div>
        <div style="border: solid 1px orange">
          <div>h4</div>
        </div>
        <div style="border: solid 1px orange">
          <div>h5</div>
        </div>
        <div style="border: solid 1px orange">
          <div>h6</div>
        </div>
        <div style="border: solid 1px orange">
          <div>h7</div>
        </div>
      </div>
    </div>
    <div class="content">
      <div class="time-slots">
        <div style="border: solid 1px green; height: 1500px">
        s1
        </div>
        <div style="border: solid 1px red; height: 1500px">
        s2
        </div>
      </div>
      <div class="data">
        <div style="border: solid 1px blue; height: 1500px">d1</div>
        <div style="border: solid 1px blue; height: 1500px">d2</div>
        <div style="border: solid 1px blue; height: 1500px">d3</div>
        <div style="border: solid 1px blue; height: 1500px">d4</div>
        <div style="border: solid 1px blue; height: 1500px">d5</div>
        <div style="border: solid 1px blue; height: 1500px">d6</div>
        <div style="border: solid 1px blue; height: 1500px">d7</div>
      </div>
    </div>
  </div>
</div>

CSS

.c {
  height: calc(100vh - 3rem);
}

.container {
  align-self: start;
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: auto 1fr;
  overflow: auto;
  height: 100%;
}

.header {
  display: grid;
  grid-template-columns: 6rem auto 20px;
  grid-template-rows: auto;
}

.mails {
  grid-column-start: 2;
  grid-column-end: -2;
  display: grid;
  grid-template-columns: 350px 350px 350px 350px 350px 350px 350px;
  grid-template-rows: auto;
}

.content {
  overflow: auto;
  display: grid;
  grid-template-columns: 6rem 350px 350px 350px 350px 350px 350px 350px;
  grid-template-rows: auto;
}

.time-slots {
  display: grid;
  grid-template-columns: 3rem 3rem;
  grid-template-rows: auto;
}

.data {
  position: relative;
  display: grid;
  grid-template-columns: 350px 350px 350px 350px 350px 350px 350px;
  grid-template-rows: auto;
}

.container1 {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 50px 1fr;
  grid-row-gap: .5rem;
  padding: .5rem 1rem;
  height: 100%;
}

.header1 {
  display: grid;
  grid-template-columns: 1fr 40px 40px 40px 100px;
  grid-template-rows: auto;

  > * {
    align-self: center
  }
}