JSFiddle - React, Tailwind, and code Playground

by Soviut

HTML

<div class="body">
  <header class="tabs">
    this is a bar
  </header>

  <div class="spacer">spacer</div>
  
  <div class="block">
    <header class="bar">
      this is a bar
    </header>

    <div class="spacer">spacer</div>

    <header class="bar">
      this is a bar
    </header>

    <div class="spacer">spacer</div>
  </div>
</div>

<div class="body">
  <div class="block">
    this is a block
  </div>

  <header class="bar">
    this is a bar
  </header>
</div>

CSS

body, html {
  height: 100%;
  background: red;
}

.body {
  height: 2000px;
  margin-top: 20px;
  margin-bottom: 20px;
  
  background: repeating-linear-gradient(0deg, #fff, #CCC 100px);
}

.tabs {
  position: sticky;
  top: 0px;
  z-index: 10;
  padding: 5px;

  background: cornflowerblue;
}

.bar {
  position: sticky;
  top: 30px;
  z-index: 10;
  padding: 5px;
  
  background: rebeccapurple;
}

.block {
  position: relative;
  bottom: 0;
}

.spacer {
  height: 300px;
}