JSFiddle - React, Tailwind, and code Playground

HTML

<body>
  <header>
      <div>
        Header
      </div>  
  </header>
  <main>
    Main
  </main>
</body>

CSS

body {
  margin: 0;
  padding: 0;
}

header { height: 300px;   background-attachment: fixed;}
div {
  width: 100%;
  height: 100%;

  
  /* background-image: linear-gradient(to bottom, black 0px, white 300px);*/
  
  /* The code above is working but the code below is not. Note that the color at the bottom line of header is supposed to be white. */
  
  background-image: linear-gradient(to bottom, black 100%, white 0%);
}

main {
  height: 2000px;
}