JSFiddle - React, Tailwind, and code Playground

by zerrax

HTML

<div class="install_form">
  <div class="index_nav"><label id="index_nav">1 / 3</label></div>
  <ul id="form_next">
    <li class="topmost">
      <label>Select Password</label>
      <input id="input0" type="password" />

      <div class="current_nav">
        <div onclick="Next()" class="icon" id="icon_wrapper">
          <svg
            x="0px"
            y="0px"
            width="24.3px"
            height="23.2px"
            viewBox="0 0 24.3 23.2"
            enable-background="new 0 0 24.3 23.2"
            xml:space="preserve"
          >
            <polygon
              class="arrow"
              fill="#ffffff"
              points="17.4,8.7 17.4,8.7 8.7,0 5.9,2.8 14.6,11.5 8.7,17.4 8.8,17.3 5.8,20.1 5.9,20.2 8.7,23 20.2,11.5 20.2,11.5"
            ></polygon>
          </svg>
        </div>
      </div>
    </li>
    <li>
      <label>Select Chanel Name</label>
      <input id="input1" type="text" />

      <div class="current_nav">
        <div onclick="Next()" class="icon" id="icon_wrapper">
          <svg
            x="0px"
            y="0px"
            width="24.3px"
            height="23.2px"
            viewBox="0 0 24.3 23.2"
            enable-background="new 0 0 24.3 23.2"
            xml:space="preserve"
          >
            <polygon
              class="arrow"
              fill="#ffffff"
              points="17.4,8.7 17.4,8.7 8.7,0 5.9,2.8 14.6,11.5 8.7,17.4 8.8,17.3 5.8,20.1 5.9,20.2 8.7,23 20.2,11.5 20.2,11.5"
            ></polygon>
          </svg>
        </div>
      </div>
    </li>
    <li>
      <label>Select webhook url</label>
      <input id="input2" type="text" />

      <div class="current_nav">
        <div onclick="Next()" class="icon" id="icon_wrapper">
          <svg
            x="0px"
            y="0px"
            width="24.3px"
            height="23.2px"
            viewBox="0 0 24.3 23.2"
            enable-background="new 0 0 24.3 23.2"
            xml:space="preserve"
          >
           ...

CSS

body {
  background: #BE93C5;  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #7BC6CC, #BE93C5);  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #7BC6CC, #BE93C5); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.install_form {
  position: fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
}
.install_form ul {
  position: fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  list-style:none;
  padding:0;
}
.install_form ul li {
  position: absolute;
  left: 20%;
  right: 20%;
  top: 0px;
  margin:0 auto;
  list-style:none;
  padding: 50px;
  padding-bottom: 10px;
  padding-top: 20px;
  background:rgba(255,255,255,0.3);
  display: flex;
	flex-direction: column;
  text-align:center;
  border: 4px solid #FFF;
  opacity:0;
}
.install_form ul li label{
  display: inline-block;
  text-align: center;
  margin-bottom: 20px;
  font-family: 'opensans-bold', Helvetica, Arial, sans-serif;
  color: rgba(0,0,0,0.7);
  font-size: 16px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 40px;
  margin-top: 60px;

}
.install_form ul li input{
  display: block;
  padding: 15px 20px;
  border: 1px solid #d0d7e1;
  font-family: "opensans-regular", Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #515860;
  letter-spacing: 1px;
  background: #ffffff;
  margin: 0 auto;
  outline: none;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  -ms-border-radius: 2px;
  -o-border-radius: 2px;
  border-radius: 2px;
  -webkit-transition: all .2s linear;
  -moz-transition: all .2s linear;
  -ms-transition: all .2s linear;
  -o-transition: all .2s linear;
  transition: all .2s linear;
}

.topmost{
  z-index:1;
  opacity: 1 !important;
   animation: shake 0.3s;

  /* When the animation is finished, start again */
  animation-iteration-count: 1;
}
.tool{
  width:100%;
  padding:15px;
}
.index_nav{
   width: 60px;
   height: 60px;
   position: relative;
  ...

JavaScript

function Next()
{
	var form_next_children = document.getElementById("form_next").children;
  var data = "";
	var step = ""
  for (var i = 0; i < form_next_children.length; i++)
  {
    if(form_next_children[i].className == "topmost")
    {
    	step = i;
      data = document.getElementById("input"+i).value;
    	form_next_children[i].className = "";
      i++;
      form_next_children[i].className = "topmost";
      break;
    }
  }
  var query = ""
  switch (step)
  {
    case 0:
      query += "&pw="+data;
      document.getElementById("index_nav").textContent = "2 / 3"
      break;
    case 1:
    	query += "&ch_name="+data;
      document.getElementById("index_nav").textContent = "3 / 3"
      break;
    case 2:
      query += "&wh_url="+data;
      break;
    default:
      console.log("Err out of index");
	}
  if(step == 2)
  {
		xhttp.open("POST", "install.php", true);
		xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
		xhttp.send("step="+step+query);
  }
}