JSFiddle - React, Tailwind, and code Playground

HTML

<form action="">
    <div>
      <div><input tabindex="1" type="text" name="email"></div>
      <div><input tabindex="2" type="password" name="pass"></div>
      <div><input tabindex="3" type="password" name="conf"></div>
      <div>
        <label><input tabindex="4" type="checkbox" name="terms">
        I agree terms of use</label>
      </div>
      <div>
        <input tabindex="5" type="submit" value="Send">
        <button tabindex="6">Reset</button>
      </div>
    </div>
  </form>

CSS

body { width: 80%; margin: 0 auto; }
    form { color: #444; }
    input[type="text"],
    input[type="password"] {
      text-align: center;
      height: 1.5em;
      width: 80%;
      font-size: 1.2em;
      color: #666;
      border: 1px solid #ccc;
    }
    input[type="submit"] {
      font-size: 1.5em;
      display: block;
      margin: 0 auto 1em;
      background: #222;
      color: white;
      border: 0;
      border-radius: 3px;
      padding: 0.5em;
      min-width: 30%;
    }
    input[type="submit"][disabled] {
      background: #d5d5d5;
      color: #fff;
    }

JavaScript

$('form > div').addClass('form-wrap');

  $('div.form-wrap').children()
    .addClass('input-wrap').css("text-align", "center");

  $('div.input-wrap').css(
    {
      "padding": "1em 2em 1em",
      "background": "#e1e1e1",
    }
  );

  $('input[type="checkbox"]').parent().css(
    {
      "text-align": "left",
      "padding": "1em 4em 1em",
    }
  );

  $('form').attr(
    {
      "name": "register",
      "action": function(index, value)
        {
          return location.pathname.split('/').pop() + value;
        },
      "id": "register"
    }
  );

  $('input', 'div.input-wrap').focus( function(e)
    {
      console.log( $(e.target.parentNode).css("background", "black") );
      //$(this)
    }
  );
  $('input', 'div.input-wrap').blur( function(e)
    {
      console.log( $(e.target.parentNode).css("background", "#e1e1e1") );
      //$(this)
    }
  );