JSFiddle - React, Tailwind, and code Playground

by LuckyCat

HTML

<div class="container">
  <section class="background">
    <div class="content-wrapper">
      <elem type="text" tag="p" class="content-title">MEET A HOTTIE &amp; GET NAUGHTY!</elem>
      
      <button>
        Next
      </button>
    </div>
  </section>
  <section class="background">
    <div class="content-wrapper">
      <elem type="text" tag="p" class="content-title">Cras lacinia non eros nec semper.</elem>
      <elem type="text" tag="p" class="content-subtitle">Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cras ut massa mattis nibh semper pretium.</elem>
    </div>
      <button>
        Next
      </button>
  </section>
  <section class="background">
    <div class="content-wrapper">
      <elem type="text" tag="p" class="content-title">Etiam consequat lectus.</elem>
      <elem type="text" tag="p" class="content-subtitle">Nullam tristique urna sed tellus ornare congue. Etiam vitae erat at nibh aliquam dapibus.</elem>
    </div>
      <button>
        Next
      </button>
  </section>
  <section class="background">
    <div class="content-wrapper">
      <elem type="text" tag="p" class="content-title">Etiam consequat lectus 4.</elem>
      <elem type="text" tag="p" class="content-subtitle">Nullam tristique urna sed tellus ornare congue. Etiam vitae erat at nibh aliquam dapibus.</elem>
    </div>
      <button>
        Next
      </button>
  </section>
  <section class="background">
    <div class="content-wrapper">
      <elem type="text" tag="p" class="content-title">Etiam consequat lectus 5.</elem>
      <elem type="text" tag="p" class="content-subtitle">Nullam tristique urna sed tellus ornare congue. Etiam vitae erat at nibh aliquam dapibus.</elem>
    </div>
      <button>
        Finish
      </button>
  </section>
</div>

CSS

* { margin: 0; padding: 0; }
html,
body {
  overflow: hidden;
}
.background {
	-webkit-transition: all 4s cubic-bezier(0.22, 0.44, 0, 1);
	transition: all 4s cubic-bezier(0.22, 0.44, 0, 1);
  height: 100vh;
}
.background:nth-of-type(1) {
    	background: #ffcc66;
    	-webkit-transform: translateY(0);
    	transform: translateY(0);
}
.background.active:nth-of-type(1) {
    	background: #ffcc66;
    	-webkit-transform: translateY(-100vh);
    	transform: translateY(-100vh);
}
.background.active:nth-of-type(2) {
  background: #ff6666;
  -webkit-transform: translateY( -100vh);
  transform: translateY( -100vh);
}
.background.active:nth-of-type(3) {
  background: #99cc33;
  -webkit-transform: translateY( -200vh);
  transform: translateY( -200vh);
}
.background.active:nth-of-type(4) {
  background: #66cc99;
  -webkit-transform: translateY( -300vh);
  transform: translateY( -300vh);
}
.background.active:nth-of-type(5) {
  background: #cc99cc;
  -webkit-transform: translateY( -400vh);
  transform: translateY( -400vh);
}

JavaScript

$( "button" ).eq(0).on( "click", function() {
  alert("1");
  $(".background:eq(1)").addClass("active");
  return false;
});

$( "button" ).eq(1).on( "click", function() {
  alert("2");
  $(".background:eq(2)").addClass("active");
  return false;
});

$( "button" ).eq(2).on( "click", function() {
  alert("3");
  $(".background:eq(3)").addClass("active");
  return false;
});

$( "button" ).eq(3).on( "click", function() {
  alert("3");
  $(".background:eq(4)").addClass("active");
  return false;
});

$( "button" ).eq(4).on( "click", function() {
  alert("3");
  $(".background:eq(5)").addClass("active");
  return false;
});