JSFiddle - React, Tailwind, and code Playground

by andyjh07

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<!-- https://codepen.io/designify-me/pen/qrJWpG -->

<div class="row">
  <div class="col-lg-8">
    <div class="form">
      <h1 class="text-center">Interested? Tell us a bit more about you.</h1>
      <ul class="form-stages d-flex justify-content-between" data-form-stage="1">
        <li class="stage stage--active" data-stage="1">
          <span class="stage__number">1</span>
          <span class="stage__title">Start</span>
        </li>
        <li class="stage" data-stage="2">
          <span class="stage__number">2</span>
          <span class="stage__title">Requirements</span>
        </li>
        <li class="stage" data-stage="3">
          <span class="stage__number">3</span>
          <span class="stage__title">Confirmation</span>
        </li>
      </ul>
      <form id="msform" action="" class="form-fieldset-stage">
        <fieldset class="form-fieldset active">
          <h2 class="fs-title">Personal Details</h2>
          <input type="text" name="fname" placeholder="First Name"/>
          <input type="text" name="lname" placeholder="Last Name"/>
          <input type="text" name="phone" placeholder="Phone"/>
          <div class="btn-controls">
            <div class="btn form-btn next">Continue to step 2</div>            
          </div>
        </fieldset>
        <fieldset class="form-fieldset next-fieldset">
          <h2 class="fs-title">Social Profiles</h2>
          <h3 class="fs-subtitle">Your presence on the social network</h3>
          <input type="text" name="twitter" placeholder="Twitter"/>
          <input type="text" name="facebook" placeholder="Facebook"/>
          <input type="text" name="gplus" placeholder="Google Plus"/>
          <div...

SCSS

%animate {
  transition: all .2s ease-in;
}

$green: #43C29F;
$lightGrey: #E4E4E4;
$darkGrey: #3F3F3F;

body {
  padding: 100px;
  background-color: #FCFCFC;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: "Museo Sans",sans-serif;
  /* font-family: museo-sans,sans-serif; */
}

.form {
  width: 100%;
  background-color: white;
  border-radius: 10px;
  padding: 30px;
  box-shadow: 0px 5px 15px 0px rgba(0,0,0,0.16);
  position: relative;
  
  h1 {
    color: $green;
    font-size: 25px;
    font-weight: 900;
    /* line-height: 31px; */
  }

  .form-fieldset-stage {
    width: 100%;
    transition: .3s;
  }
  
  .form-fieldset {
    width: calc(100% - 60px);
    opacity: 0;
    position: absolute;
    transform: scale(.75);
    transition: opacity .3s, transform .3s, left .3s;
    
    &.active {
      display: block;
      opacity: 1;
      left: 30px;
      transform: scale(1)
    }
    
    &.prev-fieldset {
      left: -100%;
    }
    
    &.next-fieldset {
      left: 100%;
    }
  }
  
  .form-stages {
    width: 100%;
    margin: 30px 0;
    position: relative;
    
    &:before {
    	@extend %animate;
      width: 0%;
      height: 5px;
      content: '';
      position: absolute;
      top: 50%;
      left: 0;
			z-index: 2;
      transform: translateY(-50%);
      background-color: $green;
    }
		
		&:after {
      width: 100%;
      height: 5px;
      content: '';
      position: absolute;
      top: 50%;
      left: 0;
      transform: translateY(-50%);
      background-color: $lightGrey;
    }
    
    &[data-form-stage="2"] {
      &:before {
        width: 50%;
      }
    }
    
    &[data-form-stage="3"] {
      &:before {
        width: 100%;
      }
    }
    
    .stage {
      @extend %animate;
      position: relative;
      z-index: 2;
      width: 60px;
      height: 60px;
      border: solid 6px transparent;
      background-color: $lightGrey;
      border-radius: 50%;
      
      &__number {
 ...

JavaScript

$('.form-fieldset-stage').css('height', $('.form-fieldset').first().height());

 var currentFieldset = 1;

 $(".form-btn").click(function() {
   var containingFieldset = $(this).parent().parent();


   if ($(this).hasClass('next')) {

     var height = containingFieldset.next().height();
     $('.form-fieldset-stage').css('height', height);

     containingFieldset.removeClass('active');
     containingFieldset.next().addClass('active')

     containingFieldset.next().removeClass('next-fieldset');
     containingFieldset.addClass('prev-fieldset');

     currentFieldset++;

   }

   if ($(this).hasClass('previous')) {
     var height = containingFieldset.prev().height();
     $('.form-fieldset-stage').css('height', height);

     containingFieldset.removeClass('active');
     containingFieldset.prev().addClass('active');

     containingFieldset.prev().removeClass('prev-fieldset');
     containingFieldset.addClass('next-fieldset');

     currentFieldset--;

   }

   $('.form-stages').attr('data-form-stage', currentFieldset);

   $('.form-stages .stage').each(function() {
     $(this).removeClass('stage--active');
     $(this).removeClass('stage--completed');

     if ($(this).data('stage') == currentFieldset) {
       $(this).addClass('stage--active');
     }
     if ($(this).data('stage') <= currentFieldset) {
       $(this).addClass('stage--completed');
     }
   });



 });