JSFiddle - React, Tailwind, and code Playground

HTML

<p>Quisque iaculis leo pharetra, hendrerit turpis sit amet, cursus urna. Nulla ac risus pharetra, faucibus lectus in, iaculis neque. Donec vitae sapien dolor. Cras rutrum ac neque eu molestie. Phasellus urna lectus, vestibulum non est sed, fermentum dapibus lorem. Maecenas lacinia lectus at viverra iaculis. Donec odio est, egestas non diam sit amet, posuere maximus sapien. Cras vel arcu non purus maximus ultrices.</p>
			<p> Proin placerat vulputate odio, sit amet sagittis massa tincidunt sed. Vivamus vestibulum aliquet dapibus. Quisque id dignissim erat. Curabitur ut interdum risus. Mauris nibh lacus, sagittis sed porta sed, ultrices sit amet nisl. Nunc sed magna diam. Praesent aliquet sed odio vitae accumsan. Pellentesque quis nisi elementum, consequat nibh sed, dapibus urna. Vestibulum vel molestie magna.</p>
      <p>Quisque iaculis leo pharetra, hendrerit turpis sit amet, cursus urna. Nulla ac risus pharetra, faucibus lectus in, iaculis neque. Donec vitae sapien dolor. Cras rutrum ac neque eu molestie. Phasellus urna lectus, vestibulum non est sed, fermentum dapibus lorem. Maecenas lacinia lectus at viverra iaculis. Donec odio est, egestas non diam sit amet, posuere maximus sapien. Cras vel arcu non purus maximus ultrices.</p>
			<p> Proin placerat vulputate odio, sit amet sagittis massa tincidunt sed. Vivamus vestibulum aliquet dapibus. Quisque id dignissim erat. Curabitur ut interdum risus. Mauris nibh lacus, sagittis sed porta sed, ultrices sit amet nisl. Nunc sed magna diam. Praesent aliquet sed odio vitae accumsan. Pellentesque quis nisi elementum, consequat nibh sed, dapibus urna. Vestibulum vel molestie magna.</p>
      <p>Quisque iaculis leo pharetra, hendrerit turpis sit amet, cursus urna. Nulla ac risus pharetra, faucibus lectus in, iaculis neque. Donec vitae sapien dolor. Cras rutrum ac neque eu molestie. Phasellus urna lectus, vestibulum non est sed, fermentum dapibus lorem. Maecenas lacinia lectus at viverra iaculis. Donec odio est, egestas non...

CSS

#target {
  height: 500px;
  width: 100%;
  background: maroon;
  color : red
}

p {
  font-size: 18px;
  line-height: 1.6;
}

#pct {
  position: fixed;
  top: 20px;
  left: 20px;
  background: #eee;
  padding: 20px 40px;
  font-size: 24px;
}

JavaScript

document.addEventListener("scroll", function(){
	var target = document.getElementById("target");

	/* Calculate percentage */
	var itemLength = (window.scrollY + window.innerHeight) <= target.offsetTop 
  ? 0 
  : ((window.scrollY + window.innerHeight) - target.offsetTop) <= (window.innerHeight + target.offsetHeight)
  ? (window.scrollY + window.innerHeight - target.offsetTop)
  : (window.innerHeight + target.offsetHeight)
  
  var percentage = Math.round((itemLength * 100) / (window.innerHeight + target.offsetHeight))
  /* Show in DOM */
  document.getElementById("pct").innerHTML =  percentage + "%";
});