JSFiddle - React, Tailwind, and code Playground

by Sampath_Madhuranga

HTML

<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Tangerine">

<head>
	<title></title>
</head>
<body>
	<div class="container">
		<section>
			<div class="img1 bgimg"></div>
			<div class="img1 fgimg"></div>
		</section>
		<section>
			<div class="img2 bgimg"></div>
			<div class="img2 fgimg"></div>
		</section>
		<section>
			<div class="img3 bgimg"></div>
			<div class="img3 fgimg"></div>
		</section>
		<section>
			<div class="img4 bgimg"></div>
			<div class="img4 fgimg"></div>
		</section>
		<section>
			<div class="img5 bgimg"></div>
			<div class="img5 fgimg"></div>
		</section>
	</div>
</body>
</html>

CSS

* {
    padding: 0px;
    margin: 0px;

    text-align: center;
    color: white;

    font-family: Tangerine;

}



div {
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-position: center;

	width: 100vw;
	height: 100vh;
	max-width: 100%;
	
}

section{
	width: 100vw;
	height: 100vh;
	max-width: 100%;
	margin-bottom: 3vh;
}

.container{
	display: flex;
	justify-content: center;
	flex-direction: column;

	height: auto;
	width: auto;

}



.bgimg{
	background-attachment: scroll;
	background-size: cover;
	position: absolute;
	z-index: -1;

	filter: blur(50px);

}

.fgimg{
	position: absolute;
	background-size: contain;
	z-index: 1;
}


.img1{
	background-image: url(images/img1.jpg);
}
.img2{
	background-image: url(images/img2.jpg);
}
.img3{
	background-image: url(images/img3.jpg);
}
.img4{
	background-image: url(images/img4.jpg);
}
.img5{
	background-image: url(images/img5.jpg);
}