JSFiddle - React, Tailwind, and code Playground

HTML

<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<div class="container">
  <div class="parallax-image"></div>
</div>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p><p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>

CSS

.container {
  position: relative;
  display: block;
  width: 100%;
  height: 200px;
  overflow: hidden;
}

.parallax-image {
		width: 100vw;
		height: 100vh;
		position: absolute;
		left: 0;
		top: 0;
		background: url("https://htmlcolorcodes.com/assets/images/html-color-codes-color-tutorials-hero-00e10b1f.jpg") no-repeat center center;
		background-size: cover;
}

JavaScript

function pi() {
		$('.parallax-image').each(function() {
			var offset = $(this).offset().top;
			let top = parseInt($(window).scrollTop()) - parseInt(offset);

			console.warn(top)
			$(this).css({
				top: top
			})
		});
	}

	$(window).on('scroll', function() {
		pi();
	});