JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://rawgithub.com/rhyzx/9613192/raw/aa32f0bb5dd036ac031af9cb4a67de0a83a075a4/jquery-headroom.css">
<script src="https://rawgithub.com/rhyzx/9613192/raw/ea3c20201b1828bc25c775078d58c31728614b3f/jquery-headroom.js"></script>
<header class="navbar headroom" role="banner">
  THIS IS HEADER
</header>
<div class="content">
  CONTENT <br><br><br><br>
  CONTENT <br><br><br><br>
  CONTENT <br><br><br><br>
  CONTENT <br><br><br><br>
  CONTENT <br><br><br><br>
  CONTENT <br><br><br><br>
  CONTENT <br><br><br><br>
  CONTENT <br><br><br><br>
  CONTENT <br><br><br><br>
  CONTENT <br><br><br><br>
  CONTENT <br><br><br><br>
  CONTENT <br><br><br><br>
  CONTENT <br><br><br><br>
  CONTENT <br><br><br><br>
  CONTENT <br><br><br><br>
  CONTENT <br><br><br><br>
  CONTENT <br><br><br><br>
  CONTENT <br><br><br><br>
  CONTENT <br><br><br><br>
  CONTENT <br><br><br><br>
</div>

CSS

.navbar {
    left: 0;
    right: 0;
    height: 60px;
    background: #DDD;
}
.content {
    padding: 100px;
}