JSFiddle - React, Tailwind, and code Playground

HTML

<header>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc hendrerit sem eu interdum porttitor. Suspendisse non dui quis lorem varius tempor. Aenean sed enim ultricies, congue orci non, porta urna. In sed metus a dui ornare commodo. Nunc tempus venenatis nisi sed mollis. Nunc lacinia non massa sit amet mollis. Pellentesque porta neque quis nunc finibus mattis. Donec porta enim sed varius consectetur. Curabitur imperdiet libero eros, in mattis mauris maximus ac. Vestibulum et feugiat dui, vitae congue mi. Praesent nunc sem, aliquet et ante ut, malesuada imperdiet enim. Integer quam ante, scelerisque nec nulla non, varius sollicitudin arcu.</p>
</header>
<main>
  <p>Praesent luctus lectus sed congue venenatis. Nullam sit amet laoreet nisi. Ut id mattis erat. Ut efficitur porta mauris, ut convallis purus lacinia et. Suspendisse nulla erat, efficitur in iaculis ut, ornare sit amet metus. Duis non sem dictum, pretium lorem et, elementum metus. Nulla iaculis vulputate magna quis ullamcorper. Maecenas tincidunt ante metus, et maximus metus maximus quis.</p>
  <p>Etiam finibus diam id sem placerat, in tempus nunc faucibus. Aliquam eget neque sit amet leo tempor consectetur sit amet sit amet mi. Suspendisse sit amet ex et est dictum iaculis. Vestibulum bibendum, dui accumsan egestas tincidunt, odio metus porta odio, id cursus lacus sapien et mauris. Phasellus nec dui et arcu lacinia fermentum ut ut felis. Nulla eu feugiat risus, ut imperdiet diam. Nullam a sagittis ligula. Nulla facilisi. Vestibulum non iaculis eros. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla porttitor, dui in dignissim eleifend, metus justo tristique magna, nec consequat turpis nulla in magna.</p>
  <p>Quisque suscipit molestie dui eu eleifend. Etiam pellentesque bibendum libero, vel hendrerit leo scelerisque et. Vestibulum et turpis sit amet lectus fringilla aliquam at eu felis. Integer feugiat justo non pulvinar lacinia. Quisque purus enim, fringilla at aliquam...

CSS

header {
  position: fixed;
  background: red;
  top: 0;
  left: 0;
  width: 100%;
  padding: 0 1em;
  
  -webkit-mask-image: linear-gradient(180deg, black 0%, black 80%, transparent 100%);
  mask-image: linear-gradient(180deg, black 0%, black 80%, transparent 100%);
}