JSFiddle - React, Tailwind, and code Playground

HTML

<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </head>
  
  <body>
    <div class="container auth">
        <form>
          
           
       <div class="form-group d-block">
       <p class="h4">some content</p>
       <p>
       blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
       blah blah blah
       </p>
      </div>
          
      <div class="form-group d-none">
      <p class="h4">other content</p>
      <p>
      
       foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo 

      </p>
      </div>
          
  <div class="btn-group btn-group-lg group1">
    <button type="button" class="btn prevBtn">Previous</button>
    <button type="button" class="btn nextBtn">Next</button>
  </div>
</form>
</div>
</div>
  </body>
</html>

CSS

@import url(//fonts.googleapis.com/earlyaccess/notosansbengaliui.css);

body {
  background: url("https://picsum.photos/200/300/?blur&image=719"); /*blurry fire*/
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
  background-attachment: fixed;
  font-family: 'Noto Sans Bengali UI', sans-serif !important;
}
.auth ,.auth legend, .auth .group1 button {
  color: white;
}
h2 {
  text-align:center;
  padding: 20px
}
.group1 button {
  background-color:transparent;
  color:white;
  border: 1px solid white;
  border-radius: 5px;
} 
.button:not(:last-child) {
  border-right: none;
}
.group1 button:hover {
  padding-right: 30px;
  padding-left: 30px;
  text-align: center;
  border: 1px solid white;
  transition: .1s linear;
  -webkite-transition: .1s linear;
  -moz-transition: .1s linear;
  -o-transition: .1s linear;
}

input[type="text"],
input[type="password"] {
  border:none;
  border-bottom: 1px dotted white;
  background-color:transparent;
  color: white;
  width: 100%;
  margin: 10px;
}

input[type="file"] {
  margin: 10px;
}

textarea {
  width: 100%;
  border-radius: 5px;
  background-color: transparent;
  color: white;
}

JavaScript

$(".nextBtn").click(function(e) {
  var curr = $(".d-block");
  var next = curr.next(".form-group")
  if(next.length) {
  curr.removeClass("d-block");
  curr.addClass("d-none");
  next.removeClass("d-none");
  next.addClass("d-block");
  }
});

$(".prevBtn").click(function(e) {
  console.log("ye")
  var curr = $(".d-block");
  var prev = curr.prev(".form-group")
  if(prev.length) {
  curr.removeClass("d-block");
  curr.addClass("d-none");
  prev.removeClass("d-none");
  prev.addClass("d-block");
  }
});