JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container container--inner">

  <div class="wrapper">

    <aside class="wrapper__aside">
      <p>block left</p>
    </aside>

    <section class="info wrapper__box" data-elem="block">
      <p><span>1 block 1 block 1 blcok</span> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis rerum doloremque mollitia perspiciatis laboriosam, ratione libero accusantium? Harum quis fugit sit vitae architecto velit beatae quod praesentium, sint, tempore cupiditate?</p>
      <p>1 block 1 block 1 blcok Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis rerum doloremque mollitia perspiciatis laboriosam, ratione libero accusantium? Harum quis fugit sit vitae architecto velit beatae quod praesentium, sint, tempore cupiditate?</p>
      <p>1 block 1 block 1 blcok Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis rerum doloremque mollitia perspiciatis laboriosam, ratione libero accusantium? Harum quis fugit sit vitae architecto velit beatae quod praesentium, sint, tempore cupiditate?</p>
      <p>1 block 1 block 1 blcok Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis rerum doloremque mollitia perspiciatis laboriosam, ratione libero accusantium? Harum quis fugit sit vitae architecto velit beatae quod praesentium, sint, tempore cupiditate? the end the end</p>
      
      <p>1 block 1 block 1 blcok Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis rerum doloremque mollitia perspiciatis laboriosam, ratione libero accusantium? Harum quis fugit sit vitae architecto velit beatae quod praesentium, sint, tempore cupiditate? the end the end</p>
      
      <p>1 block 1 block 1 blcok Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis rerum doloremque mollitia perspiciatis laboriosam, ratione libero accusantium? Harum quis fugit sit vitae architecto velit beatae quod praesentium, sint, tempore cupiditate? the end the end</p>
      
      <p>1 block 1 block 1 blcok...

CSS

.wrapper {
	position: relative;
}

.wrapper__aside {
	position: fixed;
	z-index: 11;
	top: 0px;
	transform: translateX(0px);
	width: 215px;
	height: 100vh;
	padding: 20px;
	background-color: #004757;
	transition: 0.3s transform;
}

.wrapper__box {
	width: calc(100% - 215px);
	margin-left: 215px;
}

[data-elem="block"] {
	position: sticky;
	z-index: 3;
	top: 0px;
	left: 0px;
	box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.2);
	min-height: 105vh;
	height: 105vh;
  overflow-y: scroll;
}

.wrapper__box span {
  font-size: 60px;
}

.info {
  background-color: red;
}

.contact {
  background-color: yellow;
}

.block {
  background-color: green;
}

.elem {
  background-color: orange;
}

* {
  box-sizing: border-box;
}

*::afrer,
*::before {
  box-sizing: border-box;
}

p,
body {
  margin: 0;
  padding: 0;
}

footer {
  position: relative;
  background-color: #fff;
	z-index: 22;
}