JSFiddle - React, Tailwind, and code Playground

HTML

<div class="fixed">
FIXED HEADER
</div>

<div class="wrapper">
   <div class="sticky">
        STICKY HEADER
   </div>
   
   some more content
   some more content
   some more content
   some more content   
   some more content
   some more content
   some more content
   some more content   
   some more content
   some more content
   some more content
   some more content   
   some more content
   some more content
   some more content
   some more content
   some more content
   some more content
   some more content
   some more content
   some more content
   some more content
   some more content
   some more content
   some more content
   some more content
   some more content
   some more content
   some more content
   some more content
</div>

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

CSS

.fixed {
  position: fixed;
  background: #ffc;
  top: 0;
  right: 0;
  left: 0;
  padding: 10px 10px 0;
  height: 30px;
  z-index: 1;
}

.wrapper {
  padding-top: 10px;
  width: 100px;
}

.sticky {
  background: #fcf;
  position: sticky;
  top: 40px;
}