JSFiddle - React, Tailwind, and code Playground

HTML

<div>
  <h3>text</h3>
  <div class="container">
    <div class="inner">
      <div class="container-item container-item-1">
      </div>
      <div class="container-item container-item-2">
      </div>
      <div class="container-item container-item-3">
      </div>
    </div>
  </div>
</div>

CSS

html, body {
  margin: 0;
}

.container {
  display: flex;
}

.container .inner {
  width: 100%;
  min-height: calc(100vh - 100px);
  margin: 30px;
  padding: 20px;
  border: 1px solid gray;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
}

.container-item {
  flex-grow: 1;
  border: 1px solid #cecece;
}

.container-item-1 {
  background-color: red;
}

.container-item-2 {
  background-color: orange;
}

.container-item-3 {
  background-color: green;
}