JSFiddle - React, Tailwind, and code Playground

by mlms13

CSS

label, input {
    float: left;
    margin: 8px 0;
    padding: 4px;
}
label {
    clear: left;
    width: 130px;
}

JavaScript

function createInput(type, name, labelText, required) {
    var label = document.createElement('label'),
        input = document.createElement('input');
    label.setAttribute('for', name);
    label.setAttribute('style', 'display:none');
    label.appendChild(document.createTextNode(labelText));
    input.setAttribute('type', type);
    input.setAttribute('name', name);
    input.setAttribute('id', name);
    input.setAttribute('style', 'display:none');
    
    if (required) {
        input.setAttribute('required', true);
    }
    
    document.body.appendChild(label);
    document.body.appendChild(input);
    $(label).fadeIn(1000);
    $(input).fadeIn(1000);
}

var t, i = 0, inputs = [
    {'type': 'password', 'name': 'confirm', 'label': 'Confirm Password', 'required': 'true'},
    {'type': 'email', 'name': 'email', 'label': 'Email', 'required': 'true'},
    {'type': 'text', 'name': 'fname', 'label': 'First Name', 'required': 'false'},
    {'type': 'text', 'name': 'lname', 'label': 'Last Name', 'required': 'false'}
    ];

t = setInterval(function(){
    if (i >= inputs.length -1) {
        clearInterval(t);
    }
    createInput(
        inputs[i].type,
        inputs[i].name,
        inputs[i].label,
        inputs[i].required
        );
    i++;
}, 500);