JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/jquery.validate.min.js"></script>
<form class="myform">
  <div class="slide one active">
    <input name="first" />
    <div class="button">Next</div>
  </div>
  <div class="slide two">
    <input name="second" />
    <div class="button">Next</div>
  </div>
  <div class="slide three">
    <input name="third" />
    <div class="button">Next</div>
  </div>
</form>

CSS

html { font-family: arial; }

.slide { 
  background: rgba(0,0,0,0.2);
  margin: 0 0 10px 0;
  padding: 20px;
  display:inline-block;
  opacity: 0.2;
}

.slide.active {
  opacity: 1;
}

.error { display: block; }

.button { background: green; padding: 5px; color: #fff; text-align: center; }

JavaScript

$(".slide.one .button").click(function(){
      var form = $(".myform");
      form.validate({
        rules: {
          first: {
            required: true,
            minlength: 6
          }
        },
        messages: {
          first: {
            required: "This is required.",
            minlength: "Too short."
          }
        }
      });
      if (form.valid() === true){
        $(".slide.one").removeClass("active");
        $(".slide.two").addClass("active");
      }
    });
    
    
    $(".slide.two .button").click(function(){
      var form = $(".myform");
      form.validate({
        rules: {
          second: {
            required: true,
            minlength: 6
          }
        },
        messages: {
          second: {
            required: "This is required.",
            minlength: "Too short."
          }
        }
      });
      if (form.valid() === true){
        $(".slide.two").removeClass("active");
        $(".slide.three").addClass("active");
      }
    });