JSFiddle - React, Tailwind, and code Playground

HTML

<div class="heroform">
<div class="inner">
    <form class="tab-1">
        <fieldset id="tab-1">
          <legend>TAB 1</legend>
          <input name="newhg_name" placeholder="FIELD 1"><span class="next_form"></span>
        </fieldset>
        <fieldset id="tab-2">
          <legend>TAB 2</legend>
          <input name="name" placeholder="FIELD 2"><span class="next_form"></span>
        </fieldset>
        <fieldset id="tab-3">
          <legend>TAB 3</legend>
          <input name="phone" placeholder="FIELD 3"><span class="next_form"></span>
        </fieldset>
        <fieldset id="tab-4">
          <legend>Date it</legend>
          <input name="address" placeholder="FIELD 4"><span class="next_form"></span>
        </fieldset>
      </form>
      </div>
  </div>

CSS

.heroform .inner {
	width: 608px;
	height: 120px;
	overflow: hidden;
	margin-left: -200px;
}
.heroform {
	position: absolute;
	top: 110px;
	left: 256px;
	z-index: 10;
	-webkit-border-radius: 12px;
	border-radius: 12px;
	width: 408px;
	height: 120px;
    background-color: #EEE;
}
.heroform form {
	margin-left: 200px;
	transition: margin-top 0.5s ease-in-out;
}
body * {
    box-sizing: border-box;
}
.heroform fieldset {
	border: none;
	z-index: 11;
	height: 120px;
	padding: 10px 0 0 13px;
}
.heroform legend {
	position: absolute;
	right: 408px;
	background-color: #bac4cd;
	line-height: 23px;
	padding: 0 10px 0 7px;
	margin: 0;
	text-align: right;
	white-space: nowrap;
	-webkit-border-radius: 4px 0 0 4px;
	border-radius: 4px 0 0 4px;
	cursor: pointer;
	box-shadow: inset 1px 1px 0px rgba( 255,255,255,0.7),      inset 1px -1px rgba(0, 0, 0, 0.2),      0px 0px 1px 0px rgba(0, 0, 0, 0.5);
	;
	background-image: -webkit-gradient(linear, 100.00% 50.00%, 0.00% 50.00%, color-stop( 0px , rgba(0,0,0,0.30)),color-stop( 12px , rgba(0,0,0,0.00)));
	background-image: -webkit-linear-gradient(180deg,rgba(0,0,0,0.30) 0px,rgba(0,0,0,0.00) 12px);
	background-image: linear-gradient(270deg,rgba(0,0,0,0.30) 0px,rgba(0,0,0,0.00) 12px);
}
.heroform fieldset:nth-child(1) legend {
	top: 12px;
}
.heroform fieldset:nth-child(2) legend {
	top: 38px;
}
.heroform fieldset:nth-child(3) legend {
	top: 64px;
}
.heroform fieldset:nth-child(4) legend {
	top: 90px;
}
.heroform legend:hover {
	background-color: #CEDEE6;
}
.heroform .tab-1 fieldset:nth-child(1) legend,
.heroform .tab-2 fieldset:nth-child(2) legend,
.heroform .tab-3 fieldset:nth-child(3) legend,
.heroform .tab-4 fieldset:nth-child(4) legend,
.heroform .tab-5 fieldset:nth-child(5) legend {
	background-color: #f15a24!important;
	cursor: default;
	color: #fff;
}

.heroform form.tab-1 {
	margin-top: 0px;
}
.heroform form.tab-2 {
	margin-top: -120px;
}
.heroform form.tab-3 {
	margin-top: -240px;
}

.heroform form.tab-4 {
	margin-top:...

JavaScript

$('.heroform legend').click( function(){
		clickedtab = $(this);
		$(this).closest('form').attr('class', 'tab-' + (clickedtab.parent().index() + 1) );
	})
	$('.next_form').click( function(){
		clickedform = $(this);
		$(this).closest('form').attr('class', 'tab-' + (clickedform.parent().index() + 2) );
	})
$('.heroform input').focus( function(e){
		e.preventDefault();
		focusedfield = $(this);		$(this).closest('form').attr('class', 'tab-' + (focusedfield.parent().index() + 1) );
	})