<div class="panel_blur"></div>
  <div class="panel">
    <div class="panel__form-wrapper">
      <button type="button" class="panel__prev-btn" aria-label="Go back to home page" title="Go back to home page">
            <svg fill="rgba(255,255,255,0.5)" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
              <path d="M0 0h24v24H0z" fill="none"/>
              <path d="M21 11H6.83l3.58-3.59L9 6l-6 6 6 6 1.41-1.41L6.83 13H21z"/>
            </svg>
          </button>

      <ul class="panel__headers">
        <li class="panel__header"><a href="#register-form" class="panel__link" role="button">Sign Up</a></li>
        <li class="panel__header active"><a href="#login-form" class="panel__link" role="button">Sign In</a></li>
      </ul>

      <div class="panel__forms">

        <!-- Login Form -->
        <form class="form panel__login-form" id="login-form" method="post" action="/">
          <div class="form__row">
            <input type="text" id="email" class="form__input" name="login-mail" data-validation="email" data-error="Invalid email address." required>
            <span class="form__bar"></span>
            <label for="email" class="form__label">E-mail</label>
            <span class="form__error"></span>
          </div>
          <div class="form__row">
            <input type="password" id="password" class="form__input" name="login-pass" data-validation="length" data-validation-length="8-25" data-error="Password must contain 8-25 characters." required>
            <span class="form__bar"></span>
            <label for="password" class="form__label">Password</label>
            <span class="form__error"></span>
          </div>
          <div class="form__row">
            <input type="submit" class="form__submit" value="Get Started!">
            <a href="#password-form" class="form__retrieve-pass" role="button">Forgot Password?</a>
          </div>
        </form>

        <!-- Register Form -->
        <form class="form panel__register-form" id="register-form" method="post" action="/">
          <div class="form__row">
            <input type="text" id="register-email" class="form__input" name="register-mail" data-validation="email" data-error="Invalid email address." required>
            <span class="form__bar"></span>
            <label for="register-email" class="form__label">E-mail</label>
            <span class="form__error"></span>
          </div>
          <div class="form__row">
            <input type="password" id="register-password" class="form__input" name="register-pass" data-validation="length" data-validation-length="8-25" data-error="Password must contain 8-25 characters" required>
            <span class="form__bar"></span>
            <label for="register-password" class="form__label">Password</label>
            <span class="form__error"></span>
          </div>
          <div class="form__row">
            <input type="password" id="register-password-check" class="form__input" name="register-repeat-pass" data-validation="confirmation" data-validation-confirm="register-pass" data-error="Your passwords did not match." required>
            <span class="form__bar"></span>
            <label for="register-password-check" class="form__label">Check password</label>
            <span class="form__error"></span>
          </div>
          <div class="form__row">
            <input type="submit" class="form__submit" value="Register!">
          </div>
        </form>

        <!-- Forgot Password Form -->
        <form class="form panel__password-form" id="password-form" method="post" action="/">
          <div class="form__row">
            <p class="form__info">Can't log in? Please enter your email. We will send you an email with instructions on how to reset your password.</p>
          </div>
          <div class="form__row">
            <input type="text" id="retrieve-pass-email" class="form__input" name="retrieve-mail" data-validation="email" data-error="Invalid email address." required>
            <span class="form__bar"></span>
            <label for="retrieve-pass-email" class="form__label">E-mail</label>
            <span class="form__error"></span>
          </div>
          <div class="form__row">
            <input type="submit" class="form__submit" value="Send new password!">
          </div>
        </form>
      </div>
    </div>
  </div>
$pink: #ff1552;
$white: #fff;
$black: #000;

html{
	font-size: 100%; 
  box-sizing: border-box;
}

*,
*:before,
*:after { 
	box-sizing: inherit;
}

html, body{
  width: 100%;
  height: 100%;
}

body,
a,
button,
input{
	font-family: 'Montserrat', sans-serif;
  color: #fff;
  font-weight: 400;
  font-size: 0.938rem; 
  line-height: 1.15;
}
body{
  position: relative;
  background: url('https://image.ibb.co/jGk9RR/bg.jpg') no-repeat center fixed;
  background-size: 100% 100%;
  overflow-y: auto;

  @media screen and (min-width: 768px){
    min-height: 100%;
    height: auto;
    max-height: auto;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		overflow-y: visible;
	}
}
ul{
  list-style: none;
  margin: 0;
  padding: 0;
}
button{
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  &:active,
  &:hover {
	  outline: 0;
  }
}
a{
  text-decoration: none;
  cursor: pointer;
  &:active,
  &:hover {
	  outline: 0;
  }
}

.panel_blur,
.panel{
	width: 100%;
	height: 100%;
	overflow-y: auto;
	@media screen and (min-width: 768px){
		width: 350px;
		height: 500px;
		overflow-y: visible;
	}
}
/**
 * Blur
 */
.panel_blur{
	position: absolute;
	background: url('https://image.ibb.co/jGk9RR/bg.jpg') no-repeat center fixed;
	background-size: 100% 100%;
	filter: blur(5px);
}
/**
 * Panel 
 */
.panel{
	position: relative;
	z-index: 1;
	&__register-form,
	&__password-form{ display: none; }
	&__register-form .form__submit{ margin-top: 5px !important; }
	&__form-wrapper{
		width: 100%;
		height: 100%;
		padding: 10%;
		background-color: rgba(0,0,0,0.5);
		overflow-y: auto;
		@media screen and (min-width: 768px){ 
			padding: 10% 15%; 
			border-radius: 10px;
			overflow-y: visible;
		}
	}

	&__prev-btn{
		width:24px;
		height: 24px;
		background: none; 
		padding: 0;
		svg{ transition: fill 0.3s; }
		&:hover > svg{ fill: $pink; }
	}

	&__headers{
		padding: 10px 0;
		text-align: center;
	}

	&__header{
		font-size: 1.375rem;
		&:first-child{ padding-bottom: 5px; }
		&.active > .panel__link{
			color: $pink;
			font-size: 3rem;
		}
	}
  
	&__link{
		color: inherit;
		transition: all 0.3s;
    font-weight: 600;
	}
}
/**
 * Styles for <form>
 */
.form{
	&__row{
		position: relative;
		padding-top: 40px;
		&.has-error > .form__error:after{
			display: block;
		}
	}
	&__input{
		width: 100%;
		padding: 5px 0;
		border: none;
		border-bottom: 1px solid rgba(255,255,255,0.5);
		background: none;
    &:focus, &:active{
      outline: 0;
    }
		&:focus ~ .form__label,
		&:active ~ .form__label,
		&:valid ~ .form__label{
			bottom: 30px;
			font-size: 0.75rem;
		}
		&:focus ~ .form__bar,
		&:active ~ .form__bar{
			left: 0;
			right: 0;
			width: 100%;
		}
	}
	&__bar{
		position: absolute;
		bottom: 0;
		left: 50%;
		right: 50%;
		display: block;
		width: 0;
		height: 2px;
		background-color: $pink;
		transition: all 0.3s;
	}
	&__label{
		position: absolute;
		bottom: 5px;
		left: 0;
		width: 100%;
		transition: all 0.3s;
		pointer-events: none;
	}
	&__submit{
		width: 100%;
		padding: 10px 0;
		margin-top: 30px;
    border: none;
		border-radius: 10px;
		font-weight: 600;
		background-color: $pink;
    cursor: pointer;
	}
	&__retrieve-pass{
		display: block;
		padding: 15px 0;
		text-align: center;
		color: rgba(255,255,255,0.5);
		transition: all 0.3s;
		&:hover{
			color: $white;
		}
	}

	&__error{
		position: absolute;
		bottom: -20px;
		display: block;
		width: 100%;
		height: 20px;
		color: $pink;
		font-size: 0.75rem;
		line-height: 20px;
		&:after{
			content: 'x';
			position: absolute;
			bottom: 20px;
			right: -20px;
			display: none;
			width: 20px;
			height: 25px;
			font-size: 1.125rem;
			line-height: 25px;
			text-align: center;
			color: $pink;
		}
	}
  &__info{
    text-align: center;
  }
}
View Compiled
$(function() {
	$("form").attr('novalidate', 'novalidate');
    $('.panel__link, .form__retrieve-pass').on('click', function(e) {

        e.preventDefault();

        if ($(this).attr('href') === '#password-form') {
            $('.panel__header').removeClass('active');
        } else {
            $(this).parent().addClass('active');
            $(this).parent().siblings().removeClass('active');
        }
        target = $(this).attr('href');
        $('.panel__forms > form').not(target).hide();
        $(target).fadeIn(500);
    });

    $('.panel__prev-btn').on('click', function(e) {
        $('.panel, .panel_blur').fadeOut(300);
    });
});

$.validate({
	modules : 'security',
	errorMessageClass: 'form__error',
	validationErrorMsgAttribute: 'data-error'
});

External CSS

  1. https://fonts.googleapis.com/css?family=Montserrat:400,600

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/jquery-form-validator/2.3.26/jquery.form-validator.min.js