JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://thecodeplayer.com/u/js/jquery.easing.min.js"></script>
<main>
        <h1><a href="http://www.dumetschool.com" target="_blank">DUMET School</a></h1>
        <form class="flp">
            <div>
                <input type="text" id="fname" />
                <label for="fname">First Name</label>
            </div>
            <div>
                <input type="text" id="email" />
                <label for="email">Email</label>
            </div>
        </form>
    </main>

CSS

/* Selamat Datang Di Blog DUMET School */
	* {margin: 0; padding: 0; box-sizing: border-box;}
	
	body {
		padding-top: 100px;
		background: #09F;
		font-family: Arial, Helvetica, sans-serif;
	}
	main {
		width: 500px; margin: 0 auto; padding-bottom: 10px;
		background: white; border-radius: 3px; overflow: hidden;
	}
	h1 {
		font-size: 24px; 
		font-weight: normal;
		background: #333;
		text-align: center; 
		padding: 20px 0; margin-bottom: 40px;
		color: #FFF;
	}
	main a {
		color: #FFF;
		text-decoration: none;	
	}
	main a:hover {
		color: #03F;
	}
	.flp {padding: 0 50px;}
	.flp div {position: relative; margin-bottom: 30px;}
	
	.flp input, .flp label {
		width: 400px; display: block;
		font: inherit; 
		font-size: 16px; 
		line-height: 24px;
		height: 46px;
		border: 1px solid #999;
	}
	.flp input {
		padding: 10px; 
		outline: none;
		border-radius: 3px;
	}
	.flp label {
		position: absolute; 
		left: 0; 
		top: 0;
		padding: 10px 8px;
		border-color: 
		transparent; color: #666;
		cursor: text;
	}
	
	/*label styles jQuery*/
	.ch {
		display: block; float: left;
		position: relative; 
		background: white; 
	}
	.ch:first-child {padding-left: 2px;}
	.ch:last-child {padding-right: 2px;}
	
	/*active input label*/
	.focussed {
		pointer-events: none;
	}

JavaScript

$(".flp label").each(function(){
			var sop = '<span class="ch">';
			var scl = '</span>';
			$(this).html(sop + $(this).html().split("").join(scl+sop) + scl);
			$(".ch:contains(' ')").html("&nbsp;");
		});
		
		var d;
		
		$(".flp input").focus(function(){
			var tm = $(this).outerHeight()/2 *-1 + "px";
			$(this).next().addClass("focussed").children().stop(true).each(function(i){
				d = i*50;//delay
				$(this).delay(d).animate({top: tm}, 200, 'easeOutBack');
			})
		});
		$(".flp input").blur(function(){
			
			if($(this).val() == "")
			{
				$(this).next().removeClass("focussed").children().stop(true).each(function(i){
					d = i*50;
					$(this).delay(d).animate({top: 0}, 500, 'easeInOutBack');
				})
			}
		});