JSFiddle - React, Tailwind, and code Playground

by Manu Vashishtha

HTML

<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.4.1/jquery.easing.min.js"></script>
<div id = "frame">
<div id="brand">TEST Calculator</div>
  <div id = "calculator">        
      
   <form id="msform">
 <div id = "view">Please Answer the following questions:--</div>
<!-- fieldsets -->
<fieldset>

<input type="button" name="next" class="next action-button" value="Step 1" />

<input type="button" name="next" class="next action-button" value="Step 2" />
</fieldset>

<fieldset>

<div style="text-align:left;color:white">
1. Question test...................  
</div>
<input type="text" name="twitter" placeholder="Twitter" />
<div style="text-align:left;color:white">
2. Question test...................  
</div>
<input type="text" name="facebook" placeholder="Facebook" />
<div style="text-align:left;color:white">
3. Question test...................  
</div>
<input type="text" name="gplus" placeholder="Google Plus" />

<input type="button" name="next" class="next action-button" value="Next" />
</fieldset>


</form>
  
</div>
<div id = "on"></div>
</div>
<div id = "message"></div>
<div id = "message2"></div>

CSS

* { font-family: Arial, sans-serif; }
#frame {margin:20px 10px 20px 10px ; position: relative; display: block; width: 500px; min-height: 244px;
         padding: 16px; background: gray; border-radius: 8px; background: linear-gradient(#555, #000); }
         #brand { position: absolute; top: 10px; left: 24px; color: gray; font-size: 27px; font-style: italic; }
#calculator { position: relative; display: block; width: 500px;margin-top: 29px; }
#history { width: 100%; height: 16px; background: #333; color: #999; text-align: right;}
#view { width: 100%; height: 28px; background: #333; color: #CCC; text-align: left; font-size: 20px;    padding-left: 5px; }
#buttons { display: grid; grid-template-columns: auto auto auto auto }
#buttons * { cursor: pointer; background: white; text-align: center; height: 32px; line-height: 32px; }
#buttons * { border: 1px solid #aaa; border-right: unset; border-bottom: unset; }
#buttons *:hover { background: lime; color: #333; font-weight: bold; }
#buttons * {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}
#buttons * { background: linear-gradient(#fff, #bbb); }
#reset { background: yellow; }
#equals { background: blue; color: white; }
#on { position: absolute; top: 8px; right: 8px; width: 8px; height: 8px;
      background: linear-gradient(lime, green); border-radius: 16px; border: 1px solid #000; }      
      
      /*custom font*/

@import url(http://fonts.googleapis.com/css?family=Montserrat);
/*basic reset*/
* {
margin: 0;
padding: 0;
}
html {
height: 100%;
}
body {
font-family: montserrat, arial, verdana;
}
/*form styles*/
#msform {
width: 95%;
text-align: center;
position: relative;
}
#msform fieldset...

JavaScript

$(function() {

//jQuery time
var current_fs, next_fs, previous_fs; //fieldsets
var left, opacity, scale; //fieldset properties which we will animate
var animating; //flag to prevent quick multi-click glitches

$(".next").click(function(){
	if(animating) return false;
	animating = true;
	
	current_fs = $(this).parent();
	next_fs = $(this).parent().next();
	
	//activate next step on progressbar using the index of next_fs
	$("#progressbar li").eq($("fieldset").index(next_fs)).addClass("active");
	
	//show the next fieldset
	next_fs.show(); 
	//hide the current fieldset with style
	current_fs.animate({opacity: 0}, {
		step: function(now, mx) {
			//as the opacity of current_fs reduces to 0 - stored in "now"
			//1. scale current_fs down to 80%
			scale = 1 - (1 - now) * 0.2;
			//2. bring next_fs from the right(50%)
			left = (now * 50)+"%";
			//3. increase opacity of next_fs to 1 as it moves in
			opacity = 1 - now;
			current_fs.css({'transform': 'scale('+scale+')'});
			next_fs.css({'left': left, 'opacity': opacity});
		}, 
		duration: 800, 
		complete: function(){
			current_fs.hide();
			animating = false;
		}, 
		//this comes from the custom easing plugin
		easing: 'easeInOutBack'
	});
});

$(".previous").click(function(){
	if(animating) return false;
	animating = true;
	
	current_fs = $(this).parent();
	previous_fs = $(this).parent().prev();
	
	//de-activate current step on progressbar
	$("#progressbar li").eq($("fieldset").index(current_fs)).removeClass("active");
	
	//show the previous fieldset
	previous_fs.show(); 
	//hide the current fieldset with style
	current_fs.animate({opacity: 0}, {
		step: function(now, mx) {
			//as the opacity of current_fs reduces to 0 - stored in "now"
			//1. scale previous_fs from 80% to 100%
			scale = 0.8 + (1 - now) * 0.2;
			//2. take current_fs to the right(50%) - from 0%
			left = ((1-now) * 50)+"%";
			//3. increase opacity of previous_fs to 1 as it moves in
			opacity = 1 - now;
			current_fs.css({'left':...