<div class="container">
  <div class="login">
    <div class="login-header">
      <h2>AxisCare</h2>
    </div>
    <div class="login-body">
      <form action="#" name="login">
        <div>
          <input type="text" placeholder=" " id="username" name="username" required>
          <label for="username">Username</label>
        </div>
        <div>
          <input type="password" placeholder=" " id="password" name="password" 
                 pattern="^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,15}$" required>
          <label for="password">Password</label>
          <div class="requirement"> Password must be between 8 to 15 characters,
               and must include at least one upper case letter, one lower case
               letter, and one numeric digit.
          </div>
        </div>
        <div class="login-control">
          <button type="submit">Login</button>
          <a href="#">I forgot my password</a>
        </div>
      </form>
    </div>

  </div>
</div>
<div class="footer">
  <small>Copyright 2017 AxisCare</small>
</div>
* {
    box-sizing: border-box;
}

body {
  position: relative;
  padding: 20px;
  margin: 0;
  min-height: 400px;
  text-align: center;
  background: #ddd;
  font-size: 12px;
  font-family: Arial, Sans-serif;  
}

.container {
  height: 100vh;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.login {
  width:400px;
  padding: 0 50px;
  background-color: white;
  border-radius: 10px;
  -webkit-box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);  
}

.login-header {
  padding: 15px 0 0 0;
}

.login-header h2 {
  color: indianred;
}

.login-body {
  padding: 10px;
}

form > div {
  position: relative;
}

form > div > label {
  position: absolute;
  top: 10px;
  left: 10px;
  opacity: 0.3;
}

form > div > input[type="password"],
form > div > input[type="text"] {
  width: 100%;
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 3px;
}

form > div > input[type="password"]:focus,
form > div > input[type="text"]:focus {
  box-shadow: 0 0 4px 1px rgba(205, 92, 92, 0.3);
  outline: 0;
}

form > div > input[type="password"]:focus + label,
form > div > input[type="text"]:focus + label {
  opacity: 0;
}

form > div > input[type="password"]:valid + label,
form > div > input[type="text"]:valid + label{
  opacity: 0;
}

form > div > input[type="password"]:invalid:not(:focus):not(:placeholder-shown),
form > div > input[type="text"]:invalid:not(:focus):not(:placeholder-shown){
  background-color: pink;
}

form > div > input[type="password"]:invalid:not(:focus):not(:placeholder-shown) + label,
form > div > input[type="text"]:invalid:not(:focus):not(:placeholder-shown) + label{
  opacity: 0;
}

form > div > input[type="password"]:invalid:focus:not(:placeholder-shown) ~ .requirement {
  margin: 5px 0;
  min-height: 300px;
  opacity: 0;
}

form > div .requirement {
  max-height: 0;
  opacity: 0;
  color: red;
  font-style: italic;
}

.login-control {
  padding: 10px 0;
}

button[type="submit"] {
    width: 100%;
    background: indianred;
    color: white;
    border: 0;
    padding: 10px 20px;
    left: 0;
    font-size: 12px;
    border-radius: 3px;
}

button[type="submit"]:hover {
  opacity: 0.8;
  cursor: pointer;
}

button[type="submit"]:focus {
  box-shadow: 0 0 4px 1px rgba(205, 92, 92, 0.3);
  outline: 0;
}

.login-control a {
    display: inline-block;
    text-decoration: none;
    right: 0;
    opacity: 0.3;
    color: black;
    padding: 5px;
    margin-top: 10px;
    border-bottom: 1px dotted #ccc;
}

.footer {
    position: absolute;
    padding: 5px;
    bottom: 0;
    left: 0;
    right: 0;
    color: white;
}

@media only screen and (max-width: 400px) {
    /* For mobile phones: */
    .login {
      width: 100%;
      padding: 0 5px;
      min-width: 270px;
    }
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.