JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<div class="container" style="margin: 0 auto; max-width: 600px">
<h1 class="text-center">Seamless login/regstration form</h1>
	<div class="row" style="padding-top: 40px">
		<form action="">
			<div class="col-sm-12" style="margin-bottom: 20px">
				<input type="email" class="form-control" placeholder="Email" data-reg-email>
			</div>

			<div class="col-sm-12 reg-pass-block" style="margin-bottom: 20px">
				<div class="welcome-info">
					<p class="text-center">Welcome back!</p>
					<small class="pull-left">You can now login.</small>
					<small class="pull-right text-right">
						<a href="#">Forgot my password</a> | <a href="#">What is happening?</a>
					</small>
				</div>
        
					<input type="password" class="form-control" placeholder="Password" data-reg-pass style="margin-bottom: 5px">

				<button class="btn btn-success btn-large" style="width: 100%" data-sign-in>Sing in & prefil</button>
			</div>

			<div class="col-sm-2">
				<input type="text" class="form-control" placeholder="Title" data-reg-title>
			</div>
			<div class="col-sm-5">
				<input type="text" class="form-control" placeholder="Firstname" data-reg-first>
			</div>
			<div class="col-sm-5" style="margin-bottom: 20px">
				<input type="text" class="form-control" placeholder="Surname" data-reg-last>
			</div>

			<div class="col-sm-7">
				<input type="text" class="form-control" placeholder="Phone" data-reg-phone>
			</div>

			<div class="col-sm-5" style="margin-bottom: 40px">
				<input type="text" class="form-control" placeholder="Zip Code" data-reg-zip>
			</div>

			<div class="col-sm-12" style="margin-bottom: 20px">
				<input type="text" name="title" class="form-control" placeholder="Title">
			</div>
      
      <div...

CSS

.reg-pass-block {
  display: none;
	padding: 5px 10px 15px 10px;
	background-color: rgb(245,245,245);
	box-shadow: 0 5px 5px rgba(0,0,0,0.19), 0 3px 3px rgba(0,0,0,0.23);
}

JavaScript

const EXISTING_EMAIL = '[email protected]'
const PASSWORD = '1234'

var passBlock = $(".reg-pass-block");
var passInput  = $("[data-reg-pass]");
var emailInput  = $("[data-reg-email]");
var title  = $("[data-reg-title]");
var first  = $("[data-reg-first]");
var last = $("[data-reg-last]");
var phone  = $("[data-reg-phone]");
var zip  = $("[data-reg-zip]");


function emailValidation(email)
{
	if (email === EXISTING_EMAIL) {
		passBlock.fadeIn();
    passInput.focus()
	}
}

function signIn(email, password)
{
	if (email === EXISTING_EMAIL && password === PASSWORD) {
		title.val('Mr.');
		first.val('Aaaa');
		last.val('Test');
		phone.val('+420 123 456 789');
		zip.val('123 00');
		passBlock.removeClass('has-error has-feedback');
    emailInput.prop( "disabled", true );
		passBlock.html("<span class='text-center success'>Login successfull<br>You can continue filling in the rest of the form.</span>");
    // When the users change thier personal information (apart from the email) and send the form 'Add comment' their profile will be updated.
    
	} else {
		passBlock.addClass('has-error has-feedback');
		passInput.val("");
	}
}

$(document).ready(function() {
	$("[data-reg-email]").focusout(function( event ) {
		emailValidation($(this).val());
	});

	$("[data-sign-in]").click(function() {
		event.preventDefault();
		signIn(emailInput.val(), passInput.val());
	});
});