<div class="login-block">
    <h3>Sharepoint Login</h3>
    <form action="#" method="post" target="_blank">
      <p><label for="sharepoint-company-name">Company</label><input type="text" name="sharepoint-company-name" id="sharepoint-company-name" /></p>
      <p><label for="sharepoint-user-name">User Name</label><input type="text" name="sharepoint-user-name" id="sharepoint-user-name" /></p>
      <p><label for="sharepoint-password">Password</label><input type="password" name="sharepoint-password" id="sharepoint-password" /></p>
      <p class="submit-wrap"><input type="submit" id="sharepoint-submit" class="button" value="Login" /></p>
    </form>
  </div>
  <div class="login-block">
    <h3>FTP Login</h3>
    <form action="#" method="post" target="_blank">
      <p><label for="ftp-user-name">User Name</label><input type="text" name="ftp-user-name" id="ftp-user-name" /></p>
      <p><label for="ftp-password">Password</label><input type="password" name="ftp-password" id="ftp-password" /></p>
      <p class="submit-wrap"><input type="submit" id="ftp-submit" class="button" value="Login" /></p>
    </form>
  </div>
  <div class="login-block last">
    <h3>Secret Area Login</h3>
    <form action="#" method="post" target="_blank">
      <p><label for="secret-user-name">User Name</label><input type="text" name="secret-user-name" id="secret-user-name" /></p>
      <p><label for="secret-password">Password</label><input type="password" name="secret-password" id="secret-password" /></p>
      <p class="submit-wrap"><input type="submit" id="ftp-submit" class="button" value="Login" /></p>
    </form>
  </div>
.login-block {
  float: left;
  margin: 0 49px 25px 0;
  width: 260px;
}

.login-block form {
  border: 3px solid #ccc;
  padding: 20px;
}
.login-block .active-form {
  border-color: red;
}

.login-block input[type="text"],
.login-block input[type="password"] {
  border-color: #eeeeee #cccccc #cccccc #eeeeee;
  border-right: 1px solid #cccccc;
  border-style: solid;
  border-width: 1px;
  margin: 0 0 15px;
  padding: 10px;
  width: 200px;
}

body {
  margin: 2rem;
}
var $forms = $("form");
$forms.focusin(function () {
  $forms.removeClass("active-form");
  $(this).addClass("active-form");
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js