JSFiddle - React, Tailwind, and code Playground

HTML

<div>
<input type="text" id="uname"/>
<label>Name</label>
</div>

CSS

div{
  position:relative;
  margin-top: 50px;
}
input{
  width:200px;
  height:30px;
  line-height:30px;
  padding:0;
  border:none;
  border-bottom:1px solod #666;

}
label{
  position:absolute;
  top:0;
  left:5px;
  color:#ccc;
  height:30px;
  line-height:30px;
}

JavaScript

$(document).on('focus','div',function(){
	$(this).siblings('label').animate({top:'-20px'});
})
.on('focusout','div',function(){
	$(this).siblings('label').animate({top:'0'});
})