JSFiddle - React, Tailwind, and code Playground

HTML

<section class="sec1"></section>
		<div class="sec-text">
			<h3 class="sec-text__title">Basic CSS Parallax Scrolling Effects</h3>
			<p class="sec-text__dsc">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
		</div>

<section class="sec2"></section>
		<div class="sec-text">
			<h3 class="sec-text__title">Basic CSS Parallax Scrolling Effects</h3>
			<p class="sec-text__dsc">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
		</div>

<section class="sec3"></section>
		<div class="sec-text">
			<h3 class="sec-text__title">Basic CSS Parallax Scrolling Effects</h3>
			<p class="sec-text__dsc">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
		</div>

<section class="sec4"></section>

CSS

body {margin: 0;padding: 0;font-family: sans-serif;color: #262626;}

section {
  width: 100%;
  height: 100vh;
  box-sizing: border-box;
}
section.sec1 {
  background: url(https://images.unsplash.com/photo-1480365192324-83232188157e?ixlib=rb-0.3.5&s=49d223053e253418171da623e660a1ba&auto=format&fit=crop&w=1050&q=80) no-repeat center / cover;
  background-attachment: fixed;
}
section.sec2 {
  background: url(https://images.unsplash.com/photo-1464746133101-a2c3f88e0dd9?ixlib=rb-0.3.5&s=d5b622e2ea747f0eaa17e73a2040031a&auto=format&fit=crop&w=1027&q=80) no-repeat center / cover;
  background-attachment: fixed;
}
section.sec3 {
  background: url(https://images.unsplash.com/photo-1473294312123-83488e2f8e8f?ixlib=rb-0.3.5&s=69871c86b65827ddfd9685024c00e562&auto=format&fit=crop&w=1052&q=80)no-repeat center / cover;
  background-attachment: fixed;
}
section.sec4 {
  background: url(https://images.unsplash.com/photo-1496080940026-ce069e2759f5?auto=format&fit=crop&w=1349&q=80)no-repeat center / cover;
  background-attachment: fixed;
}
.sec-text {
  padding: 4% 8%;
  height: auto;
}
.sec-text__title {
  margin: 0;
  padding: 0;
  font-size: 2em;
}
.sec-text__dsc {
  font-size: 1em;
}