JSFiddle - React, Tailwind, and code Playground

by borisjavier

HTML

<!DOCTYPE html>
<html>
  
<head>
    
  
    <!--<script src=
'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'>
    </script>-->
    
    <script src=
'https://golden-notes.io/vendor/jquery/jquery.min.js'>
    </script>
  
</head>
  
<body>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-11 col-sm-9 col-md-7 
                col-lg-6 col-xl-5 text-center p-0 mt-3 mb-2">
                <div class="px-0 pt-4 pb-0 mt-3 mb-3">
                    <form id="form">
                        <ul id="progressbar">
                            <li class="active" id="step1">
                                <strong>Carregamento</strong>
                            </li>
                            <li id="step2"><strong>Aquecimento</strong></li>
                            <li id="step3"><strong>Pirolise</strong></li>
                            <li id="step4"><strong>Resfriamento</strong></li>
                            <li id="step5"><strong>Descarregamento</strong></li>
                        </ul>
                        <div class="progress">
                            <div class="progress-bar"></div>
                        </div> <br>
                        <fieldset>
                            <h2>Bem vindo carregador</h2>
                            <div>
                            <div class="form-group">
    <label for="material">Material</label>
    <input type="text" class="form-control" id="material" placeholder="Ingrese el material">
  </div>
  <div class="form-group">
    <label for="peso">Peso:</label>
    <input type="text" class="form-control" id="peso" placeholder="Ingrese el peso">
  </div>
                            </div>
                            <input type="button" name="next-step" 
                                class="next-step" value="Ligar" />
                        </fieldset>
                        <fieldset>
                            <h2>A temperatura...

CSS

* {
    margin: 0;
    padding: 0
}
  
html {
    height: 100%
}
  
h2{
    color: #2F8D46;
}
#form {
    text-align: center;
    position: relative;
    margin-top: 20px
}
  
#form fieldset {
    background: white;
    border: 0 none;
    border-radius: 0.5rem;
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    padding-bottom: 20px;
    position: relative
}
  
.finish {
    text-align: center
}
  
#form fieldset:not(:first-of-type) {
    display: none
}
  
#form .previous-step, .next-step {
    width: 100px;
    font-weight: bold;
    color: white;
    border: 0 none;
    border-radius: 0px;
    cursor: pointer;
    padding: 10px 5px;
    margin: 10px 5px 10px 0px;
    float: right
}
  
.form, .previous-step {
    background: #616161;
}
  
.form, .next-step {
    background: #2F8D46;
}
  
#form .previous-step:hover,
#form .previous-step:focus {
    background-color: #000000
}
  
#form .next-step:hover,
#form .next-step:focus {
    background-color: #2F8D46
}
  
.text {
    color: #2F8D46;
    font-weight: normal
}
  
#progressbar {
    margin-bottom: 30px;
    overflow: hidden;
    color: lightgrey
}
  
#progressbar .active {
    color: #2F8D46
}
  
#progressbar li {
    list-style-type: none;
    font-size: 15px;
    width: 20%;
    float: left;
    position: relative;
    font-weight: 400
}
  
#progressbar #step1:before {
    content: "1"
}
  
#progressbar #step2:before {
    content: "2"
}
  
#progressbar #step3:before {
    content: "3"
}
  
#progressbar #step4:before {
    content: "4"
}

#progressbar #step5:before {
    content: "5"
}
  
#progressbar li:before {
    width: 50px;
    height: 50px;
    line-height: 45px;
    display: block;
    font-size: 20px;
    color: #ffffff;
    background: lightgray;
    border-radius: 50%;
    margin: 0 auto 10px auto;
    padding: 2px
}
  
#progressbar li:after {
    content: '';
    width: 100%;
    height: 2px;
    background: lightgray;
    position: absolute;
    left: 0;
    top: 25px;
    z-index:...

JavaScript

$(document).ready(function () {
    var currentGfgStep, nextGfgStep, previousGfgStep;
    var opacity;
    var current = 1;
    var steps = $("fieldset").length;
  
    setProgressBar(1);
  
    $(".next-step").click(function () {
        var confirmNext = confirm("Esta etapa do processo está concluída?");
        if (confirmNext) {
            currentGfgStep = $(this).parent();
            nextGfgStep = $(this).parent().next();
            var material = $("#material").val();
                    var peso = $("#peso").val();

                    if (material === "" || peso === "") {
                    alert("Impossível continuar. O peso e o tipo de material devem ser determinados. Conclua e continue.");
                    $("#material").focus();
                    return;
                    }

            $("#progressbar li").eq($("fieldset").index(nextGfgStep)).addClass("active");

            nextGfgStep.show();
            currentGfgStep.animate(
                { opacity: 0 },
                {
                    step: function (now) {
                        opacity = 1 - now;

                        currentGfgStep.css({
                            display: "none",
                            position: "relative",
                        });
                        nextGfgStep.css({ opacity: opacity });
                    },
                    duration: 500,
                }
            );
            setProgressBar(++current);
        }
    });
  
     $(".previous-step").click(function () {
        currentGfgStep = $(this).parent();
        previousGfgStep = $(this).parent().prev();

        var confirmAbort = confirm(
            "Tem certeza que deseja abortar? Isso desativará todo o processo no sistema e você não poderá continuar."
        );
        if (confirmAbort) {
            $(".next-step").prop("disabled", true);
            $(".progress-bar").addClass("disabled");
            $(this).prop("disabled", true);
           ...