JSFiddle - React, Tailwind, and code Playground

HTML

<header>
  
</header>
<main>
  текст<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>текст<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>текст<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>
</main>
<footer>
  
</footer>

CSS

body{height:1500px}

header{
   position:fixed;
    top:0;
    width:100%;
    height:100px;
    background:blue;
}
footer{
   position:fixed;
   bottom:0;
    width:100%;
    height:50px;
    background:black;
}
main{
  height:5000px;
}