JSFiddle - React, Tailwind, and code Playground

by Michel Penke

HTML

<div id="text_1">
Text 1
</div>
<div class="parallax para_1">
<div id="text_2">
Text 2
</div>
</div>	

<div class="parallax para_2">
</div>

CSS

body {
  height: 200vh;
}


.parallax {
	min-height: 50vh; 
  margin: 10px;
	width: 100%;
	display: flex;
  background-size: cover; 
	justify-content: center;
	align-items: center;
 }
 

.para_1 {
 background: url(https://source.unsplash.com/random/800x600) no-repeat 10% 10%;  	
 background-attachment: fixed;
}

.para_2 {
 background: url(https://source.unsplash.com/random/800x600) no-repeat 10% 10%;  	
 background-attachment: fixed;
}

#text_1, #text_2 {
  font-weight: bold;
  display: relative;
  position: fixed;
}

#text_1 {
}