JSFiddle - React, Tailwind, and code Playground

by Torwan

HTML

<main class="cd-main-content">
		<div class="cd-fixed-bg cd-bg-1">
			<h1>Alternating fixed/scrolling backgrounds Pure CSS</h1>
		</div> <!-- cd-fixed-bg -->

		<div class="cd-scrolling-bg cd-color-2">
			<div class="cd-container">
				<p>
					For this pen I included only the vanilla CSS and only that necessary  to demonstrate the effect but on the author's site at <a href="codyhouse.co/gem/alternate-fixed-scroll-backgrounds/">codyhouse.co</a>, the creators are using Sass which I think is nicer. But for the sake of simplicity for this example I took the easy way out. 
          </p>
          <p>
          As anyone who has tried knows, implementing sample code such as this into a site with a different architecture can be a little tricky but I did manage to weave it into a pre-existing project with a little work. I love the effect!
				</p>
			</div> <!-- cd-container -->
		</div> <!-- cd-scrolling-bg -->

		<div class="cd-fixed-bg cd-bg-2">
			<h2>The guy in the white leathers is me.</h2>
		</div> <!-- cd-fixed-bg -->

		<div class="cd-scrolling-bg cd-color-3">
			<div class="cd-container">
			  <p>In the authors presentation of the code, the default setting for the height of both the fixed and scrolling backgrounds is 100%. That min height can be what ever you want. If you add more text, the container grows but will always fill the viewport to the degree that min-height is defined.</p>
        <p>I have chosen to reduce this value to something less than 100% because at 100%, upon initial page load, the user has no visual indication that there is anything below the fold. My settings for these values, contained in the classes .cd-fixed-bg and .cd-scrolling-bg are 75% and 50% respectively.</p>
        <p>I suppose you could ad ID's to the individual scrolling-bg's and have them at different sizes for different purposes but that's up to you.
				</p>
			</div> <!-- cd-container -->
		</div> <!-- cd-scrolling-bg -->

		<div class="cd-fixed-bg cd-bg-3">
			<h2>There...

CSS

/* -------------------------------- 

Primary style

-------------------------------- */
html * {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

*, *:after, *:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  font-size: 100%;
  font-family: "Roboto", sans-serif;
  color: #3d3536;
  background-color: white;
}

body, html {
  /* important */
  height: 100%;
}
a {
  color: #a6989a;
}
/* -------------------------------- 

Modules - reusable parts of our design

-------------------------------- */
.cd-container {
  /* this class is used to give a max-width to the element it is applied to, and center it horizontally when it reaches that max-width */
  width: 90%;
  max-width: 768px;
  margin: 0 auto;
}
.cd-container::after {
  /* clearfix */
  content: '';
  display: table;
  clear: both;
}

.cd-main-content {
  /* you need to assign a min-height to the main content so that the children can inherit it*/
  height: 100%;
  position: relative;
  z-index: 1;
}

.cd-fixed-bg {
  position: relative;
  min-height: 75%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  z-index: 1;
}
.cd-fixed-bg h1, .cd-fixed-bg h2 {
  position: absolute;
  left: 50%;
  top: 50%;
  bottom: auto;
  right: auto;
  -webkit-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  -o-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  width: 90%;
  max-width: 1170px;
  text-align: center;
  font-size: 30px;
  font-size: 1.875rem;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  color: white;
}
.cd-fixed-bg.cd-bg-1 {
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/181085/track_riders_bg01.jpg");
}
.cd-fixed-bg.cd-bg-2 {
  background-image:...