JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>



<!DOCTYPE html>
<html>

<script>
	
	function Showfunction()
	{
		var eye = document.getElementById("eye");		
		var eye2 = document.getElementById("eye2");		
		var pass = document.getElementById("pass");		
		
		 if (pass.type === "password") {
			pass.type = "text";
			eye.style.display = "none";
			eye2.style.display = "block";
			}
			else {
			pass.type = "password";
			eye2.style.display = "none";
			eye.style.display = "block";
			
			
    
			}		
	}
	function hiddenscript() {
			var eye = document.getElementById("eye");
			eye.style.display = "block";
			
			
	}
	
		
	
	
	
</script>

<script>
	$(document).ready(function(){
		// set initially button state hidden
		// use keyup event on email field
		$("#email").keyup(function(){
			if(validateEmail()){
				// if the email is validated
				// set input email border green
				$('#inputemail').css('border-bottom', 'solid 2px #38d39f');
				$('#iconmail').css('color','#38d39f');
				$("#emailMsg").html("<p class='text-danger'></p>");
				$(':input[type="submit"]').prop('disabled', false);
				
				
				
				// and set label 
			}else{
				// if the email is not validated
				// set border red
				$('#inputemail').css('border-bottom', 'solid 2px #e50914');
				$('#iconmail').css('color','#e50914');
				$("#emailMsg").html("<p class='text-danger'>Enter valid email.</p>");
				$(':input[type="submit"]').prop('disabled', true);
				
			}
			
		});
		
			$("#pass").keyup(function(){
			// check
			if(validatePassword()){
				// set input password border green
				$('#inputpass').css('border-bottom', 'solid 2px #38d39f');
				$('#iconpass').css('color','#38d39f');
				$("#passMsg").html("<p...

CSS

*{
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}

body{
    font-family: 'Poppins', sans-serif;
    overflow: hidden;
    height: 100%;
    padding: 0;
    margin: 0;

}



.container{
	
    width: 100vw;
    height: 100vh;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap :7rem;
    padding: 0 2rem;
}

.login-content{
	display: flex;
	justify-content: flex-start;
	align-items: center;
	text-align: center;
}


.container{
	grid-template-columns: none;
	
}

form{
	padding:40px;
	
	background-color:#efefee;
	width: 460px;
	box-shadow: rgba(0,0,0, 0.1) 0 1px 5px;
	border-radius: 5px;
	
}
#eye {
	position: fixed;
	margin-left: 685px;
	margin-top:;
	color: #333;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	z-index: 3;
	display:none;
}
#eye2  {
	position: fixed;
	margin-left: 685px;
	margin-top:;
	color: #333;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	z-index: 3;
	display: none;
}



.login-content h2{
	
	margin: 15px 0;
	color: #333;
	text-transform: uppercase;
	font-size: 2.9rem;
	margin-bottom: 105px;
}

.login-content .input-div{
	position: relative;
    display: grid;
    grid-template-columns: 7% 93%;
    margin: 45px 0;
    padding: 5px 0;
    border-bottom: 2px solid #d9d9d9;
	
}

.login-content .input-div.one{
	margin-top: 0;
}

.i{
	color: #333;
	display: flex;
	justify-content: center;
	align-items: center;
	
}

.i i{
	transition: .3s;
}

.input-div > div{
    position: relative;
	height: 45px;
	
}

.input-div > div > h5{ 			/* //Az inputnak a szövege(Username,password) */
	position: absolute;
	left: 10px;
	top: 50%;
	transform: translateY(-50%);
	color: #333;
	font-size: 18px;
	transition: .3s;
}

.input-div:before, .input-div:after{
	content: '';
	position: absolute;
	bottom: -2px;
	width: 0%;
	height: 2px;
	background-color: #38d39f;
	transition: .4s;
}

.input-div:before{
	right: 50%;
}

.input-div:after{
	left: 50%;
}

.input-div.focus:before,...