JSFiddle - React, Tailwind, and code Playground

by Gourav Singh

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form>
<div>
<div style="font-weight:bold">1.How long have you been working in field of Programming?</div>
<label for="textfield">Text Field:</label>
<input name="textfield1" type="text" required="required" id="textfield1">
</div>

<div class="page">
  <div style="font-weight:bold">2.Second Question?</div>
  <label for="textfield">Text Field:</label>
  <input name="textfield2" type="text" required="required" id="textfield2">
</div>

<div class="page">
  <div style="font-weight:bold">3.Another Question?</div>
  <label for="textfield">Text Field:</label>
  <input name="textfield3" type="text" required="required" id="textfield3">
</div>

<button id="prev" type="submit">Prev</button>
<button id="next" type="submit">Next</button>
</form>

CSS

.outer {
  display: table;
  position: absolute;
  height: 100%;
  width: 100%;
}
.middle {
  display: table-cell;
  vertical-align: middle;
}
.inner {
  margin-left: auto;
  margin-right: auto;
  height: 700px;
  width: 500px;
  background: #FFFFFF;
}

JavaScript

$("#prev").on("click", function() {
    if ($(".page.active").index() > 0)
      $(".page.active").removeClass("active").prev().addClass("active");
  });
  $("#next").on("click", function() {
    if ($(".page.active").index() < $(".page").length - 1)
      $(".page.active").removeClass("active").next().addClass("active");
  });