JSFiddle - React, Tailwind, and code Playground

HTML

<header class="block">
  1 block
</header>

<div class="row">
  <header class="block-2">111</header>
  <main class="block-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio reprehenderit quia qui? Sit, laborum ducimus est sunt possimus, at velit ipsum expedita voluptatibus eaque error nemo. Porro cupiditate, nemo quidem! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio reprehenderit quia qui? Sit, laborum ducimus est sunt possimus, at velit ipsum expedita voluptatibus eaque error nemo. Porro cupiditate, nemo quidem! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio reprehenderit quia qui? Sit, laborum ducimus est sunt possimus, at velit ipsum expedita voluptatibus eaque error nemo. Porro cupiditate, nemo quidem!</main>
</div>

CSS

body {
    margin: 0;
    padding: 0;
    width: 100%;
    min-height: 100vh;
    overflow-x: hidden;
    color: #323232;
    background-color: yellow;
    font-size: 16px;
    line-height: 1.2;
    font-weight: normal;
    font-style: normal;
    font-family: "Montserrat";
}

.block {
  position: fixed;
    z-index: 10;
    width: 100%;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
  background: blue;
}

.row {
  display: flex;
  height: calc(100vh - 100px);
	overflow: auto;
}

.block-2 {
  background-color: green;
}
.block-3 {
  background: red;
}