JSFiddle - React, Tailwind, and code Playground

HTML

<div class="content">
  <header class="header">
    <h1>HEADER 1</h1>
  </header>
  <div class="content-inner">
    <h1>CONTENT</h1>
  </div>
</div>
<div class="content">

  <header class="header">
    <h1>HEADER 2</h1>
  </header>
  <div class="content-inner">
    <h1>CONTENT</h1>
  </div>
</div>
<div class="content">

  <header class="header">
    <h1>HEADER 3</h1>
  </header>
  .content
  <h1>CONTENT</h1>
</div>

CSS

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  font-family: 'Roboto', sans-serif;
}

@import url("https://fonts.googleapis.com/css?family=Roboto:100");
h1 {
  letter-spacing: 3px;
  margin: 0;
  padding-left: 10px;
  padding-top: 10px;
  color: #fff;
  font-weight: 100;
}

.content {
  width: 100%;
  height: 100%;
  background: linear-gradient(70deg, orange, crimson);
}

.content .header {
  width: 100%;
  height: 50px;
  position: sticky;
  top: 0;
}

.content:nth-of-type(1) .header{
  background-color: dodgerblue;
}

.content:nth-of-type(2) .header{
  background-color: rebeccapurple;
}

.content:nth-of-type(3) .header{
  background-color: chartreuse;
}