<div class="group">
    <input type="email" id="email">
    <label for="email">Email</label>
    <img src="https://alikinvv.github.io/email-check/build/letter.svg" alt="" class="letter">
    <div class="alert"></div>
    <div class="sc"></div>
</div>

<span class="email">success email: success@gmail.com</span>





<!-- github  -->
<a href="https://github.com/alikinvv/email-check" target="_blank" class="github-corner" aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#151513; color:#e3eae8; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>

html,
body {
	height: 100%;
}

body {
	background: #e3eae8;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: 'Lato', sans-serif;
	font-weight: 700;
	height: 100%;
}

.group {
	position: relative;
	background: #fff;
	height: 60px;
	border-radius: 10px;
	box-shadow: 0 22px 24px -28px rgba(0, 0, 0, .2);

	&.focus {
		border: 2px solid #0071FE;

		label {
			opacity: 0;
		}
	}

	&.active {
		input {
			top: 17px;

			&:focus {
				& + label {
					opacity: 1;
				}
			}
		}

		label {
			top: 13px;
			font-size: 12px;
			color: #7D838D;
			opacity: 1;
		}
	}

	&.wrong {
		animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
		border-color: #fe2946;

		label {
			color: #fe2946;
		}

		.alert {
			transform: perspective(999px) rotateX(0deg) rotateY(0) rotateZ(0deg);
			opacity: 1;
		}
	}

	&.success {
		border-color: #33D353;

		label {
			color: #33D353;
		}
		
		.sc {
			transform: perspective(999px) rotateX(0deg) rotateY(0) rotateZ(0deg);
			opacity: 1;

			&::after {
				width: 0;
			}
		}
	}
}


label {
	position: absolute;
	top: 21px;
	left: 20px;
	color: #353a44;
	transition: all .2s ease-in-out;
	pointer-events: none;
	user-select: none;
}

.letter {
	width: 20px;
	position: absolute;
	top: 50%;
	right: 20px;
	transform: translateY(-50%);
}

input {	
	color: #353a44;	
	height: 30px;
	width: 260px;
	padding-left: 20px;
	padding-right: 20px;
	font-size: 19px;
	transition: all .2s ease-in-out;
	border: 2px solid transparent;
	font-weight: 700;
	position: relative;
	top: 15px;
	border-radius: 10px;
	font-family: 'Lato', sans-serif;

	&:focus {
		outline: none;
	}	
}

.alert {
	position: absolute;
	height: 64px;
    width: 64px;
	right: -2px;
	top: -2px;
	transform: perspective(999px) rotateX(0deg) rotateY(-90deg) rotateZ(0deg);
	transform-origin: right center 0px;
	transition: all .3s ease-in-out;
	border-radius: 9px;
	background: url('https://alikinvv.github.io/email-check/build/alert.svg') no-repeat center #FE2946;
	background-size: 20px;
	opacity: 0;
}

@keyframes shake {
	10%, 90% {
		transform: translate3d(-1px, 0, 0);
	}

	20%, 80% {
		transform: translate3d(2px, 0, 0);
	}

	30%, 50%, 70% {
		transform: translate3d(-4px, 0, 0);
	}

	40%, 60% {
		transform: translate3d(4px, 0, 0);
	}
}


.sc {
	height: 64px;
	width: 64px;
	position: absolute;
	right: -2px;
	top: -2px;
	transform: perspective(999px) rotateX(0deg) rotateY(-90deg) rotateZ(0deg);
	transform-origin: right center 0px;
	transition: all .3s ease-in-out;
	border-radius: 9px;
	background: url('https://alikinvv.github.io/email-check/build/success.svg') no-repeat center #33D353;
	background-size: 50px;
	opacity: 0;

	&::after {
		content: '';
		position: absolute;
		right: 10px;
		top: 0;
		width: 26px;
		height: 100%;
		background: #33D353;
		transition: all .4s ease-in-out;
		transition-delay: 200ms;
	}
}

.email {
	position: absolute;
	top: 40px;
	left: 50%;
	transform: translateX(-50%);
	color: #737983;
}

    $('body').on('focus', 'input', function () {
        $(this).parent().addClass('focus');
    });

    $('body').on('blur', 'input', function () {
        if (!$(this).val().length > 0) {
            $(this).parent().removeClass('focus');
        }        
    });

    $('body').on('keyup', 'input', function () {
        if ($(this).val().length > 0) {
            $(this).parent().addClass('active');
        } else {
            $(this).parent().removeClass('active wrong success');
            $('label').text('Email')
        }
    });

    $('body').on('keypress', 'input', function (event) {
        var keyCode = event.which;
    
        if (keyCode === 13) {
            if ($(this).val().length > 0) {
                if ($(this).val() === 'success@gmail.com') {
                    $('.group').removeClass('wrong');
                    $('.group').addClass('success');
                    $('label').text('Email')
                } else {
                    $('.group').removeClass('success');
                    $('.group').addClass('wrong');
                    $('label').text('Email format invalid')
                }
            }
        }
    });