ShieldUI Tabs Ex

HTML

<link rel="stylesheet" href="https://www.shieldui.com/shared/components/latest/css/light/all.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://www.shieldui.com/shared/components/latest/js/jquery-1.11.1.min.js"></script>
<script src="https://www.shieldui.com/shared/components/latest/js/shieldui-all.min.js"></script>
<script src="https://use.fontawesome.com/c7212e5223.js"></script>
<div class="container">
  <div class="row">
    <div class="col-md-6 col-md-offset-3">
      <div id="tabsContainer">
        <legend>Registration/Login form using ShieldUI Tabs.</legend>
        <div id="tabsDiv">
          <ul>
            <li><span class="glyphicon glyphicon-user"></span> Registration</li>
            <li><span class="glyphicon glyphicon-asterisk"></span> Login</li>
          </ul>
          <div class="col-md-9">
            <hr>
            <form>
              <div class="form-group">
                <div class="col-md-6">
                  <input type="text" class="form-control" id="firstname" placeholder="First name" />
                </div>
                <label for=""></label>
                <div class="col-md-6">
                  <input type="text" class="form-control" id="lastname" placeholder="Last name" />
                </div>
              </div>
              <label for=""></label>
              <div class="form-group">
                <div class="col-md-12">
                  <input type="email" class="form-control" id="email" placeholder="E-mail">
                </div>
              </div>
              <br>
              <div class="form-group">
                <div class="col-md-6">
                  <input type="password" class="form-control" id="pws" placeholder="Password" />
                </div>
                <label for=""></label>
                <div...

CSS

#tabsContainer {
  margin-top: 30px;
}

.sui-datepicker {
  width: 100%;
}

.large {
  width: 50%;
}

#submit {
  margin: auto;
  display: block;
  border-radius: 1px;
  width: 80px;
  margin-top: 20px;
}

p {
  text-align: center;
  margin-top: 6px;
}

hr {
  width: 50%;
}

#progress {
  margin-top: 10px;
}

.footer p {
  margin-top: 10px;
}

#pws {
  margin-top: 10px;
}

#confirmPws {
  margin-top: 10px;
}

@media screen and (max-width: 768px) {
  .large {
    width: 70%;
  }
}

JavaScript

$(function() {
  var tabsPosition = "left";

  var initTabs = function() {
    if ($("#tabsDiv").swidget()) {
      $("#tabsDiv").swidget().destroy();
    }
    
    var tabs = $("#tabsDiv").shieldTabs({
      position: tabsPosition
    });

    setUpEverything();
  };

  var setUpEverything = function() {
    $("#switch3").shieldSwitch({
      onText: "Female",
      offText: "Male",
      cls: "large",
    });

    $("#datepicker").shieldDatePicker();

    $('#login').shieldButton();

    $("#country").shieldAutoComplete({
      dataSource: {
        data: ["Argentina", "Bulgaria", "Canada"]
      }
    });

    $('#submit').shieldButton({});

    var progress = $('#progress').shieldProgressBar({
      value: 0,
      text: {
        enabled: true,
        template: "{0} %"
      }
    }).swidget();

    $('#firstname').change(function() {
      if ($('#firstname').val().length > 1) {
        progress.value(progress.value() + 15);
      } else {
        progress.value(progress.value() - 15);
      }
    });

    $('#lastname').change(function() {
      if ($('#lastname').val().length > 1) {
        progress.value(progress.value() + 15);
      } else {
        progress.value(progress.value() - 15);
      }
    });

    $('#email').change(function() {
      if ($('#email').val().length > 1) {
        progress.value(progress.value() + 15);
      } else {
        progress.value(progress.value() - 15);
      }
    });

    $('#pws').change(function() {
      if ($('#pws').val().length > 1) {
        progress.value(progress.value() + 15);
      } else {
        progress.value(progress.value() - 15);
      }
    });

    $('#confirmPws').change(function() {
      if ($('#confirmPws').val().length > 1) {
        progress.value(progress.value() + 15);
      } else {
        progress.value(progress.value() - 15);
      }
    });

    $('#country').change(function() {
      if ($('#country').val().length > 1) {
        progress.value(progress.value() + 25);
      } else...