JSFiddle - React, Tailwind, and code Playground

by Imri Paloja

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css">

<div class="container">
  <form id="regForm" action="/action_page.php">
    <h1>EuroCMS Installation</h1>

    <p>
      Welcome to the EuroCMS installer panel, please fill out the form
      completely
    </p>

    <!-- One "tab" for each step in the form: -->
    <div class="tab">
      <h2>User info</h2>
      <p>Create the owner user</p>
      <p>
        <input class="herro?" type="text" placeholder="First name..." oninput="this.className = ''" name="fname">
      </p>
      <p>
        <input type="text" placeholder="Last name..." oninput="this.className = ''" name="lname">
      </p>
      <p>
        <input type="text" placeholder="Username..." oninput="this.className = ''" name="uname">
      </p>
      <p>
        <input type="password" placeholder="password..." oninput="this.className = ''" name="pword">
      </p>
    </div>
    <div class="tab">
      Database:
      <p>
        <input type="text" placeholder="server..." oninput="this.className = ''" name="server">
      </p>
      <p>
        <input type="text" placeholder="username..." oninput="this.className = ''" name="username">
      </p>
      <p>
        <input type="password" placeholder="db_password..." oninput="this.className = ''" name="password">
      </p>
      <p>
        <input type="text" placeholder="db_name..." oninput="this.className = ''" name="database">
      </p>
      <p>
        <input type="number" placeholder="port..." oninput="this.className = ''" name="port">
      </p>
      <p>
        <input type="text" placeholder="charset..." oninput="this.className = ''" name="charset">
      </p>
    </div>
    <div...

CSS

* {
  box-sizing: border-box;
}

html,body {
  color: #454545 !important;
}

body {
  background-color: #f1f1f1;
}

#regForm {
  border: 1px solid #CCCCCC;
  border-radius: 5px;
  box-shadow: 1px 1px 1px #454545;
  background-color: #ffffff;
  margin: 100px auto;
  font-family: Raleway;
  padding: 20px 30px;
  width: 100%;
  min-width: 250px;
}

h1 {
  text-align: center;
}

input {
  padding: 10px;
  width: 100%;
  font-size: 17px;
  font-family: Raleway;
  border: 1px solid #CCCCCC;
  border-radius: 5px;
}

/* Mark input boxes that gets an error on validation: */
input.invalid {
  background-color: #ffdddd;
}

/* Hide all steps by default: */
.tab {
  display: none;
}

button {
  background-color: #04aa6d;
  /* color: #ffffff; */
  border: none;
  padding: 10px 20px;
  font-size: 17px;
  font-family: Raleway;
  cursor: pointer;
}

button:hover {
  opacity: 0.8;
}

#prevBtn {
  background-color: #bbbbbb;
}

/* Make circles that indicate the steps of the form: */
.step {
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbbbbb;
  border: none;
  border-radius: 50%;
  display: inline-block;
  opacity: 0.5;
}

.step.active {
  opacity: 1;
}

/* Mark the steps that are finished and valid: */
.step.finish {
  background-color: #04aa6d;
}

JavaScript

var currentTab = 0; // Current tab is set to be the first tab (0)
showTab(currentTab); // Display the current tab

function showTab(n) {
  // This function will display the specified tab of the form...
  var x = document.getElementsByClassName('tab');
  x[n].style.display = 'block';
  //... and fix the Previous/Next buttons:
  if (n == 0) {
    document.getElementById('prevBtn').style.display = 'none';
  } else {
    document.getElementById('prevBtn').style.display = 'inline';
  }
  if (n == x.length - 1) {
    document.getElementById('nextBtn').innerHTML = 'Submit';
  } else {
    document.getElementById('nextBtn').innerHTML = 'Next';
  }
  //... and run a function that will display the correct step indicator:
  fixStepIndicator(n);
}

function nextPrev(n) {
  // This function will figure out which tab to display
  var x = document.getElementsByClassName('tab');
  // Exit the function if any field in the current tab is invalid:
  if (n == 1 && !validateForm()) return false;
  // Hide the current tab:
  x[currentTab].style.display = 'none';
  // Increase or decrease the current tab by 1:
  currentTab = currentTab + n;
  // if you have reached the end of the form...
  if (currentTab >= x.length) {
    // ... the form gets submitted:
    document.getElementById('regForm').submit();
    return false;
  }
  // Otherwise, display the correct tab:
  showTab(currentTab);
}

function validateForm() {
  // This function deals with validation of the form fields
  var x,
    y,
    i,
    valid = true;
  x = document.getElementsByClassName('tab');
  y = x[currentTab].getElementsByTagName('input');
  // A loop that checks every input field in the current tab:
  for (i = 0; i < y.length; i++) {
    // If a field is empty...
    if (y[i].value == '') {
      // add an "invalid" class to the field:
      y[i].className += ' invalid';
      // and set the current valid status to false
      valid = false;
    }
  }
  //...