JSFiddle - React, Tailwind, and code Playground

HTML

<div style="overflow-y:auto;height:300px;">
  <h3 class="heading">Heading 1</h3>
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
  <h3 class="heading">Heading 2</h3>
  <div class="item">Item 4</div>
  <div class="item">Item 5</div>
  <div class="item">Item 6</div>
  <h3 class="heading">Heading 3</h3>
  <div class="item">Item 7</div>
  <div class="item">Item 8</div>
  <div class="item">Item 9</div>
  <h3 class="heading">Heading 4</h3>
  <div class="item">Item 19</div>
  <div class="item">Item 11</div>
  <div class="item">Item 12</div>
</div>

CSS

.item{
  height: 60px;
  width: 100%;
  background-color:red;
  margin:3px 0;
}

.heading{
  position:sticky;
  top:0;
  height:40px;
}