JSFiddle - React, Tailwind, and code Playground

by Michel Penke

HTML

<div class="parallax_section parallax_image_first">
  <div class="center">
    <article>Some text  </article>
    </div>
  </div>
<!--Block with content--> 
<div class="content_block">
  <div class="center">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sit amet tempor lorem. Proin egestas sagittis orci sit amet ultricies. Etiam nec pharetra justo, scelerisque scelerisque elit. Nam pretium purus eu neque pretium accumsan. Proin eget pulvinar dui. Vestibulum nulla magna, auctor quis mollis eget, hendrerit nec enim. Nam commodo feugiat metus, ac auctor mi. Quisque sed ante eget arcu sollicitudin sodales nec nec nunc.</div>
</div>
<div class="parallax_section parallax_image_second">
  <div class="center">
    <article>Some text  </article>
    </div>
  </div>
<!--Block with content--> 
 
<div class="content_block">
 
<div class="center">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sit amet tempor lorem. Proin egestas sagittis orci sit amet ultricies. Etiam nec pharetra justo, scelerisque scelerisque elit. Nam pretium purus eu neque pretium accumsan. Proin eget pulvinar dui. Vestibulum nulla magna, auctor quis mollis eget, hendrerit nec enim. Nam commodo feugiat metus, ac auctor mi. Quisque sed ante eget arcu sollicitudin sodales nec nec nunc.</div>
 
</div>

CSS

.parallax_section{
	height: 600px;
  	background-repeat: no-repeat;
  	background-attachment: fixed;
  	background-size: cover;
  	background-position: 100% auto;
		position:relative;
}

.parallax_image_first{
	 background-image: url("https://www.martin-missfeldt.de/images-pictures/grafik-illustration/bild-mit-wort-bild.jpg");
}