JSFiddle - React, Tailwind, and code Playground

by Lirix Plataformas para negĂłcios digi

HTML

<div class="parallax-01">
		<h1>LOREM IPSUM</h1>
	</div>
	<div class="parallax-02">
		<h1>LOREM IPSUM</h1>
	</div>
	<div class="parallax-01">
		<h1>LOREM IPSUM</h1>
	</div>
	<div class="parallax-02">
		<h1>LOREM IPSUM</h1>
	</div>

CSS

*{
	margin: 0px;
	padding: 0px;
}
.parallax-01{
	background: url(http://www.osmais.com/wallpapers/201309/cabana-floresta-wallpaper.jpg) center top;
height: 100vh; /* deixando a div com a altura total do navegador.*/
	background-attachment: fixed; /* esse faz a magica de simular um parallax =D.*/
	background-size: cover; /* deixando a imagem ocupando toda a janela do navegador.*/
	color: #fff;
	/*esse bloco abaixo centralizao o texto*/  
	display: flex;
	justify-content: center;
	align-items: center
	
}
.parallax-02{
	background: url(http://www.fundospaisagens.com/1920x1080/floresta.jpg) center top;
	height: 100vh; /* deixando a div com a altura total do navegador.*/
	background-attachment: fixed; /* esse faz a magica de simular um parallax =D.*/
	background-size: cover; /* deixando a imagem ocupando toda a janela do navegador.*/
	color: #fff;
	/*esse bloco abaixo centraliza o texto*/  
	display: flex;
	justify-content: center;
	align-items: center
}