JSFiddle - React, Tailwind, and code Playground

by LuckyCat

HTML

<div class="wrapper">
  <div class="step-block">
    <div class="step-item step-1 step-back step-visible">
      <!-- Step empty -->
    </div>
    <div class="step-item step-2 step-front step-visible">
      Step 1
        <div class="step-btn">
            Next
        </div>
    </div>
    <div class="step-item step-3 step-back step-visible">
      Step 2
        <div class="step-btn">
            Next
        </div>
    </div>
    <div class="step-item step-4">
      Step 3
        <div class="step-btn">
            Next
        </div>
    </div>
    <div class="step-item step-5">
      Step 4
        <div class="step-btn">
            Next
        </div>
    </div>
    <div class="step-item step-6">
       Step 5
        <div class="step-btn">
            Next
        </div>
    </div>
    <div class="step-item step-7">
      Step 6
        <div class="step-btn">
            Next
        </div>
    </div>
    <div class="step-item step-8">
      Step 7
        <div class="step-btn">
            Next
        </div>
    </div>
    <div class="step-item step-9">
      Step 8
        <div class="step-btn">
            Next
        </div>
    </div>
    <div class="step-item step-10">
      Step 9
        <div class="step-btn submit-btn">
            submit-btn
        </div>
    </div>
    <div class="step-item step-11">
      Empty
    </div>
  </div>
</div>

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: #282828;
}

.wrapper {
  position: relative;
}

.step-block {
  position: relative;
  width: 500px;
  margin: 0 auto;
}

.step-item {
  width: 300px;
  height: 500px;
  
  /*display: none;*/
  opacity: 0;
  
  /*transition: all 0.3s linear, opacity 0.01s linear;*/
  transition: transform 0.5s, opacity 0.01s;
  
  
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
  
  background-color: #fefaf1;
}

.step-visible {
  /*display: block;*/
  opacity: 1;
}

.step-back {
  /*background-color: green;*/
  /*position: absolute;
  top: 0;
  transform: scale(0.8);*/
}

.step-back {
  /*left: 0;*/
  z-index: 1;
  
  transform: scale(0.8) translateX(-54%);
  
  filter: blur(2px);
  pointer-events: none;
  
  border-bottom: 7px solid #41bdd4;
}

.step-front {
  /*background-color: blue;*/
  /*position: relative;
  margin: 0 auto;*/
  z-index: 3;
}
/*.step-front::after,
.step-front::before {
	top: 100%;
	left: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

.step-front::after {
	border-color: rgba(255, 255, 255, 0);
	border-top-color: #ffffff;
	border-width: 30px;
	margin-left: -30px;
}
.step-front::before {
	border-color: rgba(15, 181, 212, 0);
	border-top-color: #0fb5d4;
	border-width: 40px;
	margin-left: -40px;
}*/
/*.step-front::before {
  content: "";
    width: 0; 
    height: 0;     
    border-left: 22px solid transparent;
    border-right: 22px solid transparent;
    border-top: 22px solid #41bdd4;
    position:absolute;
    top: 100%;
    left: 0;
}
.step-front::after{
    content:'';
    width: 0; 
    height: 0;     
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-top: 15px solid #fff;
    position:absolute;
    left: 6px;
    top: 100%;
    margin-top: -2px;
}*/
.step-front::after {
  /*background: url('data:image/svg+xml;utf8,<svg...

JavaScript

$(document).ready(function() {
  function scroll() {
    /*$("html, body").animate({
      scrollTop: $(window).height()
    }, 500);*/
  }
  setTimeout(scroll, 2500);
  /* steps */
  var currentStep = 1;
  $('.step-btn').not('.submit-btn').on('click', function() {
    currentStep += 1;    
    /*setTimeout(function() {*/
      /*$('.step-item:visible').removeClass('visible').next().addClass('visible');*/
      
      $('.step-item').removeClass('step-visible step-back');
      /*$('.step-item:visible').addClass('step-visible');*/
      $('.step-front').removeClass('step-front').addClass('step-back step-visible').next().removeClass('step-back').addClass('step-front step-visible').next().addClass('step-back step-visible');
    /*}, 1000);*/
    setTimeout(function() {
      scroll();
    }, 2500);
  });
});