JSFiddle - React, Tailwind, and code Playground

by qichengzx

HTML

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

CSS

div{
  position:relative;
  top:20px;
}
input{
  width:200px;
  height:30px;
  line-height:30px;
  padding:0 3px;
  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','input',function(){
	$(this).siblings('label').animate({top:'-20px'});
})
.on('focusout','input',function(){
	$(this).siblings('label').animate({top:'0'});
})