JSFiddle - React, Tailwind, and code Playground

by Rozina Szogyenyi

HTML

<div class="parent">
  
    <div class="fixed">
       fix please
    </div>
    
    <div class="scroll">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce rutrum vulputate ligula, in placerat nunc egestas eu. Proin auctor euismod suscipit. Morbi dui mauris, finibus in lorem ut, consectetur tempus lectus. Nulla et rutrum dolor. Aenean mattis tristique sapien eget ultricies. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam venenatis ultrices urna, non posuere quam. Interdum et malesuada fames ac ante ipsum primis in faucibus. Morbi consectetur magna mauris, at lacinia nibh viverra a.

Nunc accumsan leo eget nunc sollicitudin finibus. Curabitur porta dapibus ex id eleifend. Aenean dignissim metus augue, et finibus est dictum fermentum. Suspendisse eros arcu, suscipit at tempor a, dignissim rutrum mauris. Aenean eu ligula sapien. Phasellus maximus rutrum erat eget ultricies. In hac habitasse platea dictumst. Duis pharetra massa tempus, pharetra tellus ut, ultricies purus.

Proin malesuada odio ac eros pellentesque semper. Aenean sollicitudin leo nibh. Suspendisse eget lacus sed justo mollis pretium a at turpis. Curabitur nec est id enim vehicula pellentesque. Ut at rhoncus odio, eu elementum dolor. Maecenas non enim tempor, pretium neque semper, porttitor ligula. Proin enim ligula, cursus ac mi non, auctor posuere quam. Vivamus vulputate faucibus ante, nec imperdiet urna. Proin blandit, ipsum a pharetra dapibus, risus odio vestibulum lorem, nec aliquam tellus ligula vel lorem. Nulla facilisi.

Sed sagittis, ex id maximus egestas, massa elit euismod nisi, id commodo velit dui sit amet nibh. Quisque aliquet eros non nisi viverra, nec viverra risus tempor. Morbi eu sollicitudin tortor. Morbi pulvinar dictum mi, consectetur ultrices velit porta nec. Vivamus a malesuada dui. Vivamus sed lorem luctus, consequat tortor id, dapibus nisl. Quisque tempor semper ligula, eget feugiat arcu. Vestibulum ut dolor...

CSS

.parent {
  position: relative;
  width: 300px;
  height: 300px;
  overflow: hidden;
}

.fixed {
  position: absolute;
  top: 0;
  left: 0;
  background: red;
  width: 100%;
  height: 20px;
}

.scroll {
  height: 300px;
  padding-top: 100px;
  overflow-y:scroll;
}