JSFiddle - React, Tailwind, and code Playground

by Abdul Ahmad

HTML

<div class='parent'>
  <div class='title'>
    title one
  </div>
  <div class='child'>
    lba bba
  </div>
  <div class='child'>
    lba bba
  </div>
  <div class='child'>
    lba bba
  </div>
  
  <div class='title'>
    title two
  </div>
  <div class='child'>
    lba bba
  </div>
  <div class='child'>
    lba bba
  </div>
  <div class='child'>
    lba bba
  </div>
  
  <div class='title'>
    title three
  </div>
  <div class='child'>
    lba bba
  </div>
  <div class='child'>
    lba bba
  </div>
  <div class='child'>
    lba bba
  </div>
  
  <div class='title'>
    title four
  </div>
  <div class='child'>
    lba bba
  </div>
  <div class='child'>
    lba bba
  </div>
  <div class='child'>
    lba bba
  </div>
</div>

CSS

.parent {
  border: 1px solid #ddd;
  position: relative;
  overflow: auto;
  max-height: 300px;
}

.title {
  padding: 15px;
  box-sizing: border-box;
  border-bottom: 1px solid #ddd;
  border-top: 1px solid #ddd;
  position: sticky;
  top: 0;
  background: white;
}

.title:first-child {
  border-top: 0;
}

.child {
  padding: 15px;
  box-sizing: border-box;
}