JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrap">
  <div id="header">
    <div class="container"><h1>FIXED HEADERLorem ipsum dolor sit amet, consectetur adipisicing elit. Unde numquam deserunt alias inventore veritatis dolorum qui quibusdam exercitationem provident quaerat, porro quidem, eum vel vero culpa, repudiandae illo rem assumenda neque nemo iure corporis? Deserunt molestiae, in at expedita voluptatem pariatur suscipit totam labore sit corrupti autem ullam deleniti maiores architecto quis impedit eligendi, consequatur quidem tenetur nulla adipisci nesciunt eius dicta a? Quaerat aut inventore eaque nobis repellendus voluptatum harum quisquam deleniti fuga, amet dolorum ip</h1></div>
  </div>
  <div id="main">
    <div class="container">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde numquam deserunt alias inventore veritatis dolorum qui quibusdam exercitationem provident quaerat, porro quidem, eum vel vero culpa, repudiandae illo rem assumenda neque nemo iure corporis? Deserunt molestiae, in at expedita voluptatem pariatur suscipit totam labore sit corrupti autem ullam deleniti maiores architecto quis impedit eligendi, consequatur quidem tenetur nulla adipisci nesciunt eius dicta a? Quaerat aut inventore eaque nobis repellendus voluptatum harum quisquam deleniti fuga, amet dolorum ipsam perspiciatis. Ea voluptatum, hic non dolores adipisci dolorum ipsa iure libero sapiente fuga autem delectus minus harum odio atque quasi distinctio minima cupiditate. Iusto ipsum provident incidunt dolor quis praesentium tempore, sint quam totam dolorem cumque eaque vero fuga id dolorum reiciendis consequuntur? Illo omnis id tempora atque numquam suscipit autem. Quam incidunt eos pariatur sit numquam corporis voluptatem sint ratione. Blanditiis ipsam commodi, aliquam architecto temporibus nesciunt quod nulla! Alias necessitatibus dolores, sint obcaecati totam autem animi laudantium. Accusantium voluptates provident, illo, ipsum nihil distinctio inventore sapiente, rerum, nostrum veniam...

CSS

.wrap{
  padding-top:60px;
}
.container{
  padding:0 15px;
}
#header{
  height:50px;
  background:transparent;
  position:fixed;
  top:0;
  left:0;
  right:0;
}
#header > .container{
  background:#333;
  height:100%;
  color:#fff;
}
@media screen and (min-width:768px){
  .container{
    width:740px;
    margin:auto;
  }
}
@media screen and (min-width:992px){
  .container{
    width:960px;
    margin:auto;
  }
}
@media screen and (min-width:1200px){
  .container{
    width:1170px;
    margin:auto;
  }
}