JSFiddle - React, Tailwind, and code Playground

by Marcos vini

HTML

<div class="container">
<h1>Criar uma conta</h3>
<p>Digite abaixo os dados para o cadastro </p>
<form action="/Cliente/Create" enctype="multipart/form-data" id="formCadastroAssociado" method="post">   
  <div id="msform">
    <!-- progressbar -->
    <ul id="progressbar">
      <li class="active">Configurações da Conta</li>
      <li>Dados Pessoais</li>
      <li>Planos</li>
    </ul>
    <!-- fieldsets -->
    <fieldset>
      <h2>Dados de Acesso</h2>
	  <div class='box-input'>
	  <label>Nome quem te Indicou</label>
	  <input data-val="true" data-val-number="The field ExecutaAtualizacaoNomeIndicador must be a number." data-val-required="The ExecutaAtualizacaoNomeIndicador field is required." id="ExecutaAtualizacaoNomeIndicador" name="ExecutaAtualizacaoNomeIndicador" type="hidden" value="1">
	  <input placeholder="Nome do Indicador" id="_NomeIndicador" maxlength="25" name="_NomeIndicador" onchange="$('#NomeIndicador').val($('#_NomeIndicador').val());" size="27" type="text" value="">
       </div>
	  <div class='box-input'>
	    <label>Franquia</label>
    <select data-val="true" data-val-number="The field franquiaId must be a number." data-val-required="The franquiaId field is required." id="franquiaId" name="franquiaId"><option value="1">REDE GLAMOUR (CD GLAMOUR/MG )</option>
<option value="2">Espaço Glamour Belo Horizonte (Belo Horizonte/MG )</option>
<option value="1003">Espaço Glamour Pernambuco (Recife/PE )</option>
<option value="1004">Espaço Glamour Sete Lagoas (Sete Lagoas/MG )</option>
<option value="1006">Espaço Glamour Divinópolis (Divinópolis/MG )</option>
</select>
    </div>
		  <div class='box-input' style='width: 100% !important;'>
	  <label>Login:*</label>
	  <input id="nomeIndicacao" maxlength="25" name="nomeIndicacao" placeholder="Digite um Login" size="27" type="text" value="">
    </div>
	  <div class='box-input'>
	  <label>Seu e-mail:*</label>
	   <input  id="email" maxlength="100" name="email" type="text" value=""...

CSS

.container{
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
    max-width: 60%;	
}

.container:after, .container:before {
    display: table;
    content: " ";
}
.container h1{
	    font: 700 1.5em/1 arial,sans-serif;
    letter-spacing: -.05em;
    color: #ffffff;
    background: #19b9e7;
    text-transform: uppercase;
    font-size: 16px;
    font-weight: bold;
    padding: 20px 0px 20px 20px;
    border: 1px solid rgba(194, 194, 194, 0.37);
    border-bottom: 3px solid #0f99c1;
}
.container p{
	    color: #2C3E50;
    font-size: 14px;
    margin-bottom: 15px;
    padding: 10px;
    position: relative;
    text-align: center;
    z-index: 1;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.container form{
	padding: 0px 25px 15px;
	box-shadow: 0px 2px 1px #ddd;
	margin: 0 auto;
	background-color: #fff;
	border-top: 0px !important;
	border-radius: 5px;
	border: 1px solid rgba(0, 0, 0, 0.1);
	text-align: center;
}
.container form fieldset {
  border: 0 none;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
.container form fieldset h2 {
    margin-left: 15px;
    font: 700 1.5em/1 arial,sans-serif;
    letter-spacing: -.05em;
    color: #0f99c1;
    margin: 0;
    text-transform: uppercase;
    font-size: 13px;
    font-weight: bold;
    padding: 20px 0px 20px 20px;
}
 .container form fieldset:not(:first-of-type) {
  display: none;
}
.container form .box-input{
	
width: 49%;
	
float: left;
	
min-height: 1px;
	
text-align: left;
	
margin-left: 3px;
	
margin-bottom: 15px;
}
.container form .box-input input[type='text']:focus,.container form .box-input input[type='password']:focus{
	    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    border-color: #19b9e7 #17b0dc !important;
    outline: none;
    -webkit-transition: linear 0.5s;
    transition: linear 0.5s;
    -moz-transition: linear 0.5s;
    -ms-transition: linear 0.5s;
    -o-transition: linear 0.5s;
}
.container form...

JavaScript

var etapa_atual, etapa_proxima, etapa_anterior; 
var left, opacity, scale;
var animacao;



document.querySelector('.next').addEventListener('click',function(){	

if (animacao) return false;
animacao = true;
etapa_atual = this.parentNode;
etapa_proxima = this.parentNode.nextSibling;
  
var nextt = document.querySelectorAll("#progressbar li.active");
 for (i = 0; i < nextt.length; i++){

console.log(nextt[i].nextSibling.innerHTML);
nextt[i].nextSibling.classList.add("active");
 
var eventList = ["webkitAnimationEnd", "oanimationend", "msAnimationEnd", "animationend"];
for (var eventop of eventList) {
etapa_atual.style.display = "none", animating = !1;
}
var eventList2 = ["webkitAnimationStart", "oanimationstart", "msAnimationStart", "animationstart"];
for (var eventop of eventList2) {
left = "100%", opacity = 1;
etapa_atual.style.opacity = 0, etapa_proxima.style.left = left, etapa_proxima.style.opacity = opacity, etapa_proxima.style.display = "block";
}

 }

});