JSFiddle - React, Tailwind, and code Playground

by hendrikdegraaf

HTML

<div class="wrapper">
  <div class="sticky">
    Some text here
  </div>
  <div class="input">
    <input type="checkbox">  
  </div>
  <div class="input">
    <input type="checkbox">  
  </div>
  <div class="input">
    <input type="checkbox">  
  </div>
  <div class="input">
    <input type="checkbox">  
  </div>
  <div class="input">
    <input type="checkbox">  
  </div>
  <div class="input">
    <input type="checkbox">  
  </div>
  <div class="input">
    <input type="checkbox">  
  </div>
  <div class="input">
    <input type="checkbox">  
  </div>
  <div class="input">
    <input type="checkbox">  
  </div>
  <div class="input">
    <input type="checkbox">  
  </div>
  <div class="input">
    <input type="checkbox">  
  </div>
  <div class="input">
    <input type="checkbox">  
  </div>
  <div class="input">
    <input type="checkbox">  
  </div>
  <div class="input">
    <input type="checkbox">  
  </div>
  <div class="input">
    <input type="checkbox">  
  </div>
  <div class="input">
    <input type="checkbox">  
  </div>

</div>

CSS

.wrapper {
  max-height: 100px;
  overflow: scroll;
  background: red;
}

.sticky {
  background: white;
  position: relative;
  top: 0;
}

.input {
  position: relative;
}