JSFiddle - React, Tailwind, and code Playground

by Aziz Natour

HTML

<div id="fixedWrapper">
  <ul>
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
    <li><a href="#">Link 3</a></li>
    <li><a href="#">Link 4</a></li>
    <li><a href="#">Link 5</a></li>
    <li><a href="#">Link 6</a></li>
    <li><a href="#">Link 7</a></li>
    <li><a href="#">Link 8</a></li>
    <li><a href="#">Link 9</a></li>
    <li><a href="#">Link 10</a></li>
  </ul>
</div>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam quia, quidem. Excepturi necessitatibus cumque repellendus quae sed. Sint ducimus sequi dolore consequuntur ipsa perspiciatis repellat sed, molestiae ipsum facere temporibus!</p>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam quia, quidem. Excepturi necessitatibus cumque repellendus quae sed. Sint ducimus sequi dolore consequuntur ipsa perspiciatis repellat sed, molestiae ipsum facere temporibus!</p>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam quia, quidem. Excepturi necessitatibus cumque repellendus quae sed. Sint ducimus sequi dolore consequuntur ipsa perspiciatis repellat sed, molestiae ipsum facere temporibus!</p>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam quia, quidem. Excepturi necessitatibus cumque repellendus quae sed. Sint ducimus sequi dolore consequuntur ipsa perspiciatis repellat sed, molestiae ipsum facere temporibus!</p>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam quia, quidem. Excepturi necessitatibus cumque repellendus quae sed. Sint ducimus sequi dolore consequuntur ipsa perspiciatis repellat sed, molestiae ipsum facere temporibus!</p>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam quia, quidem. Excepturi necessitatibus cumque repellendus quae sed. Sint ducimus sequi dolore consequuntur ipsa perspiciatis repellat sed, molestiae ipsum facere temporibus!</p>

CSS

#fixedWrapper {
  background:yellow;
  position:fixed;
  height: 50%;
  width:100%;
  /*centering*/
  left:0;
  right:0;
  margin:0 auto;
}

ul {
  margin:0;
  padding: 0;
  list-style:none;
  max-height:100%;
  overflow: scroll;
}

li a {
  display:block;
  padding:2em;
  background:black;
  color:#FFF;
  text-decoration: none;
  margin:2em;
}

p {
  background:#EEE;
  padding:2em;
}