JSFiddle - React, Tailwind, and code Playground

HTML

<div class="parent p1">
  <h3>Page1</h3>
  <p>
  some Text here.
  </p>
  <div class="radio">
     <input id="r1" type="radio">
     <label class="label lr1" for="r1">Next to Page2</label>
  </div>
</div>
<div class="parent p2">
  <h3>Page2</h3>
  <div class="radio">
     <input id="r2" type="radio">
     <label class="label lr2" for="r2">Next to Page3</label>
  </div>
</div>
<div class="parent p3">
  <h3>Page3</h3>
  <p>
  some Text here.
  </p>
  <div class="radio">
     <input id="r3" type="radio">
     <label class="label lr3" for="r3">Next to Page4</label>
  </div>
</div>
<div class="parent p4">
  <h3>Page4</h3>
  <p>
  some Text here.
  </p>
  <div class="radio">
     <input id="r4" type="radio">
     <label class="label lr4" for="r4">Done</label>
  </div>
</div>

CSS

.parent {
  width:200px;
  height:100px;
  background: #ccc;
  text-align:center;
}
.p2, .p3, .p4{
  display:none;
}
.radio {
  margin-top: -10px;
}
label{
  height:20px;
  width:100px;
  background: lightgreen;
}
input {
  display:none;
}

JavaScript

$(".lr1").click(function(){
if ((".p2 p").length > 0){
	$(".p1").slideUp("fast");
  $(".p3").slideDown("fast");
}else{
	$(".p1").slideUp("fast");
  $(".p2").slideDown("fast");
}
});
$(".lr2").click(function(){
	$(".p2").slideUp("fast");
  $(".p3").slideDown("fast");
});
$(".lr3").click(function(){
	$(".p3").slideUp("fast");
  $(".p4").slideDown("fast");
});