JSFiddle - React, Tailwind, and code Playground

HTML

<div class="outer outer1">
    <div class="inner inner1">
    </div>
</div>
<div class="outer outer2">
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    text3
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    text5
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    text3
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    text6
    <div class="inner inner2">
        text1
        <br /><br /><br /><br /><br /><br /><br /><br />
        text2       
    </div>
</div>
<div class="outer outer3">
    <div class="inner inner3">
    </div>
</div>

CSS

.outer {
    width: 20%;
    height: 1200px;
    margin-left: 5%;
    float: left;
}
.outer1 { background: yellow; } 
.outer2 { background: red; } 
.outer3 { background: gray; } 
.inner {
    height: 200px;
    position: fixed;
    top: 0;
}
.inner1 {
     background: orange;
     right: 75%;
     left: 5%;
}
.inner2 {
     background: pink;
     right: 50%;
     left: 30%;
}
.inner3 {
     background: black;
     right: 25%;
     left: 55%;
}