JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<main class="d-flex flex-column min-vh-100">
<div class="container">
  <div class="row">
  Other content<br>
  Other content<br>
  Other content<br>
  Other content<br>
  </div>
</div>
<div class="container flex-grow-1 d-flex mt-2">
        <div class="row flex-grow-1">
            <div class="col-sm-12 col-md-12 col-lg-6 col-xl-6 col-xxl-6 box">
                <div class="text-center fw-bold text-block-1">
                    <span>
                        header
                    </span>
                </div>
                <div class="text-block-2">
                block 1
                </div>
                <div class="text-block-3">
                <!-- content -->
                    <div class="text-block-4"><span>sub block 2</span></div>
                    <div class="text-block-5"><span>sub block 3</span></div>
                    <div class="text-block-6"><span>sub block 4</span></div>
                    <div class="text-block-4"><span>sub block 2</span></div>
                    <div class="text-block-5"><span>sub block 3</span></div>
                    <div class="text-block-6"><span>sub block 4</span></div>
                    <div class="text-block-4"><span>sub block 2</span></div>
                    <div class="text-block-5"><span>sub block 3</span></div>
                    <div class="text-block-6"><span>sub block 4</span></div>
                    <div class="text-block-4"><span>sub block 2</span></div>
                    <div class="text-block-5"><span>sub block 3</span></div>
                    <div class="text-block-6"><span>sub block 4</span></div>
                    <div class="text-block-4"><span>sub block 2</span></div>
                    <div class="text-block-5"><span>sub block 3</span></div>
                    <div...

CSS

MAIN{
  background-color: antiquewhite;
}
.box {
  display: flex;
  flex-direction: column;
}

.text-block-1{
  background-color: #43e8e5;
}
.text-block-2{
  background-color: #43e846;
}
.text-block-3{
   background-color: #e0e843;
   flex-grow: 1;
   overflow-y: scroll;
}
.text-block-4{
   background-color: #e87a43;
}
.text-block-5{
   background-color: #dcaae6;
}
.text-block-6{
   background-color: #5e4f61;
}
.text-block-7{
   background-color: #6255b5;
}