JSFiddle - React, Tailwind, and code Playground

HTML

<form  class="step-form" autocomplete="off" data-step="loginForm">
                    <div class="step-content">
                        <label for="#" class="email_field step-innactive">
                            <span>Введите ваш email</span>
                            <input type="email" placeholder="email" autocomplete="off">
                   
                        </label>

                        <label for="#" class="password_field step-innactive">
                            <span>Введите пароль</span>
                            <input type="password" placeholder="Пароль" autocomplete="off">
                            <!--  <div class="step">Confirm</div> -->
                        </label>
                    </div>
                    <div class="step-form-button">
                        <button type="button" class="btn btn-primary" id="prevBtn"  onclick="step.nextStep(-1)">Назад</button>
                        <div class="step-indicators">
                            <span class="step"></span>
                            <span class="step"></span>                                           
                        </div>
                        <button type="button" class="btn btn-primary" id="nextBtn" onclick="nextStep(1)">Дальше</button>
                    </div>
                </form>

JavaScript

var currentTab = 0;
showTab(currentTab);

function showTab(n) {
    var x = document.getElementsByClassName("step-innactive");
    x[n].style.display = "block";
    if (n === 0) {
        document.getElementById("prevBtn").setAttribute("disabled", "disabled");
    } else {
        document.getElementById("prevBtn").style.display = "inline";
    }
    if (n === (x.length - 1)) {
        document.getElementById("nextBtn").innerHTML = "Войти";
    } else {
        document.getElementById("nextBtn").innerHTML = "Дальше";
    }
    fixStepIndicator(n);
}
function nextStep(n) {

    var x = document.getElementsByClassName("step-innactive");
     var p = document.getElementsByClassName("step-form");
     console.log(p);
    x[currentTab].style.display = "none";
    currentTab = currentTab + n;
    console.log(p.dataset.step);
    if (currentTab >= x.length) {
       // document.getElementsByClassName(".step-content").innerHTML = 'Добро пожаловать';
//       p.dataset.step.submit();
        //document.getElementById("loginForm").submit();
        return false;
    }

    showTab(currentTab);
}
function fixStepIndicator(n) {   
    var i, x = document.getElementsByClassName("step");
    for (i = 0; i < x.length; i++) {
        x[i].className = x[i].className.replace(" active", "");
    }  
    x[n].className += " active";
}

window.nextStep = nextStep;