JSFiddle - React, Tailwind, and code Playground

HTML

<div id="tabs">
  <ul>
    <li><a href="#tabs-1">Tab1</a> </li>
	<li><a href="#tabs-2">Tab2</a></li>
	<li><a href="#tabs-3">Tab3</a></li>
	<li><a href="#tabs-4">Tab4</a></li>
  </ul>
  <div id="tabs-1">
     <b>Name</b>
  <input type="text" id="name"><br/>
  <b>Age</b>
  <input type="text" id="age"><br/>
    <input type="submit" value="next" id="submit"/>
  </div>
  <div id="tabs-2">
       <b>city</b>
  <input type="text" id="name"><br/>
  <b>state</b>
  <input type="text" id="age"><br/>
    <input type="submit" value="next" id="submit"/>
 
  </div>
   <div id="tabs-3">
    <p>Tab3</p>
  </div>
   <div id="tabs-4">
    <p>Tab4</p>
  </div>
</div> 
<input type="checkbox" name="tabs-1" value="1">tabs-1 
<input type="checkbox" name="tabs-2" value="2">tabs-2 
<input type="checkbox" name="tabs-3" value="3">tabs-3 
<input type="checkbox" name="tabs-4" value="4">tabs-4 
<br>

CSS

.ui-state-disabled {
    display: none;
}

JavaScript

$(function() {
  $("#tabs").tabs();
  $("#tabs").tabs("option", {
    "selected": 2,
    "disabled": [1,2,3]
  });

$( "input[type=checkbox]" ).click(function(){
    if ($(this).is(':checked')) {
     $('#tabs').tabs("enable", $(this).val());
     $('#tabs').tabs("select", $(this).val() );
    }
    else{
        $('#tabs').tabs("disable", $(this).val());
        var tab = $(this);
        $(":checked").each(function(index) {
             $('#tabs').tabs("select", $(this).val() );
    });
    }
});
});